Advanced lat/long

author(s): Øystein Moseng Torstein Hønsi

by Sundarapandiyan_pa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>

<div id="container"></div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

var H = Highcharts,
    map = H.maps['countries/us/us-all'],
    chart;

// Add series with state capital bubbles
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/us-capitals.json', function (json) {
    var data = [];
    json.forEach(function (p) {
        p.z = p.population;        
        p.value = p.population;
        p.code = p.abbrev;
        data.push(p);
    });

    chart = Highcharts.mapChart('container', {
    		chart: {
            map: 'countries/us/us-all'
        },
        title: {
            text: 'Highmaps lat/lon demo'
        },
        mapNavigation: {
            enabled: true,
            enableDoubleClickZoomTo: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
				 colorAxis: {
            min: 1,
            type: 'logarithmic',
            minColor: '#fff',
            maxColor: '#000'},
        series: [
        {
            data: [
    {
        "value":1,
        "code": "NJ"
    },
    {
        "value":1,
        "code": "RI"
    },
    {
        "value":1,
        "code": "MA"
    },
    {
        "value":1,
        "code": "CT"
    },
    {
        "value":1,
        "code": "MD"
    },
    {
        "value":1,
        "code": "NY"
    },
    {
        "value":1,
        "code": "DE"
    },
    {
        "value":1,
        "code": "FL"
    },
    {
        "value":1,
        "code": "OH"
    },
    {
        "value":1,
        "code": "PA"
    },
    {
        "value":1,
        "code": "IL"
    },
    {
        "value":1,
        "code": "CA"
    },
    {
        "value":1,
        "code": "HI"
    },
    {
        "value":1,
        "code": "VA"
    },
    {
        "value":1,
        "code": "MI"
    },
    {
        "value":1,
        "code": "IN"
    },
    {
        "value":1,
        "code": "NC"
    },
    {
        "value":1,
        "code": "GA"
    },
    {
        "value":1,
        "code": "TN"
    },
    {
       ...