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/geodata/indiaLow.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

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

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

window.onload = function() {

/**
 * This demo uses our own method of determining user's location
 * It is not public web service that you can use
 * You'll need to find your own. We recommend http://www.maxmind.com
 */
  // Create map instance
  var chart = am4core.create("chartdiv", am4maps.MapChart);
  
  chart.titles.create().text = "Title";

  // Set map definition
  chart.geodata = am4geodata_indiaLow;
  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...