Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<div id='container' style="width: 800px; height: 600px"></div>

JavaScript

(async () => {

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

  Highcharts.mapChart('container', {
    chart: {
      map: topology,
      margin: 0,
      backgroundColor: '#fff'
    },

    title: {
      text: ''
    },

    tooltip: {
      headerFormat: '',
      pointFormat: '{point.name}',
      backgroundColor: '#333',
      borderColor: '#333',
      borderRadius: 0,
      shadow: false,
      shape: 'rect',
      padding: 8,
      style: {
        fontSize: '1em',
        fontWeight: 'normal',
        color: '#fff'
      },
    },

    legend: {
      enabled: false,
    },

    plotOptions: {
      mappoint: {
        allowPointSelect: true,
        marker: {
          fillColor: '#FFFFFF',
          lineWidth: 2,
          lineColor: Highcharts.getOptions().colors[1],
          states: {
            select: {
              fillColor: 'red',
              radius: 12,
            }
          }
        },
        dataLabels: {
          enabled: false
        }
      }
    },
    mapView: {
      projection: {
        name: 'WebMercator'
      },
      zoom: 5.1,
      center: [4, 52]
    },

    series: [{
      name: 'Basemap',
      borderColor: '#d3d3d3',
      borderWidth: 1,
      nullColor: '#fff',
    }, {
      type: 'mappoint',
      marker: {
        symbol: 'circ',
        radius: 6,
      },
      name: 'P',
      cursor: 'pointer',
      data: [{
        name: 'P1',
        lat: 49.214439,
        lon: -2.131250,
      }, {
        name: 'P2',
        lat: 51.4811,
        lon: -0.6248,
      }, {
        name: 'P3',
        lat: 50.7932,
        lon: -1.8843,
      }, {
        name: 'Winchcombe Place Care Home',
        lat: 51.4090,
        lon: -1.3215,
      }, {
        name: 'P4',
        lat: 53.9320,
        lon: -1.0694,
      }],
    }, {
      type: 'mappoint',
      marker: {
        symbol: 'circ',
        radius: 6,
      },
     ...