Published
Edited
Nov 27, 2020
Importers
1 star
Also listed in…
Clustering
viewof showGrid = checkbox({
title: "showGrid",
options: [""],
value: "showGrid",
description: "Draws the grid<br/> structure on the map,<br/> default: true"
})
viewof showCells = checkbox({
title: "showCells",
options: [""],
value: "showCells",
description:
"Color coded cells will be used<br/> as cluster symbolizations,<br/> default: true"
})
viewof showCentroids = checkbox({
title: "showCentroids",
options: [""],
value: "showCentroids",
description:
"Label the amount of features<br/> contained by each cluster,<br/> default: true"
})
viewof weightedCentroids = checkbox({
title: "weightedCentroids",
options: [""],
description:
"determines the position of<br/> the labels within each cell,<br/> default: false"
})
viewof zoomToCell = checkbox({
title: "zoomToCell",
options: [""],
value: "zoomToCell",
description: "default: true"
})
viewof symbolizationVariable = radio({
title: "symbolizationVariable",
options: ['value', "size"],
value: "value",
description:
"Style the cluster markers using color<br/> values or marker size, default: 'value'"
})
viewof gridSize = slider({
min: .01,
max: 20,
precision: 2,
value: 1,
title: "gridSize",
description: "the initial size of the cells, <b>required</b>, default: 1"
})
viewof minFeaturesToCluster = slider({
min: 1,
max: 20,
step: 1,
value: 2,
title: "minFeaturesToCluster",
description:
"any amount of features below this will be<br> represented using the default symbolization<br> (e.g. marker), default: 2"
})
viewof zoomFactor = slider({
min: .01,
max: 10,
precision: 1,
value: 2,
title: "zoomFactor",
description:
"the factor by which the grid<br/> will be adjusted on zoom, default: 2"
})
viewof maxZoom = slider({
min: 1,
max: 20,
step: 1,
value: 16,
title: "maxZoom",
description:
"until which zoom level should the clustering<br> be done, default: 16"
})
markers = points.map(createMarker)
createMarker = ({ value: { label }, localisation: { lat, lng } }) =>
new L.CircleMarker([lat, lng], {
fillColor: "blue",
color: "black",
weight: 1,
radius: 5
})
gridCluster = {
const gridCluster = require('https://cdn.jsdelivr.net/gh/andy-kay/Leaflet.GridCluster/dist/Leaflet.gridCluster.min.js').catch(
() => L.gridCluster
);
if (!gridCluster._style) {
const href = await require.resolve(
"https://cdn.jsdelivr.net/gh/andy-kay/Leaflet.GridCluster/dist/Leaflet.gridCluster.css"
);
document.head.appendChild(
(gridCluster._style = html`<link href=${href} rel=stylesheet>`)
);
}
return gridCluster;
}
createMap = function(L) {
const container = html`<div style="height:500px;">`;
const map = L.map(container).setView([46.99758, 2.81834], 5);
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png",
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
maxZoom: 19
}
).addTo(map);
container.value = map;
return container;
}
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.
