mapbox-gl unclustered points overlaps as one circle

Question

I'm trying to view a group of unclustered points on the map after zooming in to level 16 but, for understandable reasons all the circles are being rendered on top of each other.

What i'm trying to achieve is, after zooming to level 16, i want to show set markers that contain a correct total number of points being rendered at that point (similar to cluster) but i want to show the GeoJson properties that is attached to it.

i've tried mini clustering it with turf that didn't work. i would like to create a marker that shows min and max of the value of all the points that are near to each other.

here's my codesandbox

https://codesandbox.io/s/late-smoke-tuc6b

gui3 gui3 · Accepted Answer · 2020-02-24T10:00:42

Could make something that looks like it work by reading this pull requesst and relative issue

Here is the codesandbox modified : https://codesandbox.io/s/cocky-greider-dserm

the main idea is to use these options


    map.on("load", () => {
      map.addSource("earthquakes", {
        type: "geojson",
        // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
        // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
        data,
        cluster: true,
        clusterMaxZoom: 15, // Max zoom to cluster points on
        clusterRadius: 60, // Radius of each cluster when clustering points (defaults to 50)
        // THIS OPTION TO ADD --------------------------------------
        clusterProperties: {
          max: ["max", ["get", "value"]],
          min: ["min", ["get", "value"]]
        }
      });

// ...

    map.addLayer({
        id: "cluster-count",
        type: "symbol",
        source: "earthquakes",
        filter: ["has", "max"],
        layout: { // the text field ------------------------
          "text-field": "min:{min}, max:{max}", 
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
          "text-size": 12
        }
      });

now you have more flexibility on what you can show, but remains the part of making a marker that fits the text

I'm not a mapbox user, hope this is what you were looking for

PS: you should change your API KEY now that anybody has been able to see it ...

mapbox-gl unclustered points overlaps as one circle

1 Answers