Map overlay

by oysteinmoseng

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/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>

<div id="container"></div>

CSS

#container {
    height: 400px;
    min-width: 320px;
    max-width: 800px;
    margin: 0 auto;
}

.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

;(async () => {
  const usa = await fetch(
    "https://code.highcharts.com/mapdata/countries/us/us-all.topo.json",
  ).then((response) => response.json())

  Highcharts.mapChart("container", {
    title: {
      text: "US hurricane map",
    },

    legend: {
      align: "right",
      layout: "vertical",
      verticalAlign: "bottom",
    },
    
    mapNavigation: {
    	enabled: true
    },

    series: [
      // Base
      {
        name: "Base map",
        nullColor: "#acb",
        legendSymbolColor: "#acb",
        borderColor: "#888",
        mapData: usa,
      },
      // Coastline
      {
        name: "Coastline",
        type: "mapline",
        lineWidth: 6,
        color: "#d22",
        legendSymbolColor: "#d22",
        data: [
          {
            geometry: {
              type: "LineString",
              coordinates: [
                [-88.57, 30.34],
                [-87.18, 30.37],
                [-85.65, 30.12],
              ],
            },
          },
        ],
      },
      // Markers
      {
        name: "Markers",
        type: "mappoint",
        color: "#000",
        marker: {
          symbol: "mapmarker",
          radius: 6
        },
        dataLabels: {
          format: "{point.name}",
        },
        keys: ["name", "lat", "lon"],
        data: [
          ["Tues 10:00am", 24.34, -87.57],
          ["H", 28.0, -88.07],
        ],
      },
      // Cone
      {
        name: "Cone of uncertainty",
        type: "map",
		color: '#ffafafa7',
        borderColor: '#f88',
        dashStyle: 'dot',
        data: [
          {
          	// SVG path - using absolute SVG coordinate values (not lat/lon).
            /* 
            	You can also define map data here, using GeoJSON or TopoJSON,
                which will let you use lat/lon coordinates. Beware that you also
                then need to deal with map projections. GeoJSON must be
                preprojected, while with TopoJSON you (probably) should...