UN Smart Maps Lead. We keep web maps open for a better world.
Public
Edited
Sep 3, 2023
3 forks
1 star
viewof map = {
const container = yield html`<div style="height:600px">`;
const map = (container.value = new maplibregl.Map({
container,
zoom: 15.4,
center: [129.8817229270935, 32.74249903108975],
pitch: 51.467078189300416,
bearing: 132.77893004115117,
localIdeographFontFamily: '"Hiragino Maru Gothic ProN W4", "Meiryo", serif',
style: STYLE
}))
invalidation.then(() => map.remove());
}
C2 = fetch("https://optgeo.github.io/c2/style.json").then((resp) => resp.json())
UNITE = fetch("https://optgeo.github.io/unite-one/style.json").then((resp) => resp.json())
STYLE = (() => {
// add source
C2.sources.unite = UNITE.sources.v
// add layer
let layer = UNITE.layers[0]
layer.source = 'unite'
C2.layers.splice(
C2.layers.findIndex(layer => {return layer.id == 'wa'}),
0,
layer
)
return C2
})()
pmtiles = import("https://cdn.skypack.dev/pmtiles")
maplibregl = {
let m = await require("maplibre-gl")
let protocol = new pmtiles.Protocol();
m.addProtocol("pmtiles",protocol.tile);
yield m
}
[ map.getCenter(), map.getPitch(), map.getBearing() ]
{
const pmt = new pmtiles.PMTiles('https://cyberjapandata.gsi.go.jp/xyz/optimal_bvmap-v1/optimal_bvmap-v1.pmtiles')
return pmt.getHeader()
}
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.
