Flutter how show markers in the circle? flutter_map

Question

newbie in Flutter. How show markers in the circle in flutter_map. Which day already trying to solve this problem. I can't make the markers in the radius change, or just change color. That's what i have achieved:

Position _currentPosition;
  static final List<LatLng> _points = [
    LatLng(55.749122, 37.659750),
    LatLng(55.770854, 37.626963),
    LatLng(55.776937, 37.637949),
    LatLng(55.739266, 37.637434),
  ];

  static const _markerSize = 40.0;
  List<Marker> _markers;
  List<CircleMarker> circle;

  @override
  void initState() {
    super.initState();

    _markers = _points
        .map(
          (LatLng point) => Marker(
        point: point,
        width: _markerSize,
        height: _markerSize,
        builder: (_) => Icon(Icons.location_on, size: _markerSize),
      ),
    ).toList();

    _getCurrentLocation();
  }

  _getCurrentLocation() {
    geolocator
        .getCurrentPosition(desiredAccuracy: LocationAccuracy.best)
        .then((Position position) {
      setState(() {
        _currentPosition = position;
      });

    }).catchError((e) {
      print(e);
    });
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: new MapOptions(
          minZoom: 16.0,
          center:  new LatLng(_currentPosition.latitude,_currentPosition.longitude)),
      layers: [new TileLayerOptions(urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a','b','c']),
        new MarkerLayerOptions(
            markers: [
              new Marker(
                  width: 45.0,
                  height: 45.0,
                  point: new LatLng(_currentPosition.latitude,_currentPosition.longitude),
                  builder: (context)=>new Container(
                    child: IconButton(icon: Icon(Icons.accessibility), onPressed: () {print('Marker tapped!');}),
                  ))]),
      MarkerLayerOptions(markers: _markers),
      CircleLayerOptions(circles: [ CircleMarker(
          point: LatLng(_currentPosition.latitude,_currentPosition.longitude),
          color: Colors.blue.withOpacity(0.7),
          borderStrokeWidth: 2,
          useRadiusInMeter: true,
          radius: 2000 // 2000 meters | 2 km
      )]),
    ],
    );
  }

my result - (this is image)

How to change the markers in the blue circle. For example change the marker icon?

score 2 · Answer 1 · answered Oct 18 '20 at 16:03

Have you tried changing the builder of your marker, like:

_markers = _points
    .map(
      (LatLng point) => Marker(
    point: point,
    width: _markerSize,
    height: _markerSize,
    builder: (_) => Icon(
       Icons.location_city,
       size: _markerSize,
       color: Colors.red,
    ),
  ),
).toList();

score 1 · Answer 2 · answered Oct 18 '20 at 16:08

First, you need to find the points inside your circle. You can use something like this before mentioned here:

  
static double getDistanceFromGPSPointsInRoute(List<LatLng> gpsList) {
    double totalDistance = 0.0;

    for (var i = 0; i < gpsList.length; i++) {
      var p = 0.017453292519943295;
      var c = cos;
      var a = 0.5 -
          c((gpsList[i + 1].latitude - gpsList[i].latitude) * p) / 2 +
          c(gpsList[i].latitude * p) *
              c(gpsList[i + 1].latitude * p) *
              (1 - c((gpsList[i + 1].longitude - gpsList[i].longitude) * p)) /
              2;
      double distance = 12742 * asin(sqrt(a));
      totalDistance += distance;
      print('Distance is ${12742 * asin(sqrt(a))}');
    }
    print('Total distance is $totalDistance');
    return totalDistance;
  }

Then you need to signature inside points with a boolean field.

 static final List<NewModel> _points = []; // NewModel contains boolean field with LatLng

After that you can easily customize the icons of the inside points like this:

_markers = _points
        .map(
          (NewModel newModel) => Marker(
        point: newModel.point,
        width: _markerSize,
        height: _markerSize,
        builder: (_) => 
                 newModel.isInside
              ? Icon(Icons.location_city, size: _markerSize),
              : Icon(Icons.location_on, size: _markerSize),
      ),
    ).toList();

Mohammad Shamsi · Answer 3 · 2020-10-19T08:21:38.650

1- you can use decoration in container:

      new Marker(
          width: 45.0,
          height: 45.0,
          point: new LatLng(_currentPosition.latitude,_currentPosition.longitude),
          builder: (context)=> new Container(
             decoration: BoxDecoration(
               color: Colors.blue,
               borderRadius: BorderRadius.circular(20),
            ),
            child: IconButton(
               icon: Icon(Icons.accessibility, color: Colors.white),
               onPressed: () {print('Marker tapped!');},
            ),
        )

2- or you can create a custom marker from a image :

import 'dart:ui' as ui;
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
...
Future<BitmapDescriptor> createMarkIcon(assetsPath, size) async {
  ByteData data = await rootBundle.load(assetsPath);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
      targetWidth: size);
  ui.FrameInfo fi = await codec.getNextFrame();
  return BitmapDescriptor.fromBytes(
    (await fi.image.toByteData(format: ui.ImageByteFormat.png))
        .buffer
        .asUint8List(),
  );
}

...

 BitmapDescriptor _markIcon =
      await createMarkIcon('assets/images/marker_icon.png', 60);

Marker _marker = Marker(
          position: _latlng,
          icon: _markIcon,
          onTap: () {
            // your code
          });

You did not understand me. It is not the location marker that needs to be changed, but the Markers that are inside the blue circle — Вася Пупкин, Oct 19 '20 at 14:58

Flutter how show markers in the circle? flutter_map

3 Answers3