Coding the Earth
Inputs.table(attrTable)
{
let maxPop = -1, maxPopFeature = null;
nyBlockPop.features.forEach( function(f, i){
if(f.properties.TotalPop > maxPop) {
maxPop = f.properties.TotalPop;
maxPopFeature = f;
}
} );
return {maxPopulation: maxPop, maxPopFeature: maxPopFeature};
}
{
const container = yield htl.html`<div style="height: 800px">`;
const map = L.map(container).setView([40.7678, -73.9645], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
const nyBlockLayer = L.geoJSON(null).addTo(map);
nyBlockLayer.addData(nyBlockPop);
nyBlockLayer.getLayers().forEach( l => {
if(l.feature.properties.TotalPop > minPop) {
nyBlockLayer.resetStyle(l);
l.on('mouseover', e => {
l.setStyle({fillColor:'red', fillOpacity: 1.0});
}).on('mouseout', e=> {
nyBlockLayer.resetStyle(l);
});
} else {
l.setStyle({fillColor: 'red', fillOpacity: 0.0, opacity: 0.0});
}
});
//map.off();
map.on('dblclick', e => {
map.zoomOut(1);
});
map.on('keydown keypress', e => {
//console.log(e.originalEvent.key);
let keyVal = e.originalEvent.key;
if(keyVal === 'h' || keyVal === 'H') {
map.setView([40.7678, -73.9645], 18);
}
});
}
mapObj = {
const container = yield htl.html`<div style="height: 800px; width: 100%">`;
const map = L.map(container).setView([40.7678, -73.9645], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
const nyBlockLayer = L.geoJSON(null, {
color: '#3388ff', // boundary color
weight: 1,
fillColor: 'blue',
fillOpacity: 0.2
}).bindTooltip(l => {
return "Census " + l.feature.properties.name + " has <strong>" + l.feature.properties.TotalPop + "</strong> residents.";
}).addTo(map);
nyBlockLayer.addData(nyBlockPop);
let maxPop = -1, maxPopLayer = null;
nyBlockLayer.getLayers().forEach( l => {
if(l.feature.properties.TotalPop > maxPop) {
maxPop = l.feature.properties.TotalPop
maxPopLayer = l;
}
});
maxPopLayer.setStyle({fillColor: 'red', fillOpacity: 0.5});
//return {leafObj: map, maxBlockPop: maxPop, maxPopFeature: maxPopLayer.feature};
//return [maxPop, maxPopLayer.feature, map];
}
{
return mapObj;
}
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.
