How to create circle on current location in flutter

Question

I am working on flutter project.On which I have to draw one circle on my current location on google map.Does any one have idea.

I want like this in flutter

Thanks in advance.

Stock

Is there any reason to draw that circle? Is it to indicate the margin-of-error/accuracy of the current location (which is the current design of popular Map/Navigation apps)? – Giant

I want to set radius around my current location with different colour. – Stock

I mean any rationale to have radius around your current location? Is it to indicate different radius (1 mile, 5 miles), is it only for aesthetic reason, etc? – Giant

It is only for aesthetic reason on my selected radius whatever I assign on it.All specific location should show me ,like restaurant ,hospital etc etc on selected circle radius. – Stock

@Giant is there a way to do if the radius is in miles? – Glace

Answer 1

This functionality is now available in the google_maps_flutter package:

https://pub.dev/documentation/google_maps_flutter_platform_interface/latest/google_maps_flutter_platform_interface/Circle-class.html

Partial example:

Set<Circle> circles = Set.from([Circle(
    circleId: CircleId(id),
    center: LatLng(latitude, longitude),
    radius: 4000,
)]);

GoogleMap(
    mapType: MapType.normal,
    myLocationEnabled: true,
    myLocationButtonEnabled: true,
    initialCameraPosition: initialMapLocation,
    onMapCreated: (GoogleMapController controller) {
      _controller.complete(controller);
    },
    onCameraMove: null,
    circles: circles,
  );

Dub

Thanks for your effort, I will check it and revert back – Stock

The link you posted isn't working ... also how did you get circle ID. A detail answer is what needed !!! – Incense

@AliYarKhan final circleId = CircleId('circle_id_${DateTime.now().millisecondsSinceEpoch}'); I'm using this. – Frazil

I have to redraw circle on map with different radius. Can you let me know how that possible? because onmapcreated method will call one time only. – Kishakishinev

@PramodTapaniya do u have a solution for updating circles? – Mutton

@AliYarKhan You can use any random but unique string also. Example circleId: CircleId('myuniquecircleid') – Hundredweight

Answer 2

If you use flutter_map plugin, then you can draw radius circle easily. Here is the code.

FlutterMap(
    options: MapOptions(
        center: LatLng(latitude, longitude),
        zoom: 16.0
    ),
    layers: [
        TileLayerOptions(
            urlTemplate: "map url",
            additionalOptions:  {
            "accessToken" : "xxx",
            "id" : "map id"
            }
        ), 
        MarkerLayerOptions(
            markers: Marker( //marker
                width: 25.0,
                height: 25.0,
                point: LatLng(latitude, longitude),
                builder: (context) {
                return Container(
                    child: IconButton(
                        icon: Icon(Icons.my_location),
                        iconSize: 25.0,
                        color: Color(0xff9045f7),
                        onPressed: () {
                            print('marker tapped');
                        },
                        ),
                    );
                }
            )
        ),
        CircleLayerOptions(
            circles: CircleMarker( //radius marker
                point: LatLng(latitude, longitude),
                color: Colors.blue.withOpacity(0.3),
                borderStrokeWidth: 3.0,
                borderColor: Colors.blue,
                radius: 100 //radius
            )
        )
    ],
),)

Bourse

Thanks for this,My question is from where I can find the access token ? – Stock

@Hardik1344 You have to use Mapbox map in order to use this plugin. Mapbox map is also similar to Google Map. Once you create an account in Mapbox, you will get an access token. Unlike Google map Mapbox doesn't required a billing account get the access token. – Bourse

@Bourse how can i draw routing using MapBox with FlutterMap library ? – Enamour

@Enamour try this plugin and see. pub.dev/packages/flutter_mapbox_navigation – Bourse

Answer 3

You could use google_maps_flutter plugin, here is the code:

circles: Set.from([Circle( circleId: CircleId('currentCircle'),
      center: LatLng(position.latitude,position.longitude),
      radius: 4000,
          fillColor: Colors.blue.shade100.withOpacity(0.5),
          strokeColor:  Colors.blue.shade100.withOpacity(0.1),
    ),],),

Morena

Thanks for the help. For an appearance like ios put strokeColor: Colors.blue.shade100.withOpacity(1.0), strokeWidth: 1 – Abutilon

Answer 4

One way to do this is by changing the icon of the Marker

mapController.addMarker(MarkerOptions(
    position: LatLng(37.4219999, -122.0862462),
    icon: BitmapDescriptor.fromAsset('images/circle.png',),
     ),
);

After setting appropriate permission on android/ios, set trackCameraPosition: true and myLocationEnabled: true on google maps options, after that you can add your image in current location by following code

mapController.addMarker(MarkerOptions(
    position: mapController.cameraPosition.target,
    icon: BitmapDescriptor.fromAsset('images/circle.png',),
    ),
);

Here is an excellent article which explains all possible things you can do with Google Maps for Flutter (Developers Preview) plugin article

Nummary

Answer 5

There is an opended pull request with this feature at https://github.com/flutter/plugins/pull/1136

But Google team has not accepted it because there is a issue with license with whom made the commits. I don't know if this will be merged. There are a lot of pull request accepted, but not integrated.

Runnel

Answer 6

Just a small suggestion, from the latest changes of flutter_map you should use this structure for layers:

  return FlutterMap(
      options: MapOptions(
        initialCenter: LatLng(lat, lng),
      ),
      children: [
        TileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          userAgentPackageName: 'com.example.app',
        ),
        MarkerLayer(markers: [
          Marker(
              width: 0,
              height: 0,
              alignment: Alignment.center,
              //marker
              point: LatLng(lat, lng),
              child: IconButton(
                icon: Icon(Icons.my_location),
                onPressed: () {},
              )),

        ]),
        CircleLayer(
            circles: [CircleMarker( 
                point: LatLng(lat, lng),
                color: Colors.blue.withOpacity(0.3),
                borderStrokeWidth: 3.0,
                borderColor: Colors.blue,
                radius: 100 //radius
            )]
        )
      ]);

It's almost the same code, but with the proper notation. It's the same solution Thanooshan proposed, with the correct changes.

Nippon

Answer 7

Please keep in mind the google maps widget is a developer preview, at version 0.2. Many things and abilities will likely change over the coming months.

Affair

I think this "answer" is more like a comment than an answer. – Giant