JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="https://maximeh.github.io/leaflet.bouncemarker/bouncemarker.js"></script>
<div id="map" style="width: 400px; height: 400px;"></div>
JavaScript
var map = L.map('map', {
center: new L.LatLng(54, -2),
zoom: 6
});
var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/openplans.map-g4j0dszr/{z}/{x}/{y}.png', {
attribution: 'Map tiles © Development Seed and OpenStreetMap',
});
map.addLayer(mapbox);
var smallPoints = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-1.856689453125,
53.14677033085084
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-2.30712890625,
52.63639665997182
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-0.6042480468749999,
52.78283114251513
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-0.81298828125,
53.64463782485651
]
}
}
]
}
var largePoints = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-1.3842773437499998,
52.46939684276205
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-3.2958984375,
55.34164183013326
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-3.80126953125,
56.68037378950137
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
...