Highcharts Demo

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

by Naveen Ravichandran

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/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="container"></div>

CSS

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

JavaScript

// Initiate the chart
Highcharts.mapChart('container', {

    title: {
        text: 'Highmaps basic lat/lon demo'
    },

    mapNavigation: {
        enabled: true
    },

    tooltip: {
        headerFormat: '',
        pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
    },

    series: [{
	"type": "map",
	mapData: Highcharts.maps['countries/us/us-all'],
	"joinBy": ["hc-a2", "code"],
	"animation": {
		"duration": 1000
	},
	"allowPointSelect": true,
	"name": "Revenue",
	"map_name": "UNITED STATES OF AMERICA",
}, {
        // Specify points using lat/lon
        type: 'mappoint',
        name: 'Cities',
        color: Highcharts.getOptions().colors[1],
        data: [{
	"color": false,
	"value": -1.7,
	"z": -1.7,
	"z_bubble": false,
	"opacity": 0.7,
	"code": "30.435557430000, -87.691687560000",
	"lat": 30.43555743,
	"lon": -87.69168756,
	"name": "30.435557430000, -87.691687560000",
	"data": "30.435557430000, -87.691687560000",
	"data_attr": "30.435557430000:-87.691687560000",
	"drilldown": false,
	"dimension_name": "@3VBXMAPDS@F0008, @3VBXMAPDS@F0009",
	"lat_dimension_name": "@3VBXMAPDS@F0008",
	"lon_dimension_name": "@3VBXMAPDS@F0009",
	"display_dimension_name": false,
	"base_dimension_name": "@3VBXMAPDS@F0008, Longitude",
	"measure_name": "Revenue",
	"measure_scaling_factor": 0,
	"lat_dimension_key": "30.435557430000",
	"lat_dimension_text": "30.435557430000",
	"lon_dimension_key": "-87.691687560000",
	"lon_dimension_text": "-87.691687560000",
	"events": {}
}]
    }]
});