UN Smart Maps Lead. We keep web maps open for a better world.
viewof pane = {
const container = yield html`<div style="height:800px">`
const map = (container.value = new maplibregl.Map({
container,
zoom: 7.5,
center: [129.45159098652664, 33.64287234545043],
localIdeographFontFamily: '"Hiragino Maru Gothic ProN W4", "Meiryo", serif',
style: STYLE
}))
map.on('load', () => {
map.addControl(new maplibregl.FullscreenControl())
const { MapboxLayer, Tile3DLayer } = deck
const layer = new MapboxLayer({
id: '3d',
type: Tile3DLayer,
pointSize: 1.6,
data: TILESET_URL,
loader: loaders.Tiles3DLoader,
loadOptions: {
tileset: {
// viewDistanceScale: 1.2
}
}
})
map.addLayer(layer)
})
invalidation.then(() => map.remove());
}
TILESET_URL = 'https://smb.optgeo.org/ipfs/QmRbAYzAbZ4F8Azypk5B8j2QoRXbMZt5BmCucGWnnAv8ky/tileset.json'
deck = require('deck.gl@latest/dist.min.js')
loaders = require('@loaders.gl/3d-tiles@^2.3.0/dist/dist.min.js')
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
}
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
)
delete C2.terrain
return C2
})()
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.
