amChart heat Location-sensitive map

Question

I'm trying to implement this demo in my app but I get whole map black regardless of values. here is my code:

var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "light",
"colorSteps": 10,
"dataProvider": {
  "mapURL": "https://www.amcharts.com//lib/3/maps/svg/iranLow.svg",
  "getAreasFromMap": true,
  "zoomLevel": 0.9,
  "areas": []
},
"areasSettings": {
  "autoZoom": true,
  "balloonText": "[[title]]: <strong>[[value]]</strong>"
},
"valueLegend": {
  "right": 10,
  "minValue": "little",
  "maxValue": "a lot!"
},
"zoomControl": {
  "minZoomLevel": 0.9
},
"titles": 'titles',
"listeners": [ {
  "event": "init",
  "method": updateHeatmap
} ]
} );


function updateHeatmap( event ) {
var map = event.chart;
if ( map.dataGenerated )
  return;
if ( map.dataProvider.areas.length === 0 ) {
  setTimeout( updateHeatmap, 100 );
  return;
}
for ( var i = 0; i < map.dataProvider.areas.length; i++ ) {
  map.dataProvider.areas[ i ].value = Math.round( Math.random() * 10000 );
}
map.dataGenerated = true;
map.validateNow();
}

is there anything else that I should do in order to get color range based on values?

Answer 1

You're likely running into cross origin issues when using the SVG on AmCharts' site as your source when running your code locally (especially if your local environment is http - the include is https).

Ideally you should be using the map JavaScript instead of the SVG file. Try including the iranLow.js map javascript file and use map: "iranLow" instead of mapURL: 'path/to/svg'.

iranLow.js include (after ammap.js):

<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/iranLow.js"></script>

Modified dataprovider definition

"dataProvider": {
  "map": "iranLow",
  "getAreasFromMap": true,
  "zoomLevel": 0.9,
  "areas": []
},

Demo below:

var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "light",
"colorSteps": 10,
"dataProvider": {
  "map": "iranLow",
  "getAreasFromMap": true,
  "zoomLevel": 0.9,
  "areas": []
},
"areasSettings": {
  "autoZoom": true,
  "balloonText": "[[title]]: <strong>[[value]]</strong>"
},
"valueLegend": {
  "right": 10,
  "minValue": "little",
  "maxValue": "a lot!"
},
"zoomControl": {
  "minZoomLevel": 0.9
},
"titles": 'titles',
"listeners": [ {
  "event": "init",
  "method": updateHeatmap
} ]
} );


function updateHeatmap( event ) {
var map = event.chart;
if ( map.dataGenerated )
  return;
if ( map.dataProvider.areas.length === 0 ) {
  setTimeout( updateHeatmap, 100 );
  return;
}
for ( var i = 0; i < map.dataProvider.areas.length; i++ ) {
  map.dataProvider.areas[ i ].value = Math.round( Math.random() * 10000 );
}
map.dataGenerated = true;
map.validateNow();
}

#chartdiv {
  width: 100%;
  height: 300px;
}

<script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/iranLow.js"></script>
<div id="chartdiv"></div>