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:

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.

Answer 1

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.