CODEWITHSUNDEEP
javascriptgeojsonmapbox-gl-jsmapbox-gl
BardZH
BardZH

Reputation: 452

mapbox-gl unclustered points overlaps as one circle

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.

enter image description here here's my codesandbox

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

Upvotes: 2

Views: 2209

Answers (1)

gui3
gui3

Reputation: 1877

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 ...

Upvotes: 2

Related Questions