Coding the Earth
mapHTML = {
const container = yield htl.html`<div id="nyc_prek_map_div" style="height: 600px;">`;
const map = L.map(container).setView([40.7678, -73.9645], 11);
let basemapLayers = Array(4).fill(null),
basemapNames = ['Stadia.StamenWatercolor', "Esri.WorldStreetMap", "OpenStreetMap.Mapnik", "Esri.WorldGrayCanvas"];
basemapNames.forEach((v, i) => {
basemapLayers[i] = L.tileLayer.provider(v);
});
basemapLayers[3].addTo(map);
L.marker(L.latLng(40.7678, -73.9645),
{
title: "Hunter College",
opacity: 0.8,
riseOnHover: true}).bindPopup("This is a point added to Leaflet for Hunter College").
addTo(map);
L.marker(L.latLng(40.7678, -73.97),
{ icon: mtaIcon,
title: "Hunter College Station",
opacity: 0.8,
riseOnHover: true}).bindPopup("This is a point added to Leaflet for Hunter College").
addTo(map);
let nycSchoolsLayer = L.geoJSON(null, {
style: (f) => {
if(f.properties.school_dis > 25)
return {color:"red",
weight: 1};
else
return {color:"blue",
weight: 2};
},
onEachFeature: (f, l) => {
l.bindPopup("The school district number is " + f.properties.school_dis);
}
});//.addTo(map);
nycSchoolsLayer.addData(schoolDistricts);
let nycPreKLayer = L.geoJSON(null, {
pointToLayer: (f, latLon) => {
//debugger;
let cL = L.circle(latLon, {radius: 56, color: "blue", weight: 1});
cL.bindPopup("URL is " + f.properties.Website);
return cL;
},
style: {color: "blue"}
}).addTo(map);
fetch("https://raw.githubusercontent.com/SunCodeEarth/SunCodeEarth.github.io/master/demo/nyc_prek/nyc_prek.geojson").then((response) => {
return response.json();
}).then((data) => {
nycPreKLayer.addData(data);
});
var baseMaps = {};
basemapLayers.forEach((v,i)=>{
baseMaps[basemapNames[i]] = v;
});
var overlayMaps = {
"<em>Pre-K </em> Schools": nycPreKLayer,
"<span style=\"background-color:DodgerBlue; color: white\">School Boundary</span>": nycSchoolsLayer,
};
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
// This "mutable" is needed to make this work in Observable.
// In a regular HTML/JS setting, it will be much easier as these variables could be visible in the entire file.
mutable mapVariables = [map, nycPreKLayer];
}
{
mapVariables[1].getLayers().forEach( (l, i) => {
if( i >= schoolIndexRange*19 ) {
l.setStyle({color: "blue", fillOpacity: 0.0, opacity: 0.0});
l.unbindPopup();
} else {
mapVariables[1].resetStyle(l);
l.bindPopup("URL is " + l.feature.properties.Website);
}
}
);
return "Show how to use a slider to control 'visibility' of some features";
}
{
let geojsonLayer = mapVariables[1];
geojsonLayer.getLayers().forEach( (l, i) => {
if( i >= schoolIndexRangeB*19 ) {
l.removeFrom(mapVariables[0]);
} else {
l.addTo(mapVariables[0]);
}
}
);
return "Show how to use a slider to add/remove some features from the map";
}
mutable mapVariables = null;
mta = FileAttachment("mta.png").url()
mtaIcon = L.icon({
iconUrl: mta,
iconSize: [25, 25],
iconAnchor: [2, 2],
popupAnchor: [-3, -4]
});
schoolDistricts = FileAttachment("School Districts.geojson").json();
L = require('leaflet@1.9.4/dist/leaflet-src.js', 'leaflet-providers@2.0.0/leaflet-providers.js')
// L = require('leaflet-providers@2.0.0/leaflet-providers.js')
html`<link href='${resolve('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css')}' rel='stylesheet' />`
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.
