map = {
//Create the basic map container and set the view
const container = yield htl.html`<div style="height: 800px;">`;
const map = L.map(container).setView([40.6501, -73.94958], 12);
//Add two basemaps
//First, create two variables of the basemaps
var arcImg = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {attribution:
"Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"});
var osm = L.tileLayer('https://tile.openstreetmap.bzh/ca/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles courtesy of <a href="https://www.openstreetmap.cat" target="_blank">Breton OpenStreetMap Team</a>'
});
// var thunder = L.tileLayer('https://{s}.tile.thunderforest.com/neighbourhood/{z}/{x}/{y}{r}.png?apikey={apikey}', {
// attribution: '© <a href="http://www.thunderforest.com/">Thunderforest</a>, © <a //href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
// maxZoom: 22
//});
//Add these to the map
osm.addTo(map);
arcImg.addTo(map);
//Create an object var of both basemaps
var baseMaps = {
"Open Street Maps" : osm,
"ESRI Satellite Imagery" : arcImg
}
//Add two geojson layers to the map
//Layer 2: community districts empty, styled
var districts = L.geoJSON(null, {
style: function (feature) { return {
color: "white",
fill: "white",
fillOpacity:0,
weight:1};
}
}).addTo(map);;
//Add the data to layer 2
districts.addData(communitydistricts);
//Function to designate Layer 1 colors
function getColor(d) {
return (d > 2023) ? '#03045e' :
(d > 2022) ? '#0077b6' :
(d > 2021) ? '#00b4d8' :
(d > 2020) ? '#90e0ef' :
'#caf0f8';
}
//Layer 1: 311 calls empty, styled
var points311 = L.geoJSON(null, {
style: function (f, l) { return {
color: getColor(f.properties.Year),
fill: getColor(f.properties.Year),
weight:1.5,
opacity:.6,
fillOpacity:.4
};
},
pointToLayer: function(geoJsonPoint, latlng) {
return L.circleMarker(latlng,{radius:4.5});
},
onEachFeature: (f, l) => {
l.bindPopup("Date: " + f.properties.Formatted + "</br> Address: " + f.properties.IncidentAdd + "</br> Complaint: " + f.properties.Descript2);
}
}).addTo(map);;
//Add the data to layer 1
points311.addData(heavyrain311callscleaned);
//Create an object var of both layers
var overlayMaps = {
"311 Calls" : points311,
"Community Districts" : districts
}
//Now create a layer control object and add the basemaps obj var to that.
var layerControl = L.control.layers(baseMaps, overlayMaps, { collapsed: false, hideSingleBase: true }).addTo(map).expand();
}
heavyrain311callscleaned = FileAttachment("HeavyRain311CallsCleaned.geojson").json();
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.
