Mapbox marker clustering with JSON not GeoJSON

Question

I am trying to use marker clustering because I have over 2000 markers being mapped currently, but I am not sure how to implement it with the way that I am loading the markers. Do I have to use a GeoJSON in order to use marker clustering? I would prefer to not use GeoJSON if possible, I am using a JSON file at the moment and looping through the data stored on Firebase. I would like to use the supercluster library if possible (https://github.com/mapbox/supercluster) but I am not sure what to load into index.load(points). Is clustering possible the way I have my code at the moment?

    var markers = [];

    allMarkers();

    function allMarkers() {
        for (var i = 0; i < data.length; i++) {
            var marker = document.createElement("div");
                marker.className = "marker";
                marker.style.backgroundImage = "url(./icons/all.png)";
                marker.style.backgroundSize = "100%";
                marker.style.backgroundRepeat = "no-repeat";
                marker.style.width = "25px";
                marker.style.height = "25px";
                marker.style.filter = "drop-shadow(0px 5px 6px #000000)";

            new mapboxgl.Marker(marker)
                .setLngLat([data[i].Long, data[i].Lat])
                .setPopup(
                    new mapboxgl.Popup()
                        .setHTML(
                            ""
                        ).on("close", function() {

                        }).on("open", function() {
                            zoom = map.getZoom();
                            if (zoom < 17) {
                                map.flyTo({
                                    center: [this._lngLat.lng, this._lngLat.lat],
                                    zoom: 17
                                });
                            } else {
                                map.flyTo({
                                    center: [this._lngLat.lng, this._lngLat.lat]
                                });
                            }
                        }).setMaxWidth("400px")
                )
                .addTo(map); 
            markers.push(marker);
        }
    }

Your code looks good . Check the z-index of the class marker and also check the data array — LDS

Steve Bennett Steve Bennett · Accepted Answer · 2019-12-08T23:00:23

The easiest way to do clustering in Mapbox-GL-JS is using a GeoJSON source with cluster: true as in this example. It doesn't matter that your data is being sent to the browser as some other format, you can convert it into GeoJSON easily and then add it.

Currently you are representing your points using Markers, rather than a layer within the map such as circle or symbol. That would be more complex to combine with clustering, as you would need to create and destroy markers on demand, as the user zooms in and out. It will be much simpler to manage with a map layer, although it will limit your ability to style the marker symbols.

Mapbox marker clustering with JSON not GeoJSON

1 Answers