How do I add a text-field from a geojson layer in Mapbox GL?

Question

I have some JSON in a file:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-87.5048, 33.2943],
        "properties": {
          "museum_count": 8465,
          "sw": [27.9802015625,-98.5048],
          "ne": [38.6083984375,-76.5048]
        }
      }
    }
  }
}

And I'm loading it into a map and trying to add a label to the circle with the museum_count:

mapboxgl.accessToken = 'pk.eyJ1IjoibXl0b3Vyc2FwcCIsImEiOiJDRUVsckI0In0.-eKUxQLVBgTtyoyhxyFyYQ';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [0,0],
  zoom: 4
});

map.addControl(new mapboxgl.Navigation());

map.on('load', function() {
  map.addSource('clusters', {
    type: "geojson",
    data: '/en/map.json'
  });

  map.addLayer({
      "id": "clusters",
      "type": "circle",
      "source": "clusters",
      "paint": {
          "circle-radius": 18,
          "circle-color": "#3887be"
      }
  });

  map.addLayer({
    "id": "clusters-label",
    "type": "symbol",
    "source": "clusters",
    "layout": {
      "text-field": "{museum_count}",
      "text-font": [
        "DIN Offc Pro Medium",
        "Arial Unicode MS Bold"
      ],
      "text-size": 12
    }
  });
});

The issue is that museum_count seems to be null. It doesn't seem to be picking up and data from the properties layer. Any ideas of what is going wrong here?

Answer 1

Hello barnaclebarnes!

Your problem stems from the GeoJSON you are using. It does not conform to the GeoJSON specification (I found one syntax error and one structural error). I recommend using a tool like GeoJSONLint to diagnose the problem and prevent future ones like it.

http://jsbin.com/yekewogevu/1/edit?html,output