Advanced lat/long

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

by romanych

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/data.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/fi/fi-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

var H = Highcharts,
    map = H.maps['countries/fi/fi-all'],
    chart;


    var data = [{
  name: '85630',
  lat: 63.93199017852372,
  lon: 25.041405693723014
}];
    

    chart = Highcharts.mapChart('container', {
        title: {
            text: 'Mastercard data explorer'
        },

        tooltip: {
            pointFormat: '{point.name}<br>' +
                'Lat: {point.lat}<br>' +
                'Lon: {point.lon}<br>'
        },


        series: [{
            name: 'Basemap',
            mapData: map,
            borderColor: '#606060',
            nullColor: 'rgba(200, 200, 200, 0.2)',
            showInLegend: false
        }, {
            name: 'Separators',
            type: 'mapline',
            data: H.geojson(map, 'mapline'),
            color: '#101010',
            enableMouseTracking: false,
            showInLegend: false
        }, {
            type: 'mappoint',
            dataLabels: {
                enabled: true,
                format: '{point.capital}'
            },
            name: "Postcodes",
            showInLegend: false,
            data: data,
            maxSize: '12%',
            //color: H.getOptions().colors[0]
        }]
    });