Map markers

Europe map on globe

by amrutaJgtp

HTML

<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/maps/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <div class="highcharts-description">
        This demo uses a <code>mappoint</code> series with mapmarker symbols.
    </div>
</figure>

CSS

.highcharts-figure {
    min-width: 310px;
    max-width: 600px;
    margin: 0 auto;
}

.highcharts-description {
    margin: 1em 0;
}

#container {
    height: 500px;
}

JavaScript

(async () => {

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/custom/europe.topo.json'
    ).then(response => response.json());

    // Create the chart
    Highcharts.mapChart('container', {
        chart: {
            map: topology,
            margin: 1
        },

        title: {
            text: 'Categories of European capitals',
            floating: true,
            style: {
                textOutline: '5px contrast'
            }
        },

        subtitle: {
            text: 'Map markers in Highcharts',
            floating: true,
            y: 36,
            style: {
                textOutline: '5px contrast'
            }
        },

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

       mapView : {
                maxZoom: 30,
                projection: {
                    name: "Orthographic",
                    rotation: [60, -30]
                }
            },

        legend: {
            floating: true,
            backgroundColor: '#ffffffcc'
        },

        plotOptions: {
            mappoint: {
                keys: ['id', 'lat', 'lon', 'name', 'y'],
                marker: {
                    lineWidth: 1,
                    lineColor: '#000',
                    symbol: 'mapmarker',
                    color: 'yellow',
                    radius: 8
                },
                dataLabels: {
                    enabled: false
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="color:{point.color}">\u25CF</span> {point.key}<br/>',
            pointFormat: '{series.name}'
        },

        series: [{
            allAreas: true,
            name: 'Coastline',
            states: {
                inactive: {
                    opacity: 0.2
                }
            },
           ...