Data geometry

author(s): Torstein Hønsi

by vegaelce

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/fr/fr-idf-all.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.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>

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

CSS

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

JavaScript

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]];

        // Initialize the chart
        Highcharts.mapChart('container', {
            chart: {                
            },

            title: {
                text: 'Map point and line geometry'
            },

           
            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",
                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
            }]
        });