Question 74672 in Flutter Question posted in
The official Flutter documentation can be found here.

How to set Location Marker size depend on zoom in Flutter Map

I’m using flutter_map to display map on my flutter app.

here is the code

FlutterMap(
            mapController: mapController,
            options: MapOptions(
              interactiveFlags:
                  InteractiveFlag.pinchZoom | InteractiveFlag.drag,
              center: LatLng(9.964706, 76.289714),
              zoom: 13.0,
              rotation: 0,
            ),
            children: [
              TileLayer(
                urlTemplate:
                    'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png',
                subdomains: const ['a', 'b', 'c'],
              ),
              MarkerLayer(
                  markers: List.generate(
                userList.length,
                (index) {
                  final user = userList[index];
                  return Marker(
                    width: 200,
                    height: 200,
                    point: LatLng(user.coords[0], user.coords[1]),
                    builder: (ctx) {
                      return GestureDetector(
                        onTap: () => showuserDetailSheet(context, user),
                        child: UserPointer(
                          color: user.color,
                          icon: user.gender == Gender.male
                              ? Icons.male
                              : Icons.female,
                          name: user.username,
                          age: user.age,
                        ),
                      );
                    },
                  );
                },
              ))
            ],
          ),

here is the screenshots for better understanding

enter image description here

i want to reduce the size when the user zoom out the map or increase the size when user zoom in. how do i do that in flutter map

Tags:

2

Answers


  1. 0

    You can achieve this by listening to the onPositionChanged event of the MapOptions and then update the marker size based on the zoom level.

    import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

class YourMapWidgetState extends State<YourMapWidget> {
  MapController mapController;
  double _markerSize;

  @override
  void initState() {
    super.initState();
    mapController = MapController();
    _markerSize = 200.0; // Default marker size
  }

  void _updateMarkerSize(double zoom) {
    // Update the marker size based on zoom
    setState(() {
      _markerSize = 200.0 * (zoom / 13.0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      mapController: mapController,
      options: MapOptions(
        interactiveFlags: InteractiveFlag.pinchZoom | InteractiveFlag.drag,
        center: LatLng(9.964706, 76.289714),
        zoom: 13.0,
        rotation: 0,
        onPositionChanged: (position, hasGesture) {
          if (hasGesture) {
            _updateMarkerSize(position.zoom);
          }
        },
      ),
      children: [
        TileLayer(
          urlTemplate: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png',
          subdomains: const ['a', 'b', 'c'],
        ),
        MarkerLayer(
          markers: List.generate(
            userList.length,
            (index) {
              final user = userList[index];
              return Marker(
                width: _markerSize,
                height: _markerSize,
                point: LatLng(user.coords[0], user.coords[1]),
                builder: (ctx) {
                  return GestureDetector(
                    onTap: () => showuserDetailSheet(context, user),
                    child: UserPointer(
                      color: user.color,
                      icon: user.gender == Gender.male
                          ? Icons.male
                          : Icons.female,
                      name: user.username,
                      age: user.age,
                    ),
                  );
                },
              );
            },
          ),
        ),
      ],
    );
  }
}
    Login or Signup to reply.
  2. 0 
        you can set the size of a **location marker** based on the zoom level of the map by using the **onPositionChanged** callback of the GoogleMap widget.
        
        1. example calculation of the marker size based on the zoom level of the map.
        double calculateMarkerSize(double zoom) {
          if (zoom <= 10) {
            return 20.0;
          } else if (zoom <= 15) {
            return 30.0;
          } else {
            return 40.0;
          }
        }
        
        2. In the _onCameraMove callback start implementing the calculation function for the size of the marker based on the zoom position.
        
        void _onCameraMove(CameraPosition position) {
          setState(() {
            _markerSize = calculateMarkerSize(position.zoom); // function to calculate the marker size based on the zoom level
          });
        }
        
        3. Implement those callbacks in the google map widget 
        
        GoogleMap(
          onMapCreated: _onMapCreated,
          onCameraMove: _onCameraMove,
          markers: _markers,
        ),
    
    4. then use the calculated result of the marker size in the marker.


Set<Marker> _markers = Set<Marker>();
   


@override
  void initState() {
    super.initState();
    _markers.add(
     Marker(
  markerId: MarkerId('marker'),
  position: _currentPosition,
  icon: BitmapDescriptor.fromAssetImage(
    ImageConfiguration(size: Size(_markerSize, _markerSize)),
    'assets/marker.png',
  ),
),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search