Highcharts Demo

author(s): Torstein Hønsi

by kzoon

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<div id="container"></div>
<textarea id="geojson" placeholder="Paste your GeoJSO{
"type": "FeatureCollection",
"name": "nlXXXX",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::32631" } },
"features": [
{ "type": "Feature", "properties": { "id": "NL.NN", "hc-group": "admin1", "hc-middle-x": 0.64, "hc-middle-y": 0.47, "hc-key": "nl-nn", "hc-a2": "NN", "labelrank": "7", "hasc": "NL.GR", "alt-name": "Groninga|Groningue", "woe-id": "2346376", "subregion": null, "fips": "NL04", "postal-code": "GR", "name": "Groningen", "country": "Netherlands", "type-en": "Province", "region": null, "longitude": "6.73067", "woe-name": "Groningen", "latitude": "53.279", "woe-label": "Groningen, NL, Netherlands", "type": "Provincie" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 6068.0, 9851.0 ], [ 6197.0, 9802.0 ], [ 6167.0, 9772.0 ], [ 6084.0, 9795.0 ], [ 6042.0, 9819.0 ], [ 6037.0, 9844.0 ], [ 6068.0, 9851.0 ] ] ], [ [ [ 5442.0, 7109.0 ], [ 5346.0, 7066.0 ], [ 5264.0, 7047.0 ], [ 5221.0, 6975.0 ], [ 5129.0, 6978.0 ], [ 5067.0, 7040.0 ], [ 4987.0, 7019.0 ], [ 4935.0, 6946.0 ], [ 4867.0, 6902.0 ], [ 4771.0, 6905.0 ], [ 4733.0, 6932.0 ], [ 4648.0, 6885.0 ], [ 4623.0, 6943.0 ], [ 4539.0, 7015.0 ], [ 4483.0, 7005.0 ], [ 4468.0, 7026.0 ], [ 4297.0, 7069.0 ], [ 4224.0, 7050.0 ], [ 4151.0, 7000.0 ], [ 4077.0, 7001.0 ], [ 3992.0, 7042.0 ], [ 3844.0, 7042.0 ], [ 3770.0, 7059.0 ], [ 3670.0, 7137.0 ], [ 3661.0, 7201.0 ], [ 3709.0, 7264.0 ], [ 3766.0, 7317.0 ], [ 3733.0, 7377.0 ], [ 3770.0, 7422.0 ], [ 3777.0, 7484.0 ], [ 3766.0, 7546.0 ], [ 3742.0, 7588.0 ], [ 3755.0, 7684.0 ], [ 3744.0, 7731.0 ], [ 3721.0, 7745.0 ], [ 3680.0, 7818.0 ], [ 3652.0, 7900.0 ], [ 3460.0, 7769.0 ], [ 3235.0, 7557.0 ], [ 3220.0, 7609.0 ], [ 3214.0, 7625.0 ], [ 3439.0, 7839.0 ], [ 3513.0, 7918.0 ], [ 3619.0, 7947.0 ], [ 3665.0, 7979.0 ], [ 3710.0, 8076.0 ], [ 3764.0, 8340.0 ], [ 3807.0, 8459.0 ], [ 3885.0,...

CSS

#container {
	height: 600px; 
	width: 500px; 
	margin: 0 auto;    
    display: none;
}
.loading {
	margin-top: 10em;
	text-align: center;
	color: gray;
}

JavaScript

$('#run').click(function () {     
    var geojson = $.parseJSON($('#geojson').val());
    
    // Initiate the chart
    $('#container').slideDown().highcharts('Map', {
        series: [{
            mapData: geojson
        }]
    });    
});