CODEWITHSUNDEEP
javascriptmapboxgeojsonmapbox-gl
lwchang
lwchang

Reputation: 23

Mapbox same circle-radius clusters overlap and count not displayed

We set up clusters for our maps with thousands + points following the example: https://www.mapbox.com/mapbox-gl-js/example/cluster/

We want all the clusters in the same size and we ran into a problem where the clusters are overlapping each other and thus the count within clusters are not always displayed, or the count displays but that cluster is not shown (partially hidden/overlapped by another cluster). We've tried different combinations of clusterRadius, (various steps of) circle-radius/circle-color.

var map = makeMap({
  container: 'map',
  locationSearch: true,
  zoom: 10
});

map.addSource("scheduled", {
  type: "geojson",
  data: geojsonScheduled,
  cluster: true,
  clusterMaxZoom: 24, // Max zoom to cluster points on
  clusterRadius: 8 // Radius of each cluster when clustering points (defaults to 50)
});

map.addLayer({
  id: "scheduled-clusters",
  type: "circle",
  source: "scheduled",
  filter: ["has", "point_count"],
  paint: {
    "circle-color": [
      "step",
      ["get", "point_count"],
      "#f1733b",
      100,
      "#f1733b"
    ],
    "circle-radius": [
      "step",
      ["get", "point_count"],
      10,
      100,
      10
    ],
    "circle-stroke-width": 0.5,
    "circle-stroke-color": "#ffffff"
  }
});

map.addLayer({
  id: "scheduled-cluster-count",
  type: "symbol",
  source: "scheduled",
  filter: ["has", "point_count"],
  layout: {
    "text-field": "{point_count_abbreviated}",
    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
    "text-size": 9
  }
});

map.addLayer({
  id: "scheduled-unclustered-point",
  type: "circle",
  source: "scheduled",
  filter: ["!has", "point_count"],
  paint: {
    "circle-color": "#f1733b",
    "circle-radius": 4.5,
    "circle-stroke-width": 0.5,
    "circle-stroke-color": "#ffffff"
  }
});

Any help or pointers is appreciated. Thank you!

Upvotes: 0

Views: 1644

Answers (1)

Ólafur Pétursson
Ólafur Pétursson

Reputation: 46

Add "text-allow-overlap" : true to the layout object for the scheduled-cluster-count layer. This will show the missing counts.

Upvotes: 1

Related Questions