Как добавить текстовое поле из слоя geojson в Mapbox GL?

Question

У меня есть некоторые JSON в файле:

{ 
    "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] 
     } 
     } 
    } 
    } 
} 

И я загружаю его в карту и пытается добавить метку к кругу с 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 
    } 
    }); 
}); 

Вопрос заключается в том, что museum_count похоже null. Кажется, он не собирает данные и данные из слоя свойств. Какие-нибудь идеи о том, что здесь происходит не так?

Answer 1

Hello barnaclebarnes!

Ваша проблема связана с используемым вами GeoJSON. Он не соответствует спецификации GeoJSON (я обнаружил одну синтаксическую ошибку и одну структурную ошибку). Я рекомендую использовать такой инструмент, как GeoJSONLint, чтобы диагностировать проблему и предотвратить ее появление в будущем.

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