The Ambassador program is made up of a group of inclusive, collaborative, and curious minds in the Observable community.
Published unlisted
Edited
Apr 2, 2021
viewof berkshire_map = {
const container = html`<div><div class="inner" style="height:800px;"></div></div>`;
let inner = container.querySelector(".inner");
inner.addEventListener("input", e => e.stopPropagation()); //need to allow layer toggles to check on and off
yield container;
// Initial View
let map = L.map(inner).setView([42.3824162, -73.2380902], 10);
// Default Tile Layers [Basemap]
let osmLayer = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);
// Additional Tile Layers [Basemaps]
let world_imagry = 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',
maxZoom: 17
}
);
let world_topo = L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
{
attribution:
'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community',
maxZoom: 17
}
);
// Base Layers [Basemap Selection] - We need at least one.
let baseLayers = {
"Open Street Maps": osmLayer,
"World Imagery": world_imagry,
"World Topo Map": world_topo
};
// store some extras
map.addLayer(world_imagry);
map.baseLayers = baseLayers;
container.value = map;
}
{
berkshire_map;
console.log("berkshire_map recomputed"); // console message to indicate where errors occur. Currently I am seeing the error. Will try to solve!
try {
throw new Error("here");
} catch (err) {
console.error(err);
}
}
controls = {
const map = berkshire_map;
// Control Layers [Show/Hide Features]
let controlLayers = {};
let control_layers = new L.control.layers(map.baseLayers, controlLayers, {
position: 'topright',
collapsed: false
});
map.control_layers = control_layers;
map.controlLayers = controlLayers;
map.addControl(control_layers);
invalidation.then(() => {
console.log("invalidation");
map.removeControl(control_layers);
});
// Data Layers
towns.addTo(map);
// Helper to check on code execution
console.log("The big cell was updated");
}
{
controls;
console.log("The individual control layers were updated.");
berkshire_map.removeControl(berkshire_map.control_layers);
berkshire_map.controlLayers["Areas of Concen"] = acecs_poly; // populating options into the new control group
berkshire_map.controlLayers["Natural Communities"] = NATCOMM_POLY;
berkshire_map.controlLayers["Rare Wildlife Habitats"] = ESTHAB_POLY;
berkshire_map.controlLayers["Estimated Rare Habitat"] = PRIHAB_POLY;
let control_layers = new L.control.layers(
berkshire_map.baseLayers,
berkshire_map.controlLayers,
{
position: 'topright',
collapsed: false
}
);
berkshire_map.control_layers = control_layers; // this is responsible for replacing big map controls with individual data
berkshire_map.addControl(berkshire_map.control_layers); // this adds the controls for individual data onto the map
invalidation.then(() => {
berkshire_map.removeControl(berkshire_map.control_layers); // this removes the controls to stop them from multiplying
});
}
{
// We add these to the map so that they're visible on load. Separating them here had the effect of keeping them 'always on', so I added them back into the main map view.
acecs_poly.addTo(berkshire_map); //these place in layers on load; they may need to be invalidated in some what, as it looks like SVGs may be overwriting themselves?
NATCOMM_POLY.addTo(berkshire_map);
ESTHAB_POLY.addTo(berkshire_map);
PRIHAB_POLY.addTo(berkshire_map);
}
NATCOMM_POLY = L.geoJson(await berkshires_NATCOMM_POLY, {
weight: 1,
color: NATCOMM_POLY_color,
fillOpacity: NATCOMM_POLY_opacity,
onEachFeature: NATCOMM_POLY_popup
})
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.
