Flutter_map: Multiple markers with the same latitude & longitude

[BramDC3]

I'm working on a Flutter app that has a list of learning opportunities that can happen on the same location, but right now the markers on the map just stack. I don't think there's a way yet to display the number of markers that overlap.

[johnpryan]

Not out of the box, but you can manually "cluster" the pins on the client side or cluster them some other way. Since everything is a widget, it's fairly simple to overlay text containing the number over a pin widget.

Let me know if you need more guidance!

[BramDC3]

Thanks for the reply, but I have no idea how to do that though :/

Op wo 12 sep. 2018 om 20:15 schreef John Ryan [e-mail]:

Not out of the box, but you can manually "cluster" the pins on the client
side or cluster them some other way. Since everything is a widget, it's
fairly simple to overlay text containing the number over a pin widget.

Let me know if you need more guidance!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/apptreesoftware/flutter_map/issues/100#issuecomment-420746898,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae1SG_jg_IQwqHQhcE8sqTDLkifd0WM4ks5uaU89gaJpZM4Wkxpd
.

[johnpryan]

You could take a look at https://github.com/Leaflet/Leaflet.markercluster for inspiration, but the plugin would need to be ported to Dart in order to use it...

Since this is harder than most contributions, I'll leave this open for anyone that wants to try.

[zhen1991]

Hi!
I have a little bit the same problem i wanna add a gruop of marker to my map and i am using flutter map !
any idea about how to do it??
thnx:)

[etzuk]

You could take a look at https://github.com/Leaflet/Leaflet.markercluster for inspiration, but the plugin would need to be ported to Dart in order to use it...

Since this is harder than most contributions, I'll leave this open for anyone that wants to try.

I need this feature too. I probably implement that.

@johnpryan What do you think about adding MarkerClusterLayer as a layer? (same as marker,circle ...)
For example:
class MarkerCluster { final List<Marker> markers; final WidgetBuilder builder; MarkerCluster(this.markers, this.builder); }

[johnpryan]

@etzuk I'm not opposed if someone would like to implement that as a plugin. There's different strategies to cluster markers, as well as different APIs (cluster radius, etc)

[aytunch]

You could take a look at https://github.com/Leaflet/Leaflet.markercluster for inspiration, but the plugin would need to be ported to Dart in order to use it...
Since this is harder than most contributions, I'll leave this open for anyone that wants to try.

I need this feature too. I probably implement that.

@johnpryan What do you think about adding MarkerClusterLayer as a layer? (same as marker,circle ...)
For example:
class MarkerCluster { final List<Marker> markers; final WidgetBuilder builder; MarkerCluster(this.markers, this.builder); }

@etzuk Did you have a chance to look in to this issue/feature? Seems like lots of us are interested in it:)

[csjames]

Would users specify their own centroid and markers for each cluster, or
would clustering need to also be handled by the lib?

On Mon, 4 Feb 2019 at 22:27, aytunch [e-mail] wrote:

You could take a look at https://github.com/Leaflet/Leaflet.markercluster
for inspiration, but the plugin would need to be ported to Dart in order to
use it...
Since this is harder than most contributions, I'll leave this open for
anyone that wants to try.

I need this feature too. I probably implement that.

@johnpryan https://github.com/johnpryan What do you think about adding
MarkerClusterLayer as a layer? (same as marker,circle ...)
For example:
class MarkerCluster { final List markers; final WidgetBuilder
builder; MarkerCluster(this.markers, this.builder); }

@etzuk https://github.com/etzuk Did you have a chance to look in to
this issue/feature? Seems like lots of us are interested in it:)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/johnpryan/flutter_map/issues/100#issuecomment-460438298,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALluZXmeWVvnDgKsOZy9kKT8WooQ7Md8ks5vKLO5gaJpZM4Wkxpd
.

[johnpryan]

I haven't had time to put serious thought into this feature. I imagine that there would be two builders; one for the case where a pin is not clustered, and one that is clustered (with a number indicating the number of pins) and as @csjames mentioned some way of specifying the cluster distance (e.g. https://www.elastic.co/guide/en/elasticsearch/guide/current/geo-aggs.html)

[926]

Any chance to put this on top ?
Markerclusterer would be a must for our users.
Here is another reference in .js :
Supercluster :

• https://gis.stackexchange.com/questions/261987/custom-icon-for-clusters-in-mapbox-gl-js
• https://www.npmjs.com/package/supercluster

How about reusing :

• https://github.com/jolleekin/modern_charts/blob/master/lib/src/pie.dart

To get :

[RaimundWege]

@BramDC3 have a look at #201 in that issue I've described a way how to use k-means with flutter_map and eventually it fits your needs. @926 it should also be possible to use the cluster informations to build up a custom marker like a pie widget.

[etzuk]

I haven't had time to put serious thought into this feature. I imagine that there would be two builders; one for the case where a pin is not clustered, and one that is clustered (with a number indicating the number of pins) and as @csjames mentioned some way of specifying the cluster distance (e.g. https://www.elastic.co/guide/en/elasticsearch/guide/current/geo-aggs.html)

Could you please look at this basic commit?
https://github.com/etzuk/flutter_map/commit/a4a3c5076c2981b10d932aaecb8e9218cec7a658

Very basic, allow creating a cluster with a list of markers and show on the map as a cluster(basic pin with markers count text or custom widget) or the markers list himself.

[926]

Thanks for sharing @etzuk

Also have you looked at :
giandifra’s clustering_google_maps
it uses GEOHASH to save the points in local sqflite db.

[926]

Hi all, I keep on receiving demands for a marker/clusterer. So I'm coming back to this issue.

Thank you again @etzuk for providing a customised commit in order to preview the cluster. Below is the screenshot I get :

This example does not fragment markers when user zooms in, nor group markers when users zoom out. This is the reason I also mentioned Giandifra's repo which provides zoom in/out functionality. There should be a way to use methods from this repo, I am still trying to debug it...

Regarding the pie widget, @RaimundWege advised to use the cluster information to render custom marker. Indeed this might be the easiest method. Charts already provides a gauge design that could be used.

@BramDC3 do you reckon Leaflet might be willing to sponsor this feature ?

[etzuk]

I can continue to develop this feature. I just need to understand if we can agree on the design.

In my example, MarkersCluster is a layer WDYT about that?
If we agree on that so the next step is solving the logic that shrink/ expands the markers.
Probably in a way that enables developers to inject this logic or take the default that can intersect markers icons or something like that.

Do I miss something?

[926]

Thanks for support !
Raimund already provided a model for the shrink/expand issue : #201

I think the logic that would empower developers also lies in the pie cluster settings, i.e. how does one configure pies so that they adapt to each case, e.g. 1 - 8 parameters each with custom colours and specific value rendered in gauge or pie chart.

I will work on a mock-up to show how clusters should react as we shrink/expand the map.

[926]

@etzuk

[etzuk]

@926
Looks great! Could you explain more about the pies and how they splits?
For example, I can understand The cluster of "2" with two colors and "3" with 3 colors but, "3" with 2 colors?
More than that I really think the best option is to pass a WidgerBuilder as implemented in Markers. It says that the developer can inject his view.

[926]

@etzuk
Thanks !
Regarding the "3" with two colours, yellow should be a bit bigger.
But the info is that :

• 2 are green so presumably ok / available
• 1 is yellow so average

I have no clue regarding the best option for developer to inject his view.
I assume this allows to build on top of flutter_map.
Would this also allow is to reuse : https://pub.dartlang.org/packages/charts_flutter

[lpongetti]

https://github.com/lpongetti/flutter_map_marker_cluster

[926]

@lpongetti

[lpongetti]

@926
if it was helpful put star please! :)

[MichalMisiaszek]

The map cluster from lpomgetti does everything what is required.

[johnpryan]

Okay - it sounds like we can close this. Thanks @lpongetti!

[926]

Finally managed to launch it on my laptop for a demo.
Seems that the error was due to a combination of bad internet and slow RAM...
Thank you again @lpongetti and @johnpryan

I will keep you updated if this leads to a dedicated commercial project.