JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Leaflet Demo</title>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<link href='https://unpkg.com/leaflet@1.3.4/dist/leaflet.css' rel='stylesheet' />
<link href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://raw.githubusercontent.com/akq/Leaflet.DonutCluster/master/src/Leaflet.DonutCluster.js',
true);
xhr.onreadystatechange = function () { //Call a function when the state changes.
if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
eval(this.responseText);
var markers = L.DonutCluster({
chunkedLoading: true
}, {
key: 'title',
sumField: 'value'
, order:['A', 'B', 'C', 'D']
, title: {A:'T1', B:'T2', C:'T3', D:'T4'}
, arcColorDict: {
A: 'red',
B: 'blue',
C: 'yellow',
D: 'black'
}
})
// var markers = L.markerClusterGroup();
var points = mockPoints(2000);
for (var i = 0; i < points.length; i++) {
var a =...