• Open in:

Location-sensitive map

This demo uses proprietary web service (based on MaxMind’s IP data base) to determine location of the visitor and serve appropriate heat map.

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}																													
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

<!-- Chart code -->
<script>
/**
 * 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
 */
jQuery.getJSON( "https://services.amcharts.com/ip/?v=xz6Z", function( geo ) {

  var defaultMap = "usaLow";
  var countryMaps = {
    "AF": [ "afghanistanLow" ],
    "AL": [ "albaniaLow" ],
    "DZ": [ "algeriaLow" ],
    "AD": [ "andorraLow" ],
    "AO": [ "angolaLow" ],
    "AR": [ "argentinaLow" ],
    "AM": [ "armeniaLow" ],
    "AU": [ "australiaLow" ],
    "AT": [ "austriaLow" ],
    "AZ": [ "azerbaijanLow" ],
    "BS": [ "bahamasLow" ],
    "BH": [ "bahrainLow" ],
    "BD": [ "bangladeshLow" ],
    "BY": [ "belarusLow" ],
    "BE": [ "belgiumLow" ],
    "BZ": [ "belizeLow" ],
    "BT": [ "bhutanLow" ],
    "BO": [ "boliviaLow" ],
    "BA": [ "bosniaHerzegovinaCantonsLow" ],
    "BW": [ "botswanaLow" ],
    "BR": [ "brazilLow" ],
    "BN": [ "bruneiDarussalamLow" ],
    "BG": [ "bulgariaLow" ],
    "BF": [ "burkinaFasoLow" ],
    "BI": [ "burundiLow" ],
    "KH": [ "cambodiaLow" ],
    "CM": [ "cameroonLow" ],
    "CA": [ "canadaLow" ],
    "CV": [ "capeVerdeLow" ],
    "CF": [ "centralAfricanRepublicLow" ],
    "TD": [ "chadLow" ],
    "CL": [ "chileLow" ],
    "CN": [ "chinaLow" ],
    "CO": [ "colombiaLow" ],
    "CD": [ "congoDRLow" ],
    "CG": [ "congoLow" ],
    "CR": [ "costaRicaLow" ],
    "HR": [ "croatiaLow" ],
    "CU": [ "cubaLow" ],
    "CY": [ "cyprusLow" ],
    "UN": [ "cyprusNorthernCyprusLow" ],
    "GB": [ "unitedKingdomLow" ],
    "CZ": [ "czechRepublicLow" ],
    "DK": [ "denmarkLow" ],
    "DJ": [ "djiboutiLow" ],
    "DO": [ "dominicanRepublicLow" ],
    "EC": [ "ecuadorLow" ],
    "EG": [ "egyptLow" ],
    "SV": [ "elSalvadorLow" ],
    "EE": [ "estoniaLow" ],
    "FI": [ "finlandLow" ],
    "FR": [ "france2016Low" ],
    "GE": [ "georgiaLow" ],
    "DE": [ "germanyLow" ],
    "GR": [ "greeceLow" ],
    "GT": [ "guatemalaLow" ],
    "GN": [ "guineaLow" ],
    "GY": [ "guyanaLow" ],
    "HT": [ "haitiLow" ],
    "HN": [ "hondurasLow" ],
    "HK": [ "hongKongLow" ],
    "HU": [ "hungaryLow" ],
    "GL": [ "icelandLow" ],
    "IS": [ "icelandLow" ],
    "IN": [ "indiaLow" ],
    "ID": [ "indonesiaLow" ],
    "MY": [ "malaysiaLow" ],
    "IR": [ "iranLow" ],
    "IQ": [ "iraqLow" ],
    "IE": [ "irelandLow" ],
    "IL": [ "israelLow" ],
    "PS": [ "palestineLow" ],
    "VA": [ "italyLow" ],
    "SM": [ "sanMarinoLow" ],
    "MT": [ "italyLow" ],
    "IT": [ "italyLow" ],
    "JM": [ "jamaicaLow" ],
    "JP": [ "japanLow" ],
    "KZ": [ "kazakhstanLow" ],
    "KE": [ "kenyaLow" ],
    "XK": [ "kosovoLow" ],
    "KG": [ "kyrgyzstanLow" ],
    "LA": [ "laosLow" ],
    "LV": [ "latviaLow" ],
    "LT": [ "lithuaniaLow" ],
    "LU": [ "luxembourgLow" ],
    "MK": [ "macedoniaLow" ],
    "ML": [ "maliLow" ],
    "MX": [ "mexicoLow" ],
    "MD": [ "moldovaLow" ],
    "MN": [ "mongoliaLow" ],
    "ME": [ "montenegroLow" ],
    "MA": [ "moroccoLow" ],
    "MM": [ "myanmarLow" ],
    "NP": [ "nepalLow" ],
    "NL": [ "netherlandsLow" ],
    "NZ": [ "newZealandLow" ],
    "NI": [ "nicaraguaLow" ],
    "NG": [ "nigeriaLow" ],
    "NO": [ "norwayLow" ],
    "AE": [ "unitedArabEmiratesLow" ],
    "OM": [ "omanLow" ],
    "PK": [ "pakistanLow" ],
    "PA": [ "panamaLow" ],
    "PY": [ "paraguayLow" ],
    "PE": [ "peruLow" ],
    "PH": [ "philippinesLow" ],
    "PL": [ "polandLow" ],
    "PT": [ "portugalLow" ],
    "PR": [ "puertoRicoLow" ],
    "US": [ "usaLow" ],
    "QA": [ "qatarLow" ],
    "RO": [ "romaniaLow" ],
    "RW": [ "rwandaLow" ],
    "SA": [ "saudiArabiaLow" ],
    "RS": [ "serbiaLow" ],
    "SG": [ "singaporeLow" ],
    "SK": [ "slovakiaLow" ],
    "SI": [ "sloveniaLow" ],
    "LS": [ "southAfricaLow" ],
    "ZA": [ "southAfricaLow" ],
    "KR": [ "southKoreaLow" ],
    "ES": [ "spainLow" ],
    "LK": [ "sriLankaLow" ],
    "SR": [ "surinameLow" ],
    "SE": [ "swedenLow" ],
    "CH": [ "switzerlandLow" ],
    "SY": [ "syriaLow" ],
    "TW": [ "taiwanLow" ],
    "TJ": [ "tajikistanLow" ],
    "TH": [ "thailandLow" ],
    "TR": [ "turkeyLow" ],
    "UG": [ "ugandaLow" ],
    "UA": [ "ukraineLow" ],
    "GG": [ "unitedKingdomLow" ],
    "JE": [ "unitedKingdomLow" ],
    "IM": [ "unitedKingdomLow" ],
    "UY": [ "uruguayLow" ],
    "UZ": [ "uzbekistanLow" ],
    "VE": [ "venezuelaLow" ],
    "VN": [ "vietnamLow" ],
    "YE": [ "yemenLow" ]
  };

  // calculate which map to be used
  var currentMap = defaultMap;
  var titles = [];
  if ( countryMaps[ geo.country_code ] !== undefined ) {
    currentMap = countryMaps[ geo.country_code ][ 0 ];

    // add country title
    if ( geo.country_name ) {
      titles.push( {
        "text": geo.country_name
      } );
    }

  }

  var map = AmCharts.makeChart( "chartdiv", {
    "type": "map",
    "theme": "none",
    "colorSteps": 10,
    "dataProvider": {
      "mapURL": "/lib/3/maps/svg/" + currentMap + ".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();
  }
} );
</script>

<!-- HTML -->
<div id="chartdiv"></div>