JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<div id="container"></div>
JavaScript
$(function () {
// Prepare random data
var data = [
{
"code": "05001",
"value": 728
},
{
"code": "05266",
"value": 710
},
{
"code": "05480",
"value": 963
},
{
"code": "05002",
"value": 541
},
{
"code": "05004",
"value": 622
},
{
"code": "05021",
"value": 866
},
{
"code": "05030",
"value": 398
},
{
"code": "05031",
"value": 785
},
{
"code": "05034",
"value": 223
},
{
"code": "05036",
"value": 605
},
{
"code": "05038",
"value": 361
},
{
"code": "05040",
"value": 237
},
{
"code": "05042",
"value": 157
},
{
"code": "05044",
"value": 134
},
{
"code": "05045",
"value": 136
},
{
"code": "05051",
"value": 704
}
];
$.getJSON('https://www.googledrive.com/host/0B606AWIP1OG4RFdoTjJIdnNWdDg', function (geojson) {
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'GeoJSON in Highmaps'
},
tooltip: {
pointFormat: '<b>{point.properties.MPIO_CNMBR}:</b> {point.value}'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
},
series : [{
data : data,
mapData: geojson,
joinBy:...