Map With Cities

by Amit Sinha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<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/in/in-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

$('#container').highcharts('Map', {
  title: {
    text: 'Map With Cities'
  },
  series: [{
    mapData: Highcharts.maps['countries/in/in-all']
  }, {
    type: 'mappoint',
    name: 'Cities',
    dataLabels: {
      enabled: true
    },
    data: [{
      name: 'New Delhi',
      lat: 28.7041,
      lon: 77.1025
    },{
      name: 'Norwalk CT',
      lat: 41.1177,
      lon: 73.4082
    },{
      name: 'Bengaluru',
      lat: 12.9716,
      lon: 77.5946
    }]
  }]
});