Public
Edited
Nov 8, 2022
1 fork
1 star
L = {
const L = await require("leaflet@1/dist/leaflet.js");
return L;
}
<link href='${resolve('leaflet@1/dist/leaflet.css')}' rel='stylesheet' />
// We'll start by creating a div in this cell we're assigning to a variable 'map'.
map = {
// Typically, you might see Leaflet examples initialize a map with code
// that looks something like L.map('map'), which will tell the Leaflet
// library to look for a div on the page with the id of 'map'. In our case
// we're doing some rather unnatural things in Observable by creating the
// div in the cell.
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
// This component uses "yield" to pause execution of this code block
// and return the value of the cell back to the notebook. Behind
// the scenes, we're telling the notebook to create the div on the page.
// We're doing this here because Leaflet uses .offsetWidth and .offsetHeight (which
// grabs the size of the div) to size the map correctly. Otherwise, we might get
// a map that isn't properly sized.
yield container;
// Now, let's make a map and create a center position and default zoom level.
let map = L.map(container).setView([41.90, 12.49], 5);
// If we stopped here, we'd have successfully initiated a Leaflet map but you'd
// simply be given a blank, grey square. Our next step requires us to tell Leaflet
// what basemap we'd like to use. In this case, we're going to pull in map tiles from
// OpenStreetMaps. The code below adds the tile layer to the map, which will dynamically
// load tiles based on the current viewport of the map. It's also a good practice
// to include your attributions here, not only for the basemap but any additonal
// sources you might use (such as historical basemaps).
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | David Rumsey Map Collection'
}).addTo(map);
}
map_positron = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([41.90, 12.49], 5);
// Take note that we've changed the L.tileLayer URL from osm to cartocdn as outlined
// in the above link. Note I've also updated our attribution to credit CARTO.
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
}).addTo(map);
}
italy_regions = FileAttachment("limits_IT_regions.geojson").json()
// We'll instantiate a new cell to hold a new map for us to display our polygons.
italy = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([41.90, 12.49], 5);
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);
// Now let's add our neighborhood layer. We're going to initiate a new GeoJSON layer using Leaflet's
// built-in GeoJSON method. We do this by simply calling L.geoJson and passing in our variable
// for our GeoJSON file above. We'll store this in a variable called `it`.
let it = L.geoJson(italy_regions, {
// We can do some styling of the polygons here as well. Below, we'll include
// a weight (which sets the thickness of the boundaries in pixels) and color (which
// lets us set the polygon color).
weight: 1,
color: "#000000",
}).addTo(map);
// Finally, if we didn't set a center or zoom level above with L.map, we can tell
// Leaflet to get the boundaries (or, the edges in each direction) of our polygon.
// We'll use Leaflet's .fitBounds method for this. We need to pass in our `it` variable
// for Leaflet to do its work.
// map.fitBounds(it.getBounds());
}
data = FileAttachment("DMH_Workshop_Ship_Losses.csv").csv()
import {select} from "@jashkenas/inputs"
Inputs.table(data, {
format: {
year: d3.format("d") // format as "1960" rather than "1,960"
}
})
map_marker = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([41.90, 12.49], 5);
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);
// Here is our loop for plotting the point data. We launch this with a for loop, which will simply
// continue through each line of data until it hits the end. We assign a new variable called `datum`
// and tell Leaflet to create a marker for each X and Y coordinate in our dataset by providing the arguments
// to Leaflet's .circleMarker method.
// We also do a couple of quality-of-life improvements: we use filter() to narrow down our results
// (there's a lot of data!), and we use Leaflet's `.bindPopup` method to allow click events on the markers.
// We also apply our own `markerstyle` to the points.
for (let datum of data) {
// Create a marker for each row of data.
const marker = L.circleMarker([+datum.Y,+datum.X], markerstyle).bindPopup(datum.Name).openPopup()
// Add the marker to the map.
marker.addTo(map);
}
}
markerstyle = ({
radius: 5,
fillColor: "red",
color: "#000",
weight: 0.5,
opacity: 1,
fillOpacity: 0.6
})
map_historic = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([41.90, 12.49], 5);
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);
// Similar to the way we pull in basemaps from OpenStreetMaps, we can use the .tileLayer method
// to display a georectified map. For this to work properly, a georectified map like this
// needs to be in a Google Maps/OSM schema. Most geoservers that host georectified map tiles
// should provide this kind of information for you. In some cases, you may need to sign
// up for an account and use a unique API key to access the tiles.
// Map from: http://maps.nypl.org/warper/maps/33698#Export_tab
let italy_historic = L.tileLayer('https://maps.georeferencer.com/georeferences/64d5b28c-851b-5d6d-b03a-9c681443cb58/2017-04-18T17:47:57.114177Z/map/{z}/{x}/{y}.png?key=KPlLnmp6U0gZTmAcJ4Ob', {
attribution: '© David Rumsey Map Collection',
// We can change the transparency of the historic map to reveal more (or less) of
// the modern day map underneath. The number ranges between 0.0 and 1.0.
opacity: 0.5
}).addTo(map);
}
full_map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([41.90, 12.49], 5);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Add our historic basemap
let italy_historic = L.tileLayer('https://maps.georeferencer.com/georeferences/64d5b28c-851b-5d6d-b03a-9c681443cb58/2017-04-18T17:47:57.114177Z/map/{z}/{x}/{y}.png?key=KPlLnmp6U0gZTmAcJ4Ob', {
attribution: '© David Rumsey Map Collection',
opacity: 0.4
}).addTo(map);
// Add our polygons
// Note that order matters here. If we applied our markers first and then our polygons,
// the markers would appear undernear the polygons.
let it = L.geoJson(italy_regions, {
weight: 2,
color: "black"
}).addTo(map);
// Add our markers
for (let datum of data.filter(d => d.Year == 1943)) {
const marker = L.circleMarker([+datum.Y,+datum.X], markerstyle2).bindPopup(datum.Name).openPopup()
marker.addTo(map);
}
}
markerstyle2 = ({
radius: 5,
fillColor: "forestgreen",
color: "#000",
weight: 0.5,
opacity: 1,
fillOpacity: 0.6
})
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.
