Coding the Earth
map = {
const container = yield htl.html`<div style="height: 500px;">`;
//const map = create_map(container, {map: {center: { lat: 40.7678, lng: -73.9645 }, zoom: 17, fullscreenControl: true }, layer: null});
const map = L.map(container, {fullscreenControl: true}).setView([40.7678, -73.9645], 18);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
L.marker([40.7678, -73.9645], {title:"Hunter College Main Campus", riseOnHover: true}).addTo(map);
}
// Load leaflet and a full screen plugin using import (modern module mode)
// Note fullscreen mode does not work for this notebook style visualization because the cell controls the parent DIV.
// Need some exploration
L_m = {
//const Lbasic = await import("https://cdn.skypack.dev/leaflet");
// the Leaflet module will be loaded by the fullscreen module.
const LfullScreen = await import("https://cdn.skypack.dev/@bepo65/leaflet.fullscreen").catch( () => {});
return LfullScreen.default;
}
// Load both leaflet and plugin libraries using require (the legacy approach)
// https://observablehq.com/@observablehq/how-to-require-stubborn-modules
La = {
//const L = await require('leaflet@1.9.0');
const Lp = await require('https://leaflet-extras.github.io/leaflet-providers/leaflet-providers.js').catch(() => {});
return Lp;
}
L = await require('leaflet@1.9.4', 'leaflet-providers@1.13.0', 'leaflet.fullscreen@3.0.1/Control.FullScreen.js');
controlFullscreen_observable = FileAttachment("Control.FullScreen_Observable.js")
html`<link href='${resolve('leaflet@1.9.4/dist/leaflet.css')}' rel='stylesheet' />`
html`<link href='${resolve('https://unpkg.com/leaflet.fullscreen@3.0.1/Control.FullScreen.css')}' rel='stylesheet' />`
nyc_schooldistricts = FileAttachment("School Districts.geojson").json()
nycMap = {
let container = DOM.element('div', {id: `nyc_sd_map_div`, style: `width:${width}px;height:${width/1.8}px` });
yield container;
let map = L.map(container, {fullscreenControl: true,
fullscreenControlOptions: {forcePseudoFullscreen: false},
});// Did not set view because we are using "fit bounds" to get the polygons to determine this
let esriImage = L.tileLayer.provider('Esri.WorldImagery');
let cartoMap = L.tileLayer.provider('CartoDB.Positron').addTo(map);
let nycSchoolLayer = L.geoJson(nyc_schooldistricts, { //instantiates a new geoJson layer using built in geoJson handling
weight: 2, //Attributes of polygons including the weight of boundaries and colors of map.
color: "blue",
fillColor: "brown",
fillOpacity: 0.3
}).bindTooltip((l) => { //binds a popup when clicking on each polygon to access underlying data
return "School District " + l.feature.properties.school_dist;
}).addTo(map); //Adds the layer to the map.
map.fitBounds(nycSchoolLayer.getBounds().pad(-0.80)); //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation
L.control.layers({"ESRI Imagery": esriImage,
"Carto Location": cartoMap},
{"NYC School Districts": nycSchoolLayer}
).addTo(map);
let container_resize = () => {
// map size is defined by its parent element.
let width = container.parentElement.offsetWidth;
let height = (document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement)
? container.parentElement.offsetHeight
: (width / 1.6);
container.style.width = null || width + 'px';
container.style.height = null || height + 'px';
};
window.onresize = () => { container_resize(); };
container_resize();
map.on('enterFullscreen', function () {
map.getContainer().parentElement.requestFullscreen();
//d3.select("#nyc_sd_map_div").style("height", "100%");
//d3.select("#nyc_sd_map_div").style("width", "100%");
let widthL = container.parentElement.offsetWidth;
let heightL = (document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement)
? container.parentElement.offsetHeight
: (widthL / 1.8);
console.log("W:" + widthL + "; H: " + heightL);
container.style.width = widthL + 'px';
container.style.height = heightL + 'px';
});
map.on('exitFullscreen', function () {
//d3.select("#nyc_sd_map_div").style("height", "600px");
});
mutable mapVariables = [map, nycSchoolLayer];
}
mutable mapVariables = null;
nycSchoolMap = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/2.0}px` });
yield container;
let map = L_m.map(container, {fullscreenControl: true,
fullscreenControlOptions: {
position: 'topleft',
title: 'fullscreen map',
titleCancel: 'exit fullscreen display'
}
}
);// Did not set view because we are using "fit bounds" to get the polygons to determine this
let osmLayer = L_m.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let nycSchoolLayer = L_m.geoJson(nyc_schooldistricts, { //instantiates a new geoJson layer using built in geoJson handling
weight: 1, //Attributes of polygons including the weight of boundaries and colors of map.
color: "#432",
}).bindTooltip((l) => { //binds a popup when clicking on each polygon to access underlying data
return "School District " + l.feature.properties.school_dist;
}).addTo(map); //Adds the layer to the map.
/*
let marker = new DriftMarker([40.7678, -73.9645]).addTo(map);
marker.slideTo([40.7486, -73.9840], {
duration: 2000,
keepAtCenter: false
});
*/
map.fitBounds(nycSchoolLayer.getBounds()); //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation
}
import { create_map, map_options } from "@easz/my-map"
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.
