push demos for today
This commit is contained in:
parent
98114b9f7d
commit
1a7eec7baa
BIN
13.js-mapping/XYZ_Tiles.png
Normal file
BIN
13.js-mapping/XYZ_Tiles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
188
13.js-mapping/d3.html
Normal file
188
13.js-mapping/d3.html
Normal file
@ -0,0 +1,188 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<style>
|
||||
/* style for tooltip as well as the base map container */
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
padding: 8px;
|
||||
background: white;
|
||||
border: 1px solid #333333;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<script src="https://unpkg.com/topojson@3"></script>
|
||||
<script>
|
||||
const euMemberStates = {
|
||||
Belgium: 1,
|
||||
France: 1,
|
||||
Germany: 1,
|
||||
Italy: 1,
|
||||
Luxembourg: 1,
|
||||
Netherlands: 1,
|
||||
Denmark: 2,
|
||||
Ireland: 2,
|
||||
Greece: 3,
|
||||
Portugal: 4,
|
||||
Spain: 4,
|
||||
Austria: 5,
|
||||
Finland: 5,
|
||||
Sweden: 5,
|
||||
Cyprus: 6,
|
||||
"Czech Republic": 6,
|
||||
Estonia: 6,
|
||||
Hungary: 6,
|
||||
Latvia: 6,
|
||||
Lithuania: 6,
|
||||
Malta: 6,
|
||||
Poland: 6,
|
||||
Slovakia: 6,
|
||||
Slovenia: 6,
|
||||
Bulgaria: 7,
|
||||
Romania: 7,
|
||||
Croatia: 8,
|
||||
};
|
||||
|
||||
const width = 800;
|
||||
const height = 600;
|
||||
const svg = d3
|
||||
.select("#map")
|
||||
.append("svg")
|
||||
.attr("viewBox", [0, 0, width, height])
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
// d3 tooltip pattern: create a placeholder div which will be
|
||||
// hidden at first & revealed/moved as needed
|
||||
const tooltip = d3
|
||||
.select("body")
|
||||
.append("div")
|
||||
.attr("class", "tooltip")
|
||||
.style("opacity", 0);
|
||||
|
||||
// color function used for choropleth
|
||||
const colorScale = d3
|
||||
.scaleSequential()
|
||||
.domain([8, 1]) // Reversed domain so earlier members are darker
|
||||
.interpolator(d3.interpolateViridis);
|
||||
|
||||
// set up projection centered on Europe
|
||||
const projection = d3
|
||||
// DEMO: change projection
|
||||
// https://d3js.org/d3-geo/conic
|
||||
// https://github.com/d3/d3-geo-projection
|
||||
.geoMercator()
|
||||
//.geoConicEqualArea()
|
||||
.center([15, 54])
|
||||
.scale(600)
|
||||
.translate([width / 2, height / 2]);
|
||||
const path = d3.geoPath().projection(projection);
|
||||
|
||||
// load TopoJSON
|
||||
d3.json(
|
||||
// DEMO change to 110m/10m
|
||||
"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json",
|
||||
).then((data) => {
|
||||
// using topojson 3rd party library to convert to GeoJSON which D3 understands
|
||||
const geojson = topojson.feature(data, data.objects.countries);
|
||||
|
||||
// entire map render happens after data is loaded, in the then() function
|
||||
const europeCountries = geojson.features.filter(
|
||||
(d) => euMemberStates[d.properties.name] !== undefined,
|
||||
);
|
||||
|
||||
svg
|
||||
.selectAll("path")
|
||||
.data(europeCountries)
|
||||
.join("path")
|
||||
.attr("d", path)
|
||||
.attr("fill", (d) => {
|
||||
const score = euMemberStates[d.properties.name];
|
||||
return score ? colorScale(score) : "#ccc";
|
||||
})
|
||||
.attr("stroke", "white")
|
||||
.attr("stroke-width", 0.5)
|
||||
.on("mouseover", function (event, d) {
|
||||
tooltip.transition().duration(200).style("opacity", 0.9);
|
||||
tooltip
|
||||
.html(
|
||||
`
|
||||
<strong>${d.properties.name}</strong><br/>
|
||||
Wave: ${euMemberStates[d.properties.name]}
|
||||
`,
|
||||
)
|
||||
.style("left", event.pageX + 10 + "px")
|
||||
.style("top", event.pageY - 28 + "px");
|
||||
})
|
||||
.on("mouseout", function () {
|
||||
tooltip.transition().duration(500).style("opacity", 0);
|
||||
});
|
||||
|
||||
// example of a legend, not related to map topics
|
||||
const legendWidth = 200;
|
||||
const legendHeight = 20;
|
||||
const legendScale = d3
|
||||
.scaleLinear()
|
||||
.domain([1, 8])
|
||||
.range([0, legendWidth]);
|
||||
|
||||
const legendAxis = d3
|
||||
.axisBottom(legendScale)
|
||||
.ticks(8)
|
||||
.tickFormat((d) => d);
|
||||
|
||||
const legend = svg
|
||||
.append("g")
|
||||
.attr(
|
||||
"transform",
|
||||
`translate(${width - legendWidth - 20}, ${height - 50})`,
|
||||
);
|
||||
|
||||
const defs = svg.append("defs");
|
||||
const gradient = defs
|
||||
.append("linearGradient")
|
||||
.attr("id", "legend-gradient")
|
||||
.attr("x1", "0%")
|
||||
.attr("x2", "100%")
|
||||
.attr("y1", "0%")
|
||||
.attr("y2", "0%");
|
||||
|
||||
// Add gradient stops
|
||||
const stops = d3.range(0, 8);
|
||||
stops.forEach((stop, i) => {
|
||||
gradient
|
||||
.append("stop")
|
||||
.attr("offset", `${(i / (stops.length - 1)) * 100}%`)
|
||||
.attr("stop-color", colorScale(stop));
|
||||
});
|
||||
|
||||
legend
|
||||
.append("rect")
|
||||
.attr("width", legendWidth)
|
||||
.attr("height", legendHeight)
|
||||
.style("fill", "url(#legend-gradient)");
|
||||
|
||||
legend
|
||||
.append("g")
|
||||
.attr("transform", `translate(0, ${legendHeight})`)
|
||||
.call(legendAxis);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
96
13.js-mapping/leaflet.html
Normal file
96
13.js-mapping/leaflet.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!--
|
||||
See Also:
|
||||
https://leafletjs.com/examples/quick-start/
|
||||
https://leafletjs.com/examples.html
|
||||
-->
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
/>
|
||||
<style>
|
||||
#map-goes-here {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
#info {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
#controls {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map-goes-here"></div>
|
||||
<div id="info">placeholder</div>
|
||||
<div id="controls">
|
||||
<button id="zoom-fit">Fit All Points</button>
|
||||
<button id="zoom-us">Fit US</button>
|
||||
</div>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script>
|
||||
const chicago = [41.8781, -87.6298];
|
||||
const initialZoom = 12;
|
||||
// Leaflet makes a global variable "L" available.
|
||||
// this creates a map in the div above
|
||||
const map = L.map("map-goes-here").setView(chicago, initialZoom);
|
||||
|
||||
// OSM base layer
|
||||
// DEMO change of base layer
|
||||
const watercolorURL =
|
||||
"https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg";
|
||||
const osmURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
||||
L.tileLayer(osmURL, {
|
||||
maxZoom: 19,
|
||||
attribution: "© OpenStreetMap contributors",
|
||||
}).addTo(map);
|
||||
|
||||
// points could be loaded from GeoJSON or any other source
|
||||
// usage (below) does not depend on format
|
||||
const points = [
|
||||
{ lat: 41.8826, lng: -87.6233, name: "Millennium Park" },
|
||||
{ lat: 41.8916, lng: -87.6083, name: "Navy Pier" },
|
||||
{ lat: 41.8526, lng: -87.6188, name: "Museum of Science and Industry" },
|
||||
];
|
||||
|
||||
// Add points to the map
|
||||
const markers = [];
|
||||
points.forEach((point) => {
|
||||
const marker = L.marker([point.lat, point.lng]).addTo(map);
|
||||
|
||||
// adds a popup to the marker, can use HTML
|
||||
marker.bindPopup(`<strong>${point.name}</strong>`);
|
||||
|
||||
// add custom events to markers in typical JS fashion
|
||||
marker.on("click", function () {
|
||||
const infoDiv = document.getElementById("info");
|
||||
infoDiv.textContent = `Selected Location: ${point.name}`;
|
||||
});
|
||||
|
||||
markers.push(marker);
|
||||
});
|
||||
|
||||
// example of binding button events to modify the map
|
||||
document.getElementById("zoom-fit").addEventListener("click", () => {
|
||||
const groupBounds = new L.featureGroup(markers).getBounds();
|
||||
map.fitBounds(groupBounds);
|
||||
});
|
||||
document.getElementById("zoom-us").addEventListener("click", () => {
|
||||
const usBounds = [
|
||||
[24.396308, -125.0], // Southwest corner (latitude, longitude)
|
||||
[49.384358, -66.93457], // Northeast corner (latitude, longitude)
|
||||
];
|
||||
map.fitBounds(usBounds);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
13.js-mapping/map1.png
Normal file
BIN
13.js-mapping/map1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
13.js-mapping/map2.png
Normal file
BIN
13.js-mapping/map2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
142
13.js-mapping/maplibre.html
Normal file
142
13.js-mapping/maplibre.html
Normal file
@ -0,0 +1,142 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- maplibre needs custom CSS loaded to style its maps and controls -->
|
||||
<link
|
||||
href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
#map-goes-here {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
#info {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
#controls {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map-goes-here"></div>
|
||||
<div id="info">placeholder</div>
|
||||
<div id="controls">
|
||||
<button id="zoom-fit">Fit All Points</button>
|
||||
<button id="zoom-us">Fit US</button>
|
||||
</div>
|
||||
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
|
||||
<script>
|
||||
const watercolor = {
|
||||
version: 8,
|
||||
sources: {
|
||||
"raster-tiles": {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
// NOTE: Layers from Stadia Maps do not require an API key for localhost development or most production
|
||||
// web deployments. See https://docs.stadiamaps.com/authentication/ for details.
|
||||
"https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg",
|
||||
],
|
||||
tileSize: 256,
|
||||
attribution:
|
||||
'Map tiles by <a target="_blank" href="https://stamen.com">Stamen Design</a>; Hosting by <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>. Data © <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors',
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: "simple-tiles",
|
||||
type: "raster",
|
||||
source: "raster-tiles",
|
||||
minzoom: 0,
|
||||
maxzoom: 22,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const tileJSON =
|
||||
"https://tiles.stadiamaps.com/styles/alidade_smooth.json";
|
||||
const map = new maplibregl.Map({
|
||||
container: "map-goes-here",
|
||||
center: [-87.6298, 41.8781],
|
||||
zoom: 12,
|
||||
style: tileJSON,
|
||||
// DEMO toggle style
|
||||
style: watercolor,
|
||||
});
|
||||
|
||||
const points = [
|
||||
{ lat: 41.8826, lng: -87.6233, name: "Millennium Park" },
|
||||
{ lat: 41.8916, lng: -87.6083, name: "Navy Pier" },
|
||||
{ lat: 41.8526, lng: -87.6188, name: "Museum of Science and Industry" },
|
||||
];
|
||||
|
||||
// some features expect GeoJSON in the format shown here.
|
||||
// in practice we may load from an API or source file
|
||||
// if possible, it is OK to embed data directly like this
|
||||
// (Outside of this example I would probably move this to a function for reuse.)
|
||||
const geojson = {
|
||||
type: "FeatureCollection",
|
||||
features: points.map((point) => ({
|
||||
type: "Feature",
|
||||
// this should be one of the OGR geometries (Point/Line/Polygon/etc.)
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [point.lng, point.lat],
|
||||
},
|
||||
// can put arbitrary data here in properties
|
||||
properties: {
|
||||
name: point.name,
|
||||
},
|
||||
})),
|
||||
};
|
||||
|
||||
// looping over the GeoJSON, we add a marker & popup for each
|
||||
// point in the data. the parameter here is a GeoJSON object
|
||||
geojson.features.forEach((feature) => {
|
||||
// these variables are just extracting data from the format seen above
|
||||
// which is GeoJSON's representation of a geometry
|
||||
const coordinates = feature.geometry.coordinates;
|
||||
const name = feature.properties.name;
|
||||
|
||||
// add a marker for each point
|
||||
const marker = new maplibregl.Marker()
|
||||
.setLngLat(coordinates)
|
||||
.addTo(map);
|
||||
|
||||
// add a popup with the point name
|
||||
const popup = new maplibregl.Popup().setText(name);
|
||||
marker.setPopup(popup);
|
||||
|
||||
// bind event listener to marker (identical to leaflet)
|
||||
marker.getElement().addEventListener("click", () => {
|
||||
const infoDiv = document.getElementById("info");
|
||||
infoDiv.textContent = `Selected Location: ${name}`;
|
||||
});
|
||||
});
|
||||
|
||||
// fit all points -- a bit more complicated than Leaflet's version
|
||||
document.getElementById("zoom-fit").addEventListener("click", () => {
|
||||
const bounds = geojson.features.reduce((bounds, feature) => {
|
||||
return bounds.extend(feature.geometry.coordinates);
|
||||
}, new maplibregl.LngLatBounds());
|
||||
|
||||
map.fitBounds(bounds, { padding: 20 });
|
||||
});
|
||||
|
||||
// fit entire US
|
||||
document.getElementById("zoom-us").addEventListener("click", () => {
|
||||
const usBounds = [
|
||||
[-125.0, 24.396308], // Southwest corner [lng, lat]
|
||||
[-66.93457, 49.384358], // Northeast corner [lng, lat]
|
||||
];
|
||||
map.fitBounds(usBounds, { padding: 20 });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
155
13.js-mapping/slides.html
Normal file
155
13.js-mapping/slides.html
Normal file
File diff suppressed because one or more lines are too long
176
13.js-mapping/slides.md
Normal file
176
13.js-mapping/slides.md
Normal file
@ -0,0 +1,176 @@
|
||||
# Mapping in JavaScript
|
||||
|
||||
---
|
||||
|
||||
## Today
|
||||
|
||||
- Discuss types of maps & appropriate library choices.
|
||||
- Explore examples in D3, Leaflet, and MapLibreGL.
|
||||
|
||||
---
|
||||
|
||||
## Which Tool?
|
||||
|
||||
**What kind of map?**
|
||||
|
||||
|
||||
|
||||
Abstract/geometric representation of data.
|
||||
|
||||
D3 will provide the most flexibility & can use existing tools for color scales/interactivity/etc.
|
||||
|
||||
---
|
||||
|
||||
## Map w/ Cartographic Features
|
||||
|
||||
|
||||
|
||||
A different library will be necessary. Depending on needs **raster** or **vector** tiles.
|
||||
|
||||
---
|
||||
|
||||
## Choropleths in D3
|
||||
|
||||
<https://d3-graph-gallery.com/graph/choropleth_basic.html>
|
||||
|
||||
### Projection
|
||||
|
||||
<https://d3-graph-gallery.com/graph/backgroundmap_changeprojection.html>
|
||||
|
||||
---
|
||||
|
||||
## Leaflet and MapLibreGL Choropleths
|
||||
|
||||
- Projection choice constrained by tile layers.
|
||||
- Need additional libraries (or pure JS) for interactivity & other graphics.
|
||||
|
||||
Demo/Tutorial: <https://leafletjs.com/examples/choropleth/>
|
||||
|
||||
---
|
||||
|
||||
## Base Maps
|
||||
|
||||
Instead of starting with a blank slate, it can be helpful to have a base map, but a base map is often comprised of many feature layers:
|
||||
|
||||
- Country/Ocean borders
|
||||
- National Sub-divisions
|
||||
- Roads
|
||||
- Terrain
|
||||
- Points of Interest
|
||||
- ...
|
||||
|
||||
Drawing all of these layers adds up.
|
||||
|
||||
---
|
||||
|
||||
## Raster Tiles
|
||||
|
||||
An innovation that made web mapping scalable in the mid-2000s was pre-rendering base layers into image tiles.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Raster Tiles
|
||||
|
||||
### Pros
|
||||
|
||||
- Simple to serve: just a lot of images.
|
||||
- Each image at a zoom level ~approx same size.
|
||||
- 100% consistent rendering.
|
||||
- Any kind of imagery (watercolor, satellite maps, etc.)
|
||||
- Minimal client-side processing needed.
|
||||
- Good for dense data.
|
||||
|
||||
---
|
||||
|
||||
### Cons
|
||||
|
||||
- Fixed zoom levels and projection.
|
||||
- Large file sizes for large Z.
|
||||
- Need to create variants for all desired permutations of features.
|
||||
- No modifications to styling after the fact.
|
||||
|
||||
---
|
||||
|
||||
## Vector Tiles
|
||||
|
||||
Instead of images, data is sent as images.
|
||||
|
||||
- Can create multiple variations per JSON, change road colors/etc without regenerating millions of images.
|
||||
- Can be more efficient on bandwidth.
|
||||
- Significantly more complexity on client and server side.
|
||||
- Older devices may struggle to render them.
|
||||
- Rendering relies on client library, can vary.
|
||||
- Not suitable for dense data such as satellite imagery.
|
||||
|
||||
Blog Post from *today* on OSM switch to Vector tiles: <https://tech.marksblogg.com/osm-mvt-vector-tiles.html>
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Leaflet
|
||||
|
||||
**Raster Tiles w/ Vector Layer on Top**
|
||||
|
||||
<https://leafletjs.com/reference.html>
|
||||
|
||||
(Has plugins to use Vector Tiles via MapLibreGL)
|
||||
|
||||
---
|
||||
|
||||
## MapLibreGL
|
||||
|
||||
Vector-tile based library. Community fork of MapboxGL.
|
||||
|
||||
Mapbox is an innovator in the space, but also quite expensive.
|
||||
|
||||
MaplibreGL/MapboxGL are mostly compatible.
|
||||
|
||||
---
|
||||
|
||||
## General Workflow
|
||||
|
||||
- Use library to render map(s) to div(s) on page.
|
||||
- Pick base layer, either raster or vector.
|
||||
- If vector, possibly apply additional styling to base.
|
||||
- Add additional vector layers based on your data & its features.
|
||||
- Attach event handlers for interactivity on your features and/or input elements adjacent to the map.
|
||||
|
||||
---
|
||||
|
||||
## Pop-ups
|
||||
|
||||
Leaflet/MapLibre offer a simple API for adding pop-ups to features.
|
||||
|
||||
Reminder: hover/pop-up alone is **not enough interactivity** for final product.
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
Leaflet & MapLibre examples
|
||||
|
||||
---
|
||||
|
||||
## Custom Base Layers
|
||||
|
||||
- [Stadia Maps Hosted Tiles](https://stadiamaps.com/products/map-tiles/), free for noncommercial/academic use. You will need an account though.
|
||||
- [OpenMapTiles](https://openmaptiles.org/styles/) - free, meant for self hosting.
|
||||
- [Mapbox](https://www.mapbox.com) - another paid solution, $$$.
|
||||
|
||||
---
|
||||
|
||||
## Other Libraries
|
||||
|
||||
- [Deck.gl](https://deck.gl) - Alternative renderer similar to Map*GL. TypeScript/React focused mostly, hard to use with JS we covered.
|
||||
- [OpenLayers](https://openlayers.org) -
|
||||
- [Cesium](https://cesium.com) - 3D-focused geospatial.
|
||||
- Note: You can also get 3D rendering w/ D3 or MapLibreGL.
|
||||
|
||||
---
|
||||
|
||||
## More Examples
|
||||
|
||||
- <https://projects.fivethirtyeight.com/redistricting-maps/alabama/#Competitive>
|
||||
- <https://projects.fivethirtyeight.com/partisan-gerrymandering-north-carolina/>
|
||||
BIN
13.js-mapping/tiles.png
Normal file
BIN
13.js-mapping/tiles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Loading…
Reference in New Issue
Block a user