L = require('leaflet')
leafletCSS = html`<link href='${resolve('leaflet/dist/leaflet.css')}' rel='stylesheet' />`
defaultextentCSS = html`<link href='${resolve('leaflet.defaultextent/dist/leaflet.defaultextent.css')}' rel='stylesheet' />`
markercluster = require('leaflet.markercluster')
md`## Customization
**WARNING:** Any customization will cause the map to reload.`
map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container, {
center: [43.696202, -79.383461],
zoom: 11,
defaultExtentControl: true
});
var CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | © <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 20
}).addTo(map);
var overlays = {
"Heatmap": heatLayer,
"School Locations": schoolsLayer,
};
L.control.layers({},overlays).addTo(map);
L.control.scale().addTo(map);
schoolsLayer.addTo(map);
}
schools_data = (await fetch(url)).json()
markerstyle = ({
radius: 6,
fillColor: colour,
color: "#000",
weight: 0.5,
opacity: 1,
fillOpacity: 0.8
})
schoolsLayer = L.geoJson(schools_data, {
onEachFeature: popupaction,
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, markerstyle)
}
})
popupaction = function(feature, layer) {
if (feature.properties) {
layer.bindPopup(feature.properties.NAME + "<br>" + feature.properties.ADDRESS)
}
}
clusterGroup = L.markerClusterGroup({
showCoverageOnHover: true,
animate: true,
iconCreateFunction: function(cluster) {
var count = cluster.getChildCount();
var digits = (count+'').length;
return new L.divIcon({
html: count,
className:'cluster digits-'+digits,
iconSize: null
});
}
})
clusterLayer = clusterGroup.addLayer(schoolsLayer)
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.
