Highcharts Demo

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

by Geo George

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/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.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', {

  chart: {
    map: 'custom/world',
  },

  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: [{
    // Use the gb-all map with no data as a basemap
    name: 'Basemap',
    borderColor: '#A0A0A0',
    nullColor: 'rgba(200, 200, 200, 0.3)',
    showInLegend: false
  }, {
    name: 'Separators',
    type: 'mapline',
    nullColor: '#707070',
    showInLegend: false,
    enableMouseTracking: false
  }, {
    // Specify points using lat/lon
    type: 'mappoint',
    name: 'Cities',
    color: 'red',
    data: [{
      name: 'London',
      lat: 51.507222,
      lon: -0.1275,
      dataLabels: {
        align: 'right'
      }
    }, {
      name: 'Warsaw',
      lat: 52.237049,
      lon: 21,
      dataLabels: {
        align: 'left'
      }
    }, {
      name: 'New York',
      lat: 40.730610,
      lon: -73.935242
    },
     {
      name: 'Ernakulam',
      lat: 9.981010,
      lon: 76.318946
    }]
  }]
});