Amcharts4 Maps with custom geojson data only show one feature (geographical region) out of many?

Question

I was trying to create a map with amcharts4's custom maps using this tutorial. It works perfectly when I used a map from amcharts geojson library. But when I add a different map like this map. It only shows the last feature of geojson feature collection. I tried adding a id as described here in this issue but It gave me the same result. Can anybody help me to get this work?

here is a code pen demostrating the issue: https://codepen.io/sankhax/pen/YzwLdJy

Thanks in advance.

score 2 · Accepted Answer · answered Jul 09 '20 at 16:55

Your GeoJSON is still missing the id property, which needs to be unique for each feature in your JSON's features array; the tutorial states that it needs to be in the top-level of the feature object, but having an id in the properties object also works, as you can see in the other map in your codepen. The value stored in electoralDistrictCode from your properties data is a good candidate for an id:

[{
    "type": "Feature",
    "id": "MON",
    "properties": {
        "electoralDistrictCode": "MON",
        "electoralDistrict": "Monaragala",
        // ...
    },
    "geometry": {/* ... */}
},{
    "type": "Feature",
    "id": "ANU",
    "properties": {
        "electoralDistrictCode": "ANU",
        "electoralDistrict": "Anuradhapura",
        // ...
    },
    "geometry": {/* ... */}
},
// ...
]

Once you add this to your JSON, your map will render correctly in AmCharts v4. Demo below, using a manual AJAX request to mutate the JSON to work with the library:

var map = am4core.create("chartdiv", am4maps.MapChart);
// indonesia geojson
fetch(
  "https://raw.githubusercontent.com/GayanSandaruwan/elections/master/electoral_with_results.geojson"
)
  .then(function(resp) {
    if (resp.ok) {
      return resp.json();
    }
    throw new Error("Unable to fetch json data");
  })
  .then(function(data) {
    //add the missing id property before assigning it to the map
    data.features.forEach(function (feature) {
      feature.id = feature.properties.electoralDistrictCode;
    });
    map.geodata = data;
  });
map.projection = new am4maps.projections.Miller();
var polygonSeries = new am4maps.MapPolygonSeries();
polygonSeries.useGeodata = true;
map.series.push(polygonSeries);

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

Thank you very much for your answer. :) I simplified above map using http://mapshaper.org/ since it was 4MB+ in size, however, my new map is showing the same old error. here is the updated code pen https://codepen.io/sankhax/pen/YzwLdJy could you please help me? — Sankha Karunasekara, Jul 09 '20 at 19:32
Your coordinates need to be in [clockwise order](https://www.amcharts.com/docs/v4/tutorials/custom-polygons-on-map-chart/#Final_word) (see note above Final word). Your points are in counter-clockwise order. Also note that you still don't have IDs set in your JSON. — xorspark, Jul 10 '20 at 00:16
I am using your implementation codepen.io/sankhax/pen/YzwLdJy here. So you appending the ids later. =D I am following https://www.amcharts.com/docs/v4/tutorials/creating-custom-maps/ this tutorial to reduce the file size of the map. It doesn't mention the fact that coordinates need to be clockwise. :( is there way to fix it using mapshaper.org ? — Sankha Karunasekara, Jul 11 '20 at 14:05
Thank you very much. I got it working by using https://github.com/mapbox/geojson-rewind thanks again for your help. =D — Sankha Karunasekara, Jul 11 '20 at 18:08

Amcharts4 Maps with custom geojson data only show one feature (geographical region) out of many?

1 Answers1