Support clustering for HTML "Marker"s

[D1M]

Hello! As we can see here https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ we could create a custom Marker and add it to map. e.g. new mapboxgl.Marker(...).setLngLat(...).addTo(map);

I'm trying to find the way how to add marker to the layer and organize into the Cluster. Smth like https://www.mapbox.com/mapbox-gl-js/example/cluster/ but with custom Markers:

1. var map = new mapboxgl.Map...
2. map.addSource(...);
3. map.addLayer(...);
4. and here map.getLayer(...).addMarker(Marker). or marker.addto(Layer/Source) or ... As a result we should see a Cluster with custom markers.

[lucaswoj]

Hi @D1M! We do not support clustering on Markers, only on symbol layers. This is a feature we may support in the future but have no immediate plans to add support.

[lucaswoj]

You can use custom icons with a symbol layer via the new Map#addImage method (going out in the next release) or by adding the icons to your sprite in Studio.

[D1M]

@lucaswoj thanks, looking forward to see such feature in future releases of mapbox-gl!

[lucaswoj]

Let's keep this issue open to track the feature 😄

[1ec5]

The Android and iOS analogue of this issue is being tracked in mapbox/mapbox-gl-native#5815.

[realph]

+1 I too would like to have custom markers that work with clustering.

[DarkKnight1992]

+1 would really love to have this feature

[peterqliu]

this is possible now, with https://github.com/mapbox/supercluster. Was originally built for leaflet maps, but can be adapted to GL marker.

[DarkKnight1992]

that's amazing, you guys are the best !!

[DarkKnight1992]

How to use this cluster plugin with custom html marker there is not much documentation about it ?? ;(

[peterqliu]

@DarkKnight1992 you are correct that there is no documentation specifically combining supercluster with GL custom markers. The former does provide GeoJSON as output, though, which you can figure out how to adapt as an input for the latter.

[DarkKnight1992]

@peterqliu but yo can't use custom marker as geojson in Mapbox Gl if i am not wrong ? Since you can't add a source and get a source layer very are using ajax for getting the getting and iteration for the former geojson created for mapbox leaflet to create new markers in Mapbox Gl. Is that the correct way of adding custom markers or mapbox gl provides some kind of api like loadurl() in mapbox leaflet ?

[peterqliu]

but yo can't use custom marker as geojson in Mapbox Gl if i am not wrong ?

@DarkKnight1992 see the first link in the original post above for an example of how to do this

[DarkKnight1992]

that's how its been done currently

[Wykks]

Implemented in https://github.com/alex3165/react-mapbox-gl But, as you can see in the demo : http://alex3165.github.io/react-mapbox-gl/, when we rotate/pitch the map, the cluster are messed up. Because it's not sending the real viewport to supercluster, it's based on the current axis-aligned rectangular bounding box (==> https://github.com/mapbox/mapbox-gl-js/issues/2112)

const bounds = map.getBounds();
const zoom = map.getZoom();
const newPoints = supercluster.getClusters(
      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],
      Math.round(zoom)
);

Does supercluster have a way to get the real viewport ? How it is done in mapbox-gl ? Because the cluster demo (https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/) works fine with rotation/pich, and as far I know, it use supercluster internally.

[peterqliu]

Does supercluster have a way to get the real viewport ?

@Wykks you can adapt unproject() on the four corners, for this purpose.

[DarkKnight1992]

@peterqliu ran into another problem today and paying very big price for using Mapbox Gl if there is no workaround for this problem. As i know mapbox-gl uses webgl to render images but a vast amount of our user base may not have webgl support. Can we render raster images instead of webgl? is that a possibilty ? If not then it's really been a huge waste of time using mapbox gl :(

[Wykks]

Whoa true, totally missed that, thanks !

@DarkKnight1992 Yep, as far I know mapbox-gl require webgl (hence the suffix -gl), you can use this plugin to test if mapbox-gl is supported : https://github.com/mapbox/mapbox-gl-supported

[DarkKnight1992]

@Wykks thanks. We didn't wanted to use other plugin for checking the webgl support and only a small script did the trick. But in the end i was really disappointed as we had to load to different libraries for doing the same thing. Shouldn't there be better work around for this ? Because loading a two different libraries mean using two different sets of code as a library and the actual code for the map. which goes against the basic rule of programming - "Never write code again fro the same result".

[peterqliu]

There is documentation for checking webgl support

[atelierhyper]

Any improvement on this one?

I managed to add custom icon by generating them with the addImage but I get a "SpriteAtlas out of space"... So I tought that we could have manage our marker manually and add them to a layer and the clustering would work out of the box without having to rebuild everything... it suck that it don't... I have over 500 markers on my map and each of them have an icon with their logos... so I have to add over 500 custom icon and without clustering it's a mess...

Why not, adding the possibility to pass a custom icon url in the GeoJSON to display???

[plucile]

+1 for marker clustering support

Also, Is there an event triggered when a symbol disappears to be part of a cluster? Using this code https://www.mapbox.com/mapbox-gl-js/example/cluster/

I have a map with markers. On click on a marker, the icon changes to an "active" style and a popup shows up. Since I want to use clustering, I've changed all my markers to be symbols. The only way I found to have an "active" icon on click is by adding a layer on top of all the symbols with just this point using a different icon. However when zooming out this symbol doesn't get clustered when the "default" one is resulting in the "active" icon displaying on top of the cluster...

Thanks

[guanioramon]

+1 For marker clustering support Hi Guys , please work around on this.This is most important feature. I am still using leaflet cluster on mapboxgl to make it working but this is very important feature.

[liampmccabe]

+1

Also after this, a custom icon url would be perfect!

[liampmccabe]

For anyone still wanting this feature. The current workaround I'm using is to display both markers and clusters on a map. Using queryRenderedFeatures to grab the unclustered points (which are hidden using the opacity prop) and using a unique id attribute/property to show/hide the markers on events such as render/load.

[danpe]

+1 really useful

[thuanmb]

For ReactJS lover, here is a solution for clustering (using supercluster) in mapbox-gl: https://github.com/thuanmb/react-mapbox-gl-cluster

[schlunsen]

Any news regarding this?

[3zzy]

+1

[shamalli]

+1 "musthave" feature

[3zzy]

Here's an example of clustering using HTML markers: https://jsfiddle.net/iaezzy/xpvt214o/309931/

.. but the recommended way is to use 'Symbols' which I realized and moved to after I figured I could use any external image with symbols. There's really no reason to use HTML markers over symbols.

[Wykks]

@3zzy You're example is incorrect (try to rotate / pitch), you should use unproject (see comments above). There are valid reasons to use HTML marker when you need very custom icons (like d3 generated icons). But yeah, before thinking about using HTML markers, one should check if it's doable using mapbox-gl style system.

[andrewharvey]

There are valid reasons to use HTML marker when you need very custom icons (like d3 generated icons).

@Wykks Could you do something like https://www.mapbox.com/mapbox-gl-js/example/add-image-generated/.

Interested to hear the reasons HTML Markers are needed over symbols. Personally I know animated markers (via css or gif) is a big one. Accessibility could be mitigated with https://github.com/mapbox/mapbox-gl-accessibility.

[andkom]

+1

[Wykks]

@andrewharvey stuff like that http://bl.ocks.org/gisminister/10001728 You can't use addImage to do this, because you can't generate everything in this case. And yep, animated markers is an issue with symbols.

[ghost]

+1

[shamalli]

@3zzy Thanks. This is the best clusters workaround for using HTML markers and popups

[ei-grad]

@andrewharvey

the reasons HTML Markers are needed over symbols

I want to display the users avatars on markers. In my case it is also reasonable to move the clustering to the server side. Could the vector source mapbox-gl-js functionality be used to manage the Marker's? Doesn't the usage of something like a https://github.com/nextzen/d3-vector-tiles overlay over the mapbox map sounds too sick?

[ei-grad]

Oh, found the querySourceFeatures method, could be really easy to integrate with d3 overlay.

[ghost]

@andrewharvey

the reasons HTML Markers are needed over symbols

In my app, users should be able to choose an option once they've located a marker, and the options will depend on the status of the place that the marker refers to. So far I haven't found another way.

[pawan8525]

@D1M @lucaswoj @1ec5 @realph @DarkKnight1992
i implemented cluster on react-native-map in mobile app but my requirement is like below , i dont know it is possible in react-native-map or not. Please help me team Thank you for your kind cooperation. First part show cluster that i implemented very well.

second part when press on cluster icon it show hidden marker that is almost on same location that i don't know how to implement please see image

Please if any plugin in react-native

[tmcintire]

What exactly is the best option right now when needing custom cluster icons as well as custom marker icons? Coming from leaflet, it supports this pretty well with DivIcons, I'm not sure how to implement this in mapbox though. Halp!

[pawan8525]

Hello tmcintire,thanks for your response. So you said it is not implement in react-native map.please reply.

[tmcintire]

I'm not using the react implementations of this. None of them expose nearly all of the api pieces that we use. We have a complex map with lots of layers and lots of custom markers. So we had to ditch trying to use react for this

[pawan8525]

Is there any solution to do this functionality in react-native-map?

[madc0w]

Clustering seems unnecessarily complicated. When can we expect to do this in a simple way using the Marker object?

[bo-bremen]

+1

[silicakes]

+1 can't wait for this one

[zhumumu1992]

我在做的产品是全美房源地图，因为layers-symbol不能实现我的业务需求，所以只能使用marker来实现自定义内容和样式。之前我使用的Google map js开发的产品，现在替换到mapbox-GL-，目前我只能像以前一样继续使用supercluseter作为替代方案，产品效果也很不错，https://github.com/mapbox/supercluster

所以，希望mapbox尽快实现cluster和marker的完美结合。

[arindammatrix]

This functionality is also needed in my project. We need the combination of marker cluster and custom marker icon in our project.