GeoJson amchart maps what is wrong with geoJson?

Question

I am relatively new to ammCharts and it is my first attempt to create a geoJSON file also.

The following is my geoJson file:

This is what I am trying to achieve: example

When I load my geoJson this is what happens :

So only one polygon is actively working. For some reason I am having problems and could not make jsfiddle or codepen of the code. I believe something is wrong in my geoJSON as I have loaded other random Geojson Files they work fine with the codepen created by amcharts just mine dosent work.

I am using geojson.io to create the geoJson.

xorspark · Accepted Answer · 2017-01-21T14:39:35.160

7

The issue with your geoJSON is that it lacks ids. AmCharts' maps require unique IDs for each region. Since there's no "id" property set in any of your regions, they'll all default to null, allowing only one of the regions to be highlighted. I modified your JSON and added ids with the same value as the district in each region like so:

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

I also modified the example to add a "title" attribute to the converted object so that you'll get the name of the area when you hover over it by default:

  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 with the modified file and example code. You can find the fully modified geoJSON file here.

edited Jan 21 '17 at 14:39

answered Jan 20 '17 at 17:43

xorspark

15,749
2
29
38

Thanks a lot know it all makes sense. – hamadkh Jan 20 '17 at 19:07
This answer saved my night! Thanks sooo much! AmCharts must write it somewhere in RED that GeoJSON files must come with an id for each item to be depicted on the map. – Philip Mar 05 '20 at 14:13
I have the same issue. I tried this didn't work. I found that when I using a particular set of coordinates even though map rendered in the other services like https://mapshaper.org/ in amcharts it only load the last feature of the feature collection in geojson. :( – Sankha Karunasekara Jul 07 '20 at 22:26
@SankhaKarunasekara - Sounds like this warrants a new question instead of commenting on an older question. Note that this question and answer applies to v3, which doesn't natively support geojson and uses a workaround. v4 natively supports geojson but it sounds like there is an issue with your coordinates. – xorspark Jul 08 '20 at 00:55
@xorspark thank you. yes, I have the similar is with v4. – Sankha Karunasekara Jul 08 '20 at 04:52
@SankhaKarunasekara if you need help with v4, post a new question and tag it with `amcharts4`. – xorspark Jul 09 '20 at 01:23

GeoJson amchart maps what is wrong with geoJson?

1 Answers1