Published
Edited
Dec 14, 2020
1 fork
Importers
1 star
Insert cell
Insert cell
Insert cell
L = {
const L = (window.L = await require('leaflet@1.2.0'));
await require('leaflet.markercluster');
const leafletCSS = await require.resolve("leaflet@1/dist/leaflet.css");
const leafletDefaultExtent = await require.resolve('leaflet.defaultextent/dist/leaflet.defaultextent.css');
const markerclusterCSS = await require.resolve('leaflet.markercluster@1.4.1/dist/MarkerCluster.css');
const markerclusterCSSdefault = await require.resolve('leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css');
document.head.appendChild(L._style = html`<link href=${leafletCSS} rel=stylesheet>`);
document.head.appendChild(L._style = html`<link href=${leafletDefaultExtent} rel=stylesheet>`);
document.head.appendChild(L._style = html`<link href=${markerclusterCSS} rel=stylesheet>`);
document.head.appendChild(L._style = html`<link href=${markerclusterCSSdefault} rel=stylesheet>`);
return L;
}
Insert cell
omnivore = require('https://bundle.run/leaflet-omnivore@0.3.4')
Insert cell
d3 = require('d3-fetch')
Insert cell
Insert cell
md`## map layer`
Insert cell
data = d3.csv(
'https://static.observableusercontent.com/files/5164adbfa163cd9425c7c8f415af2f064af821bc1c618516f58d956b2c6a6ea30033800e9bda37ba92e7f860b5bc613f03c4c0c638df5e83664d776b5cdc3737?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27phillyartistcensus.csv'
)
Insert cell
map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container, { maxZoom: 13, minZoom: 11 }).setView(
[39.952, -75.164],
11
);
L.tileLayer(
"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png",
{
attribution:
"| &copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
}
).addTo(map);

const clusterParams = {
showCoverageOnHover: false,
spiderLegPolylineOptions: { weight: 0 },
spiderfyOnMaxZoom: false,
zoomToBoundsOnClick: false,
iconCreateFunction: d =>
new L.DivIcon({
html: '<div><span>' + d.getChildCount() + '</span></div>',
className: 'marker-cluster marker-cluster-' +
((d.getChildCount() > 100) ? "large" : ((d.getChildCount() > 50) ? "medium" : "small")),
iconSize: new L.Point(d.getChildCount() * .6, d.getChildCount() * .6)
})
};

let markers = L.markerClusterGroup(clusterParams);
data.forEach(function(d) {
let m = L.circle(new L.LatLng(d['Latitude'], d['Longitude']));
markers.addLayer(m);
});
map.addLayer(markers);
}
Insert cell

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.
Learn more