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:
"| © <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);
}