GeoJson amchart показывает, что не так с geoJson?

Question

Я относительно новичок в ammCharts, и это моя первая попытка создать файл geoJSON.

Ниже мой GeoJSON файл:

GeoJSON file

Это то, что я пытаюсь достичь: example

Когда я загружаю мой GeoJSON это то, что происходит:

Так работает только один многоугольник. По какой-то причине у меня возникают проблемы и я не могу выполнить jsfiddle или codepen кода. Я считаю, что что-то не так в моем geoJSON, поскольку я загрузил другие случайные файлы Geojson, они отлично работают с кодепином, созданным amcharts, только моя работа с дозами.

Я использую geojson.io для создания geoJson.

Answer 1

Проблема с вашим geoJSON заключается в том, что ему не хватает идентификаторов. Карты AmCharts требуют уникальных идентификаторов для каждого региона. Поскольку в любом из ваших регионов нет свойства "id", все они по умолчанию будут иметь значение null, позволяя выделить только один из регионов. Я изменил свой JSON и добавил идентификаторы с тем же значением, что и район в каждом регионе, как так:

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { 
     "type": "Feature", 
     "properties": { 
     "division": "Muzaffarabad", 
     "district": "Muzaffarabad", 
     "id": "Muzaffarabad", 
// ... others omitted 

Я также изменил пример, чтобы добавить атрибут "title" в преобразованный объект, так что вы получите имя область при наведении на него по умолчанию:

for(var i = 0; i < svg.length; i++) { 
    var path = svg[i]; 
    var attrs = path.match(/\w+=".*?"/g); 
    var area = {}; 
    for(var x = 0; x < attrs.length; x++) { 
     var parts = attrs[x].replace(/"/g, '').split("="); 
     var key = fieldMap[parts[0]] || parts[0]; 
     area[key] = parts[1]; 
    } 
    //added for hover-over balloons 
    area["title"] = area["id"]; 
    mapVar.svg.g.path.push(area); 
    } 

Here's a demo с измененным файлом и примеры кода. Вы можете найти полностью модифицированный файл geoJSON here.