Maps, Data, Viz, UX, Design
Public
Edited
Mar 13
Importers
1 star
map = {
const container = yield html`<div style="height:800px;">`;
const map = (container.value = new maplibregl.Map({
//interactive: false,
boxZoom: true,
pitch: 0,
bearing: 0,
maplibreLogo: true,
container,
center: [-73.95757, 40.658],
zoom: 12,
style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
scrollZoom: true
}));
map.on("load", () => {
map.addSource("nyc-likely-rs", {
type: "vector",
tiles: [tileUrl]
});
map.addLayer({
id: "likely-rs-data",
type: "fill",
source: "nyc-likely-rs",
// NOTE: figuring out the correct "source-layer" value required some detective work. I used [Vector Inspector](https://stevage.github.io/vector-inspector) to figure out the name to use for source-layer here.
"source-layer": "default",
paint: {
"fill-color": "#ff6600",
"fill-outline-color": "#ffffff",
"fill-opacity": 0.85
}
});
});
map.scrollZoom.disable();
map.addControl(new maplibregl.NavigationControl());
}
tileUrl = tileJson?.tiles?.[0]
tileJson = queryMapsApi(tilejsonParams)
tilejsonParams = tilejsonUrl ? tilejsonUrl.split("?")[1] : ""
tilejsonUrl = layerMetaData?.tilejson?.url?.[0]
layerMetaData = queryMapsApi(query)
queryMapsApi = async (query) => {
const encoded = query.startsWith("format")
? query
: `name=${encodeURIComponent(query)}`;
const url = `${endpointUrl}?${encoded}`;
const headers = new Headers({ Authorization: `Bearer ${apiKey}` });
const options = { headers };
try {
const res = await fetch(url, options);
const result = await res.json();
return result;
} catch (error) {
return error?.message || "couldn't query maps API";
}
}
url = `${endpointUrl}?q=${encodeURIComponent(query)}`
query = `${tableName}`
// table contains tileset data for MapBox Vector Tile format
tableName = "carto-dw-ac-ww0h1bs8.shared.mappluto_likely_rs_2020_v8_copy"
// NOTE: will only work with this ObservableHQ account, if forking this notebook you will need your own API key
apiKey = "eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfd3cwaDFiczgiLCJqdGkiOiJjYTZiZDY2NCJ9.OOJL-kwBC_DYY1Fi467j7vWbazRgd8mzrcTR9_HdYxE"
maplibregl = require("maplibre-gl@2.1.9")
html`<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.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.
