Map point with lat/long

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

    chart: {
        
    },

    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',
        mapData: Highcharts.maps['custom/world'],
        borderColor: '#A0A0A0',
        nullColor: 'rgba(200, 200, 200, 0.3)',
        showInLegend: false
    },{
        // Specify points using lat/lon
        type: 'mappoint',
        name: 'Cities',
         marker:{
            	radius: 10,
              lineColor:'red',
              fillOpacity: 1,
               lineWidth: 0,
						  states: {
                hover: {
                  radius: 10,
                  lineWidth: 0
                }
              }
            },
            color:'red',
        //mapData: Highcharts.maps['custom/world'],
        color: Highcharts.getOptions().colors[1],
        data: [
        {
        	lat:-20.348404,
          lon: 57.552151
        },
        {
            name: 'London',
            lat: 51.507222,
            lon: -0.1275
        }, 
         {
            ff: 'India',
            lat: 21.895589,
            lon: 79.694805
        },       
        {
            name: 'Birmingham',
            lat: 52.483056,
            lon: -1.893611
        }, {
            name: 'Leeds',
            lat: 53.799722,
            lon: -1.549167
        }, {
            name: 'Glasgow',
            lat: 55.858,
            lon: -4.259
        }, {
            name: 'Sheffield',
            lat: 53.383611,
            lon: -1.466944
        }, {
            name: 'Liverpool',
            lat: 53.4,
            lon: -3
        }, {
            name: 'Bristol',
            lat: 51.45,
            lon: -2.583333
        }, {
            name:...