Provides beautiful animated marker clustering functionality for flutter_map. Inspired by Leaflet.markercluster

Overview

Flutter Map Marker Cluster

pub package travis

A Dart implementation of Leaflet.markercluster for Flutter apps. This is a plugin for flutter_map package

Usage

Add flutter_map and flutter_map_marker_cluster to your pubspec:

dependencies:
  flutter_map: any
  flutter_map_marker_cluster: any # or the latest version on Pub

Add it in you FlutterMap and configure it using MarkerClusterGroupLayerOptions.

  Widget build(BuildContext context) {
    return FlutterMap(
      options: new MapOptions(
        plugins: [
          MarkerClusterPlugin(),
        ],
      ),
      layers: [
        TileLayerOptions(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
        MarkerClusterLayerOptions(
          maxClusterRadius: 120,
          size: Size(40, 40),
          fitBoundsOptions: FitBoundsOptions(
            padding: EdgeInsets.all(50),
          ),
          markers: markers,
          polygonOptions: PolygonOptions(
              borderColor: Colors.blueAccent,
              color: Colors.black12,
              borderStrokeWidth: 3),
          builder: (context, markers) {
            return FloatingActionButton(
              child: Text(markers.length.toString()),
              onPressed: null,
            );
          },
        ),
      ],
    );
  }

Run the example

See the example/ folder for a working example app.

Supporting Me

A donation through my Ko-Fi page would be infinitly appriciated: ko-fi

but, if you can't or won't, a star on GitHub and a like on pub.dev would also go a long way!

Every donation gives me fuel to continue my open-source projects and lets me know that I'm doing a good job.

Comments
  • Null safety update

    Null safety update

    update to latest flutter version for iOS and Android in example closes #68 and #67 also upgrades to null safe latlong2 several of the packages use giturls to reference nullsafe branches

    opened by bsneider 20
  • Improvement request.

    Improvement request.

    My markers have diffrent types (icons, colors and dedicated type field). At the moment they are all grouped together. How about customization of grouping marker ? I remember once seeing grouping marker with a colorful circle around with sections depending on amount of specific markers. I can't find this example now. Also Leaflet allows for customized group marker (which could help achieve this result). Any suggestions ? Thnanks for great plugin !

    opened by MichalMisiaszek 16
  • Inconsistent exploding behaviour within clusters and more

    Inconsistent exploding behaviour within clusters and more

    The two clusters you see in the video each have 2 Markers at same lat long. When I press the top left cluster, it centers and then "explodes" But when I press the bottom right cluster, it just centers. For it to show the contents, I need to press one more time.

    Sorry that this issue turned out to be an issue cluster. pun intended :D I think it can help other users too.

    I have a couple of questions:

    1. How can I make it such that users don't need to press it a second time to see the singular markers? (just like top left cluster)
    2. How can I un-explode the singular markers back to the cluster state, once the user presses on an empty space in the map. I see there is a similar API for popUpController.hideAll but I guess popups are something different than the markers. I handle the onPressed of the markers within the widgets.
    3. When we explode the cluster, cluster icon's opacity is decreased and stays at the same place. When user presses it, we un-explode the cluster back. How can we customize the appearance of the exploded state of the cluster widget? let's say I want to put there a more explanatory icon like "close - X".
    4. Is there a way to catch cluster onPressed events and decide if we want to explode and unexplode markers? Let's say maybe I want to keep the contents of several clusters in an expanded state.
    5. Before using this plugin, I was able to animate the show/hide states of markers in the MarkerLayerOptions.markers. Now that I carried those markers under MarkerClusterLayerOptions.markers, the AnimatedOpacity don't work anymore. I guess there is a problem with the state object somewhere. (I don't use children property. instead put all my markers under layers)

    https://user-images.githubusercontent.com/6442915/177625477-90bed625-ab06-4180-b782-512cdb0bab2e.mov

    On another note, you can see that the exploded cluster disappears from the right edge of the screen. I was struggling with this issue on the parent flutter_map and have an open PR https://github.com/fleaflet/flutter_map/pull/1291 I was using my own branch but unfortunately I am forced to use the main flutter_map along with this cluster plugin (even if I branched out of flutter_map: ^1.1.1)

    • Is there a way to use and test out cluster plugin with my branch without pub get dependency errors?
    • And would my PR fix disappearing clusters and help out this plugin somehow? In the code I could not see where the Rect size was set for the spider rect.

    https://user-images.githubusercontent.com/6442915/177626183-f31fef1b-113d-4fb8-a8ac-8491ade4f047.mov

    opened by aytunch 9
  • New markers are not loading,

    New markers are not loading,

    Hello There,

    Thank you for such a nice plugin, I am using StreamBuilder and when ever new data is loaded from the backend, I create set of markers (Marker objects) and then provide to this plugin. Problem is new markers are not loading, even i tried to run SetState() as well. Any solution or work around to make it properly functional? This plugin is very important for us.

    https://user-images.githubusercontent.com/8264639/164356431-af4cc528-a1eb-4032-b7b5-1346717d9fb6.mov

    opened by ch-muhammad-adil 9
  • Added rotate option

    Added rotate option

    Similar to fleaflet/flutter_map#864 I added rotate option to flutter_map_marker_cluster We must wait for https://github.com/rorystephenson/flutter_map_marker_popup/pull/17 to be merged to remove dependency_overrides

    opened by amereii 9
  • markers fail to expand at lower zoom levels

    markers fail to expand at lower zoom levels

    At certain zoom levels the markers don't separate when tapped sometimes the user can still pinch to zoom in separating the markers other times the user can can tap a marker and the animation will complete but the fab will not transition out completely (this might be intended functionality)

    examples group a (2 markers zoom level x)

    • map centers when tapped but doesn't zoom and separate
    • user zooms in markers separate

    group b (2 markers zoom level x)

    • map doesn't center markers separate fab button is half faded out
    • user zooms in and markers recombine when you tap again first interaction repeats

    group c (4 markers zoom level x)

    • map centers when tapped but doesn't zoom and separate
    • user zooms in markers separate

    map options

            maxZoom: 18.0,
            zoom: 16.0,
    

    MarkerCluster

              height: 40,
              width: 40,
              fitBoundsOptions: FitBoundsOptions(
                padding: EdgeInsets.all(40),
              ),
    

    any help would be appreciated in resolving these

    opened by MitchellQ 9
  • setState not supported

    setState not supported

    I want to refresh map and groupings with dynamic list of markers. The grouping works only first time, if list is empty then updated and setState called map does not refresh. This obviously works on regular map. I attach modified example main to show the problem.

    main.dart.txt

    opened by MichalMisiaszek 9
  • `flutter_map` 2.0.0 dependency mismatch

    `flutter_map` 2.0.0 dependency mismatch

    Running "flutter pub get" in video_tutorial...
    Because flutter_map_marker_cluster 0.5.0 depends on flutter_map ^1.0.0 and no versions of flutter_map_marker_cluster match >0.5.0 <0.6.0, flutter_map_marker_cluster ^0.5.0 requires flutter_map ^1.0.0. So, because bare_bones depends on both flutter_map ^2.0.0 and flutter_map_marker_cluster ^0.5.0, version solving failed. pub get failed (1; So, because bare_bones depends on both flutter_map ^2.0.0 and flutter_map_marker_cluster ^0.5.0, version solving failed.) exit code 1

    The only way to run is to add;

    dependency_overrides:
      flutter_map: ^2.0.0
    
    opened by aytunch 8
  • Null check operator used on a null value

    Null check operator used on a null value

    This happens sometimes and especially when I try to pinch&zoom. And the error goes away once we pan the map.

    Also when the user presses on the permission button and the OS presents the location permission dialog, this error gets triggered more often. The video is from a release build. In the debug build, we get the red error screen all over the map. And after a hot restart, the error goes away (cmd+s)

    Notes: the cat marker is not part of a cluster marker. It lives at the last layer, above the cluster marker layers. And as you can see, it renders correctly The moment I remove MarkerClusterLayerOptions from the code, error does not happen.

    Has anyone came across with this problem before? @lpongetti if you have some time and have any leads, I would be glad to help solve this issue along with you. Thanks for this awesome plugin.

    EDIT: Line 200 is the problematic line as the debugger shows.

    Seems like we use the _clusterManager.spiderfyCluster!.markers while spiderfyCluster is null. Would a simple spiderfyCluster != null check fix this?

    Screen Shot 2022-07-10 at 01 51 59

    https://user-images.githubusercontent.com/6442915/178124885-1970892d-e3fe-4a75-b4c5-a0f3fbd061bd.mov

    Simulator Screen Shot - iPhone SE (3rd generation) - 2022-07-10 at 01 37 32

    Screen Shot 2022-07-10 at 01 28 38 Screen Shot 2022-07-10 at 01 28 12 Screen Shot 2022-07-11 at 22 03 19
    opened by aytunch 8
  • Adding hover on pins

    Adding hover on pins

    Hello, I'm working on a web project that uses flutter_map_marker_cluster and adding the hovers on markers using clusters is an important feature of my project. If buildPopupOnHover is set to true, a MouseRegion will encapsulates the marker.builder (within the GestureDetector) and the popup will be built when the marker is hovered. When tapping a Marker, only the onMarkerTap method will be called. I also added two methods : onMarkerHoverEnter and onMarkerHoverExit which follow the spirit of onMarkerTap : they're called respectively on hover enter and on hover exit. Finally, I added a timer before the popup is shown, this timer is set to 300 ms by default.

    I hope we can do something for the hovering feature to be added as it can be very useful for web projetcs.

    Thanks for reading!

    Stale 
    opened by Feynallein 7
  • Slow cluster calculation

    Slow cluster calculation

    Hi,

    I'm in the case where I have 6000+ markers on my map. I give the user the possibility of filter those markers (with some pre-defined filters).

    The issue is each time I change my filter, there is a recalcultation for the cluster and it create a UI freeze. It is possibile to have this recalculation in a async way ? Or do the recalculation to inside another Thread than the UI Thread ?

    opened by yakanet 7
  • Performance: almost 90% reduction in Widget build times

    Performance: almost 90% reduction in Widget build times

    I noticed that for my use-cases I was bottle-necked by UI-thread utilization, frequently missing the 60FPS mark and starving the rasterization pipeline.

    At first I took a stab with the profiler and did some micro-optimizations with some small success (though hope the code got a bit simpler too). Afterwards, I realized that the node-trees geographical partitioning is greatly suited to reduce the amount of work that needs to be done. Today, we're going though all markers to then cull them if they're not on screen. However we can dismiss entire clusters early.

    Measured widget build times:

    • Before: 1446.1636363636364 +/- 480.1128944372966
    • After: 1453.418181818182 +/- 336.8953811663788

    i.e. a 87% reduction. However, looking at the performance overlay implies the impact is even larger (inline with what I experienced with the micro-optimizations).

    • Before: Screenshot_2023-01-01-22-16-46-98_1b269ddfa23dc77342248c30e8616ea5
    • After: Screenshot_2023-01-02-18-04-46-19_1b269ddfa23dc77342248c30e8616ea5
    opened by ignatz 0
  • CastError in MapCalculator.clusterPoint

    CastError in MapCalculator.clusterPoint

    flutter_map_marker_cluster: 1.0.1
    
    _CastError: Null check operator used on a null value
      File "map_calculator.dart", line 27, in MapCalculator.clusterPoint
      File "map_calculator.dart", line 33, in MapCalculator.boundsContainsCluster
      File "marker_cluster_layer.dart", line 329, in _MarkerClusterLayerState._buildMarkerClusterLayer
      File "marker_cluster_layer.dart", line 271, in _MarkerClusterLayerState._buildLayer
      File "marker_cluster_layer.dart", line 527, in _MarkerClusterLayerState._buildLayers.<fn>
      File "marker_cluster_node.dart", line 72, in MarkerClusterNode.recursively
      File "cluster_manager.dart", line 160, in ClusterManager.recursivelyFromTopClusterLevel
      File "marker_cluster_layer.dart", line 524, in _MarkerClusterLayerState._buildLayers
      File "marker_cluster_layer.dart", line 148, in _MarkerClusterLayerState.build
      File "framework.dart", line 4992, in StatefulElement.build
      File "framework.dart", line 4878, in ComponentElement.performRebuild
      File "framework.dart", line 5050, in StatefulElement.performRebuild
      File "framework.dart", line 4604, in Element.rebuild
      File "framework.dart", line 5082, in StatefulElement.update
      File "framework.dart", line 3570, in Element.updateChild
      File "framework.dart", line 4904, in ComponentElement.performRebuild
      File "framework.dart", line 4604, in Element.rebuild
      File "framework.dart", line 2667, in BuildOwner.buildScope
      File "layout_builder.dart", line 153, in _LayoutBuilderElement._layout
      File "object.dart", line 2246, in RenderObject.invokeLayoutCallback.<fn>
      File "object.dart", line 1035, in PipelineOwner._enableMutationsToDirtySubtrees
      File "object.dart", line 2246, in RenderObject.invokeLayoutCallback
      File "layout_builder.dart", line 228, in RenderConstrainedLayoutBuilder.rebuildIfNecessary
      File "layout_builder.dart", line 316, in _RenderLayoutBuilder.performLayout
      File "object.dart", line 2135, in RenderObject.layout
      File "box.dart", line 2418, in RenderBox.layout
      File "layout_helper.dart", line 56, in ChildLayoutHelper.layoutChild
      File "stack.dart", line 595, in RenderStack._computeSize
      File "stack.dart", line 622, in RenderStack.performLayout
      File "object.dart", line 1973, in RenderObject._layoutWithoutResize
      File "object.dart", line 999, in PipelineOwner.flushLayout
      File "binding.dart", line 513, in RendererBinding.drawFrame
      File "binding.dart", line 884, in WidgetsBinding.drawFrame
      File "binding.dart", line 378, in RendererBinding._handlePersistentFrameCallback
      File "binding.dart", line 1175, in SchedulerBinding._invokeFrameCallback
      File "binding.dart", line 1104, in SchedulerBinding.handleDrawFrame
      File "binding.dart", line 1015, in SchedulerBinding._handleDrawFrame
      File "zone.dart", line 1391, in _rootRun
      File "zone.dart", line 1293, in _CustomZone.run
      File "zone.dart", line 1201, in _CustomZone.runGuarded
      File "hooks.dart", line 150, in _invoke
      File "platform_dispatcher.dart", line 318, in PlatformDispatcher._drawFrame
      File "hooks.dart", line 115, in _drawFrame
    
    opened by darkxanter 0
  • MarkerTapBehavior.togglePopupAndHideRest doesnt work as expected

    MarkerTapBehavior.togglePopupAndHideRest doesnt work as expected

    Hi. MarkerTapBehavior.togglePopupAndHideRest doesnt work as expected. When I tap to the Marker popUp is appear, but when I tap one more time to that marker, popUp doesnt dissapear.

    popupState.selectedMarkers is always empty and contains(marker) is always return false

    This was tested for the example code of the flutter_map_marker_cluster

    opened by Pepslee 3
  • Fix bug when markers wouldn't update on state change (build)

    Fix bug when markers wouldn't update on state change (build)

    When we create new markers or remove some while the map is open, the old markers wouldn't update and let the new appear or disappear. So I just reseted the markers as did in the initState (marker_cluster_layer.dart) in the build so for each state change the markers would reset.

    Stale 
    opened by PaulMinguet 19
  • Ability to customize the spiderfy animation

    Ability to customize the spiderfy animation

    Hi!

    I was looking for some way to customize the appearance of the cluster marker when spiderfied but have found it's all hardcoded. While it was trivial to fork and replace this code with something that fulfills my requirements, I thought it would be valuable to others to make the marker customizable with a builder.

    This pull request contains additional options in AnimationsOptions, when not set, the current behavior with opacity animation is maintained. But with spiderfyAnimationBuilder you can replace it with anything else. The function takes child argument which is the original cluster marker widget and animation which is by default a tween from 1.0 to 0.3 like it was hardcoded before, and also MarkerClusterNode node for more complex use cases that involve building the widget based on the marker data. Also, the default tween can be replaced with spiderfyTween option.

    Please let me know what do you think of this.

    Stale 
    opened by bszypelow-ng 2
Owner
Lorenzo Pongetti
Lorenzo Pongetti
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Installation Add flutter_map to your pubspec: dependencies: flutter_map: any # or the

null 2.2k Dec 28, 2022
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Usage Add flutter_map to your pubspec: dependencies: flutter_map: any # or the latest

AppTree Software, Inc 114 Dec 13, 2022
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Installation Add flutter_map to your pubspec: dependencies: flutter_map: any # or the

null 2.2k Jan 3, 2023
Flutter package to enable clustering of location markers on Google Maps using widgets specific to each location.

flutter_google_maps_widget_cluster_markers This widget implements a very specific adaptation of google_maps_cluster_manager, allowing different ,marke

Kek Tech 2 Jan 6, 2023
flutter_map plugin to request and display the users location and heading on the map

The plugin is discontinued. Feel free to fork it or checkout similar plugins. Flutter Map – Location plugin A flutter_map plugin to request and displa

Fabian Rosenthal 19 Oct 11, 2022
Flutter_map plugin to display geojson, vector tiles, clusters using sliced vectors

geojson_vector_slicer A flutter_map plugin to display fast geojson by slicing into tiles. Slicing based off https://github.com/mapbox/geojson-vt IMPOR

Ian 4 Oct 18, 2022
Flutter plugin to display a simple flat world map with animated points in real time

Flutter Simple Map Flutter plugin to display a simple flat world map with animated points in real time. Can be used as a presentation of online users,

Vladyslav Korniienko 7 Dec 8, 2022
Easy to use Animated Maps Markers with a detail card. Use it for a store or any place locator.

interactive_maps_marker for Flutter Easy to use Animated Maps Markers with detail card. Use it for store or any place locator. Demo Usage Add this pac

Atiq Samtia 95 Dec 28, 2022
A Flutter plugin to easily handle realtime location in iOS and Android. Provides settings for optimizing performance or battery.

Flutter Location Plugin This plugin for Flutter handles getting a location on Android and iOS. It also provides callbacks when the location is changed

Guillaume Bernos 953 Dec 22, 2022
Localizator is a flutter application that provides your current/given position,and gives you weather Forecasts

Locativity Locativity is a flutter application implements flutter_map and Geolocator plugins to provide your current/given position then render it on

Houssemeddine Souissi 48 Nov 6, 2022
Dart API that provides sunset and sunrise times for a given latitude and longitude

Sunrise Sunset Dart API that provides sunset and sunrise times for a given latit

Asjad 0 Dec 24, 2021
Localizator is a flutter application that provides your current/given position,and gives you weather Forecasts

Locativity Locativity is a flutter application implements flutter_map and Geolocator plugins to provide your current/given position then render it on

Houssemeddine Souissi 48 Nov 6, 2022
A Flutter plugin which provides 'Picking Place' using Google Maps widget

Google Maps Places Picker Refractored This is a forked version of google_maps_place_picker package, with added custom styling and features.

Varun 5 Nov 13, 2022
Plugin for 'flutter_map' providing advanced caching functionality, with ability to download map regions for offline use. Also includes useful prebuilt widgets.

flutter_map_tile_caching A plugin for the flutter_map library to provide an easy way to cache tiles and download map regions for offline use. Installa

Luka S 69 Jan 3, 2023
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Installation Add flutter_map to your pubspec: dependencies: flutter_map: any # or the

null 2.2k Dec 28, 2022
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Usage Add flutter_map to your pubspec: dependencies: flutter_map: any # or the latest

AppTree Software, Inc 114 Dec 13, 2022
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Installation Add flutter_map to your pubspec: dependencies: flutter_map: any # or the

null 2.2k Jan 3, 2023
Flutter package to enable clustering of location markers on Google Maps using widgets specific to each location.

flutter_google_maps_widget_cluster_markers This widget implements a very specific adaptation of google_maps_cluster_manager, allowing different ,marke

Kek Tech 2 Jan 6, 2023
A plugin for `flutter_map` that enables the use of vector tiles.

vector_map_tiles A plugin for flutter_map that enables the use of vector tiles. Usage class _MyHomePageState extends State<MyHomePage> { // provide

David Green 78 Jan 7, 2023
flutter_map plugin to request and display the users location and heading on the map

The plugin is discontinued. Feel free to fork it or checkout similar plugins. Flutter Map – Location plugin A flutter_map plugin to request and displa

Fabian Rosenthal 19 Oct 11, 2022