Highmaps with markers

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

by Geo George

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.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="http://code.highcharts.com/mapdata/custom/world.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

var H = Highcharts,
    map = H.maps['custom/world'],
    chart;

// Add series with state capital bubbles
$.getJSON('https://raw.githubusercontent.com/Menighin/HighmapsExperiment/master/geo/brazil-meso-hc.js', function (json) {
		//map = json;
    chart = Highcharts.mapChart('container', {
        title: {
            text: 'Highmaps lat/lon demo'
        },

        tooltip: {
            pointFormat: '{point.capital}, {point.parentState}<br>' +
                'Lat: {point.lat}<br>' +
                'Lon: {point.lon}<br>' +
                'Population: {point.population}'
        },

        xAxis: {
            crosshair: {
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }
        },

        yAxis: {
            crosshair: {
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }
        },

        series: [{
            name: 'Basemap',
            mapData: map,
            borderColor: '#606060',
            nullColor: 'rgba(200, 200, 200, 0.2)',
            showInLegend: false, 
        datalabels:{
        	enabled: false
        },
        },
                 {
                   // Specify points using lat/lon
                   type: 'mappoint',
                   name: 'Cities',
                   color: 'red',
                   data: [{
                     name: 'Belo Horizonte',
                     lat: -19.912998,
                     lon: -43.940933,
                      marker: {
            			symbol:'url(https://www.highcharts.com/samples/graphics/sun.png)'
        							},
                       dataLabels: {
                enabled: false
            }
                   }]
                 }]
    });
});