Finland - Highmaps

Highmaps demo

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/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 data = [{
  name: '85630',
  lat: 63.93199017852372,
  lon: 25.041405693723014
}];

// Create the chart
Highcharts.mapChart('container', {
    chart: {
        map: 'countries/fi/fi-all'
    },

    title: {
        text: 'Highmaps basic demo'
    },

    subtitle: {
        text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/fi/fi-all.js">Finland</a>'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        min: 0
    },

    series: [{
    type: 'mappoint',
        data: data,
        name: 'Postcodes',
        
        dataLabels: {
            enabled: true,
            useHTML: true,
            format: `
            	{point.name}: {point.postcode}
            	<div>
              	{point.extras}
              </div>
            `
        }
    }]
});