Map point with lat/long

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

by Vignesh Gopalakrishnan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-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": {
    "map": "countries/in/in-all"
  },
  "title": {
    "text": "Covid 19 Status"
  },
  "exporting": {},
  "mapNavigation": {
    "enabled": true
  },
  "series": [{
    "name": "Basemap",
    "borderColor": "red",
    "nullColor": "rgba(200, 200, 200, 0.3)",
    "showInLegend": false
  }, {
    "name": "Separators",
    "type": "mapline",
    "nullColor": "#707070",
    "showInLegend": false,
    "enableMouseTracking": false
  }, {
    "type": "mappoint",
    "name": "Cities",
    "color": "#434348",
    "data": [{
      "name": "Chennai",
      "lat": 13.08268,
      "lon": 80.270721
    }, {
      "name": "Mumbai",
      "lat": 19.075983,
      "lon": 72.877655
    }, {
      "name": "Delhi",
      "lat": 28.70406,
      "lon": 77.102493
    }, {
      "name": "Kolkata",
      "lat": 22.695574,
      "lon": 88.363245
    }, {
      "name": "Kanyakumari",
      "lat": 8.083895,
      "lon": 77.547845,
      "dataLabels": {
        "align": "left",
        "x": 5,
        "verticalAlign": "middle"
      }
    }]
  }],
  "tooltip": {
    "enabled": true,
    "backgroundColor": "#333333",
    "borderWidth": 0,
    "padding": 20,
    "style": {
      "color": "#C8C8C8"
    }
  }
});