Published
Edited
Nov 27, 2020
Importers
2 stars
Hello Leaflet.MarkerClusterHello PruneClusterHello Leaflet.GridClusterHello Leaflet.RegularGridClusterHello q-clusterHello EasyPZ
Hello Overlapping Marker Spiderfier for Leaflet
html`<div class=inputs>${viewof legWeight}${viewof legColorUsual}${viewof legColorHighlighted}`
viewof keepSpiderfied = checkbox({
title: "keepSpiderfied",
options: ["yes"],
description: `don't unspiderfy when a marker is selected,<br/>
default: false`
})
viewof nearbyDistance = slider({
min: 5,
max: 200,
step: 1,
value: 20,
title: "nearbyDistance",
description:
"spiderfy markers within this range of the one clicked,<br/>default: 20",
format: v => `${v}px`
})
viewof circleSpiralSwitchover = slider({
min: 0,
max: 200,
step: 1,
value: 9,
title: "circleSpiralSwitchover",
description: `show spiral instead of circle from this marker count upwards,<br/>
0 -> always spiral; Infinity -> always circle,<br/>
default: 9`
})
viewof circleFootSeparation = slider({
min: 1,
max: 200,
step: 1,
value: 25,
title: "circleFootSeparation",
description: "related to circumference of circle,<br/>defaults to 25"
})
viewof circleStartAngle = slider({
min: 0,
max: Math.PI,
value: Math.PI / 6,
title: "circleStartAngle",
description: "default: Math.PI/6"
})
viewof spiralFootSeparation = slider({
min: 1,
max: 200,
step: 1,
value: 28,
title: "spiralFootSeparation (experiment!),",
description: "related to size of spiral, default: 28"
})
viewof spiralLengthStart = slider({
min: 1,
max: 200,
step: 1,
value: 11,
title: "spiralLengthStart",
description: "ditto, default: 11"
})
viewof spiralLengthFactor = slider({
min: 1,
max: 200,
step: 1,
value: 5,
title: "spiralLengthFactor",
description: "ditto, default: 5"
})
viewof legWeight = slider({
min: 0.5,
max: 20,
step: .5,
value: 1.5,
title: "legWeight",
description: "default: 1.5"
})
viewof legColorUsual = color({
value: '#222222',
title: "Usual",
description: "legColors usual, default: <code>'#222222'</code>"
})
viewof legColorHighlighted = color({
value: '#ff0000',
title: "Highlighted",
description: "legColors Highlighted, default: <code>'#ff0000'</code>"
})
OverlappingMarkerSpiderfier = {
L; // requires leaflet :)
return require('https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js').catch(
() => window.OverlappingMarkerSpiderfier
);
// npm package also works but is a port by another person
// return require('overlapping-marker-spiderfier-leaflet@0.2.6').catch(
// () => window.OverlappingMarkerSpiderfier
// );
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.