map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([47.3293, -122.5801], 11);
L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.{ext}', {
minZoom: 0,
maxZoom: 20,
attribution: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
ext: 'png'
}).addTo(map);
L.geoJSON(gigHarbor, {
style: function(feature) {
switch (feature.properties.GEOID20) {
case '98335': return {color: "#1F51FF", "weight": 1};
case '98333': return {color: "#BC12FE", "weight": 1,};
case '98332': return {color: "#39FF14", "weight": 1,};
case '98329': return {color: "#FF5E00", "weight": 1,};
}
}
}).addTo(map);
}
html`
<style>
.my-label {
font-size:20px;
background-color: transparent;
color: white;
border: none;
}
.leaflet-popup-tip-container {
display: none;
}
</style>
`
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
targetGEOIDs = ["98335", "98333", "98332", "98329"];
tl_2020_us_zcta5201 = FileAttachment("tl_2020_us_zcta520@1.json").json()
gigHarbor = tl_2020_us_zcta5201.features.filter(feature => {
if (feature.properties && feature.properties.GEOID20) {
// Check if the GEOID20 value is in the target list
return targetGEOIDs.includes(feature.properties.GEOID20);
}
// If GEOID20 doesn't exist in properties, exclude the feature
return false;
})
myStyle = {
return {
"color": "#0FF0FC",
"weight": 1,
// "opacity": 1,
"fillOpacity": 0.08
}
};
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.
