Published
Edited
Nov 27, 2020
Importers
2 stars
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
// );
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
