MapBox GL Javascript - clusters - count not displaying

Question

I'm using MapBox GL JS v1.4.1

Based on the example here: https://docs.mapbox.com/mapbox-gl-js/example/cluster/

I cannot get my cluster count to display.

I have tried replicating the MapBox example directly and also using my own data but whatever I try results in the count not displaying.

This is what I have:

<div id="map"></div>

mapboxgl.accessToken = 'ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v10',
  zoom: 1
});

My geoJson data:

var geoData = {
  "type": 'FeatureCollection',
  "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [151.12100, -33.78420]
        },
        "properties": {
          "title" : "title",
          "description": "description"
        }
      },
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [151.12100, -33.78420]
        },
        "properties": {
          "title" : "title",
          "description": "description"
        }
      }
  ]
};

Loading the map, adding geoJSON, clusters etc:

map.on('load', function() {

  map.addSource("testMapData", {
    type: "geojson",
    data: geoData,
    cluster: true,
    clusterMaxZoom: 14,
    clusterRadius: 50
  });

  map.addLayer({
    id: "cluster-count",
    type: "symbol",
    source: "testMapData",
    filter: ["has", "point_count"],
    layout: {
      "text-field": "{point_count_abbreviated}",
      "text-font": ["Arial Unicode MS Bold"],
      "text-size": 12,
      "text-allow-overlap" : true
    }
  });

  map.addLayer({
    id: "clusters",
    type: "circle",
    source: "testMapData",
    filter: ["has", "point_count"],
    paint: {
      "circle-color": "#f1f075",
      "circle-radius": 40
    }
  });

  map.addLayer({
    id: "unclustered-point",
    type: "circle",
    source: "testMapData",
    filter: ["!", ["has", "point_count"]],
    paint: {
      "circle-color": "#51bbd6",
      "circle-radius": 8,
      "circle-stroke-width": 1,
      "circle-stroke-color": "#fff"
    }
  });

});

Based on the above I should get the cluster count on each of my clusters, but I only see the cluster with no count.

The console also shows no errors.

I can't determine if there's an issue with my geoJSON (it validates via the linter here: http://geojsonlint.com/)... or if the issue lies in how I have added the cluster-count layer... or somewhere else entirely.

Patrick Leonard Patrick Leonard · Accepted Answer · 2019-10-22T00:11:14

Currently you are adding the cluster-count layer before the clusters layer so the latter is covering up the former. If you switch the order you will see both: https:///codepen.io/pj_leonard/pen/bGGgYwv?editors=1000

Update your code to the following:

map.on('load', function() {

  map.addSource("testMapData", {
    type: "geojson",
    data: geoData,
    cluster: true,
    clusterMaxZoom: 14,
    clusterRadius: 50
  });

  map.addLayer({
    id: "clusters",
    type: "circle",
    source: "testMapData",
    filter: ["has", "point_count"],
    paint: {
      "circle-color": "#f1f075",
      "circle-radius": 40
    }
  });  

  map.addLayer({
    id: "cluster-count",
    type: "symbol",
    source: "testMapData",
    filter: ["has", "point_count"],
    layout: {
      "text-field": "{point_count_abbreviated}",
      "text-font": ["Arial Unicode MS Bold"],
      "text-size": 12,
      "text-allow-overlap" : true
    }
  });

  map.addLayer({
    id: "unclustered-point",
    type: "circle",
    source: "testMapData",
    filter: ["!", ["has", "point_count"]],
    paint: {
      "circle-color": "#51bbd6",
      "circle-radius": 8,
      "circle-stroke-width": 1,
      "circle-stroke-color": "#fff"
    }
  });

});

Disclaimer: I work at Mapbox

MapBox GL Javascript - clusters - count not displaying

1 Answers