Amchart map from geojson, just show a rectangle

Question

My Output

This is my output, just a rectangle, not like a maps when I try it at geojson.io or mapshapper, and there is no error in my browser console..

My Geojson

I already use "id" inside features object, this is my sample geoJson :

{type: "FeatureCollection", features: Array(14)}
features: Array(14)

0:
geometry: {type: "Polygon", coordinates: Array(1)}
properties:{
id: 332112
kabupaten: "DEMAK"
kecamatan: "Bonang"
provinsi: "JAWA TENGAH"
__proto__: Object
type: "Feature"
__proto__: Object
}

1: {type: "Feature", geometry: {…}, properties: {…}}
2: {type: "Feature", geometry: {…}, properties: {…}}

AmChart Code

My vue js code to load amcharts map

import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
import robots from "./assets/demak"

export default {
  mounted() {
    let map = am4core.create("chartdiv", am4maps.MapChart)

    map.geodata = robots

    console.log(robots);


    map.projection = new am4maps.projections.Miller()
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
    polygonSeries.useGeodata = true

    var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.fill = am4core.color("#74B266");
polygonTemplate.tooltipText = "{KABUPATEN}";
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

// Add zoom control
map.zoomControl = new am4maps.ZoomControl();

  },
  beforeDestroy() {
    if (this.map) {
      this.map.dispose()
    }
  }
}

Any errors reported in your browser console? – Phil Jun 15 '20 at 03:02 — Phil, Jun 15 '20 at 03:02
there is no error in my browser console.. – Yusuf Yudhistira Jun 15 '20 at 03:15 — Yusuf Yudhistira, Jun 15 '20 at 03:15

score 0 · Accepted Answer · answered Dec 14 '20 at 15:58

The problem is mapshaper was rearranging your maps coordinates in the anti-clockwise direction and Amharts assume it arranged clockwise.
You can read the explanation and try python code to re-arrange it in:
https://www.wemcouncil.org/wp/how-to-make-mapshaper-output-compatible-with-amcharts4-using-python
it work for my case.

user21366484 · Answer 2 · 2023-03-17T15:58:44.637

For anyone else who runs up against this, I used this tool https://mygeodata.cloud/converter/shp-to-geojson and it was converted correctly from my ESRI shapefile the first time for AmCharts 5. Then I used mapshaper to simplify this output, worked great.

Edit: also found this tool because mygeodata is a paid solution. This one seems to be free and will not only reverse the coordinates of the geojson but will also check for any other errors (such as no "id" attribute).

Edit (again): Forgot the name of the site https://interactivegeomaps.com/geojson-tool/

Amchart map from geojson, just show a rectangle

2 Answers2