Île-de-France - Highcharts Maps

Highcharts Maps demo

by Barbara Laird

HTML

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

(async () => {

  const topology = await fetch(
    'https://code.highcharts.com/mapdata/countries/fr/fr-idf-all.topo.json'
  ).then(response => response.json());

  // Prepare demo data. The data is joined to map using value of 'hc-key'
  // property by default. See API docs for 'joinBy' for more info on linking
  // data and map.
  var data = [
    ["fr-idf-se", 69699],
    ["fr-idf-hd", 14200],
    ["fr-idf-ss", 17301],
    ["fr-idf-vo", 14350],
    ["fr-idf-vm", 29728],
    ["fr-idf-vp", 28610],
    ["fr-idf-yv", 21667],
    ["fr-idf-es", 16494]
  ];

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

    title: {
      text: 'Highcharts Maps basic demo'
    },

    subtitle: {
      text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/fr/fr-idf-all.topo.json">Île-de-France</a>'
    },



    series: [{
      mapData: Highcharts.maps["countries/fr/fr-idf-all"],
      data: data,
      name: "States",
      borderColor: "#ffffff",
      joinBy: ["hc-key", "CODE_REGION"],
      keys: ["CODE_REGION", "value"]
    }, {
      type: 'mapline',
      data: [{
        geometry: {
          type: 'LineString',
          coordinates: [
            [2.34, 48.86], // Paris
            [2.40, 48.75] // Orly
          ]
        }
      }],
      showInLegend: true,
      lineWidth: 2,
      name: "Road",
      nullColor: '#f00',
      color: '#f00',
      enableMouseTracking: false
    }, {
      type: 'mappoint',
      color: '#333',
      name: "Towns",
      showInLegend: true,
      data: [{
        name: 'Paris',
        geometry: {
          type: 'Point',
          coordinates: [2.34, 48.86]
        }
      }, {
        name: 'Orly',
        geometry: {
          type: 'Point',
          coordinates: [2.40, 48.75]
        }
      }],
      enableMouseTracking: false
    }]
  });

})();