Example things I like: geometry, trippy geometry, recursion, maps. 👌
createMapView({width: width * 0.9, postProcessMap: (map) => {
map.addSource('exampleFeatures', {
type: "geojson",
data: exampleGeoJsonFeatureCollection,
})
map.addLayer({
id: "lines",
type: "line",
source: "exampleFeatures",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#888",
"line-width": 4,
},
});
map.addLayer({
id: "polygons",
type: "fill",
source: "exampleFeatures",
paint: {
"fill-color": "#888888",
"fill-opacity": 0.4,
},
filter: ["==", "$type", "Polygon"],
});
map.addLayer({
id: "points",
type: "circle",
source: "exampleFeatures",
paint: {
"circle-radius": 6,
"circle-color": "#B42222",
},
filter: ["==", "$type", "Point"],
});
}})
function *createMapView({postProcessMap, width = defaultWidth} = {}) {
const h = getHeight(width);
console.log({width, h})
const container = html`<div style="width:${width}px;height:${getHeight(width)}px;">`;
yield container; // Give the container dimensions.
// Initialize the map
const map = container.value = new mapboxgl.Map({
container,
style: mapStyle,
scrollZoom: true,
maxBounds: [3, 1].map(i => images.overview.bounds[i]),
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
invalidation.then(() => map.remove());
if (postProcessMap) {
map.on("load", () => postProcessMap(map));
}
}
images = ({
overview: {
url: await FileAttachment("aerial-image.png").url(),
bounds: [
[17.5764426321, 59.8581348075],
[17.5872125208, 59.8581348075],
[17.5872125208, 59.8538294394],
[17.5764426321, 59.8538294394],
],
size: {
width: 1000,
height: 793,
},
},
trainingGrounds: {
url: await FileAttachment("DJI_0024.JPG").url(),
bounds: [
[17.582363423559883, 59.85511434238694],
[17.583271083546663, 59.85596571723141],
[17.58425135507281, 59.85570153430976],
[17.583309375631757, 59.85484751688563],
],
size: {
width: 4000,
height: 2250,
},
}
});
defaultWidth = width;
getHeight = width => images.overview.size.height / images.overview.size.width * width;
mapStyle = {
return {
'version': 8,
'name': 'Uppsala Survival',
'sources': {
'overviewOverlay': {
'type': 'image',
'url': images.overview.url,
'coordinates': images.overview.bounds
},
'trainingGroundsOverlay': {
'type': 'image',
'url': images.trainingGrounds.url,
'coordinates': images.trainingGrounds.bounds,
}
},
'layers': [
{
'id': 'overviewOverlay',
'source': 'overviewOverlay',
'type': 'raster',
'paint': {
'raster-opacity': 1,
'raster-saturation': rasterSaturation,
'raster-brightness-min': rasterBrightnessMin,
'raster-brightness-max': rasterBrightnessMax,
}
},
{
'id': 'trainingGroundsOverlay',
'source': 'trainingGroundsOverlay',
'type': 'raster',
'minzoom': 17,
'paint': {
'raster-opacity': 1,
'raster-saturation': rasterSaturation,
'raster-brightness-min': rasterBrightnessMin,
'raster-brightness-max': rasterBrightnessMax,
}
},
]
};
}
mapboxgl = {
const gl = await require("mapbox-gl@1");
// https://www.mapbox.com/help/how-access-tokens-work/
gl.accessToken = ""; // No need for an access token since we're not fetching anything from Mapbox's APIs.
const href = await require.resolve("mapbox-gl@1/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
return gl;
}
import {slider} from "@jashkenas/inputs"
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.
