Location-sensitive map

This demo uses proprietary web service (based on <a href="https://www.maxmind.com/en/geoip2-services-and-databases">MaxMind's IP data base</a>) to determine location of the visitor and serve appropriate heat map. <h2>Dynamic map loading</h2> The chart can load maps in GeoJSON format dynamically using built-in loader. [amb href="https://www.amcharts.com/docs/v4/chart-types/map/#Loading_external_maps"]More about loading external maps[/amb]

by Rohit Bisht

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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

JavaScript

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

window.onload = function() {
  // Create map instance
  var chart = am4core.create("chartdiv", am4maps.MapChart);

  chart.titles.create().text = "asdas";

  // Set map definition
  chart.geodataSource.url = "https://www.amcharts.com/lib/4/geodata/json/indiaLow.json";
  chart.geodataSource.events.on("parseended", function(ev) {
    var data = [];
    for (var i = 0; i < ev.target.data.features.length; i++) {
      data.push({
        id: ev.target.data.features[i].id,
        value: Math.round(Math.random() * 10000)
      })
    }
    polygonSeries.data = data;
  })

  // Set projection
  chart.projection = new am4maps.projections.Mercator();

  // Create map polygon series
  var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

  //Set min/max fill color for each area
  polygonSeries.heatRules.push({
    property: "fill",
    target: polygonSeries.mapPolygons.template,
    min: chart.colors.getIndex(1).brighten(1),
    max: chart.colors.getIndex(1).brighten(-0.3)
  });

  // Make map load polygon data (state shapes and names) from GeoJSON
  polygonSeries.useGeodata = true;

  // Set up heat legend
  let heatLegend = chart.createChild(am4maps.HeatLegend);
  heatLegend.series = polygonSeries;
  heatLegend.align = "right";
  heatLegend.width = am4core.percent(25);
  heatLegend.marginRight = am4core.percent(4);
  heatLegend.minValue = 0;
  heatLegend.maxValue = 40000000;
  heatLegend.valign = "bottom";

  // Set up custom heat map legend labels using axis ranges
  var minRange = heatLegend.valueAxis.axisRanges.create();
  minRange.value = heatLegend.minValue;
  minRange.label.text = "Little";
  var maxRange = heatLegend.valueAxis.axisRanges.create();
  maxRange.value = heatLegend.maxValue;
  maxRange.label.text = "A lot!";

  // Blank out internal heat legend value axis labels
  heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function(labelText) {
    return "";
...