UN Smart Maps Lead. We keep web maps open for a better world.
Public
Edited
Dec 29, 2023
TILESET_URL = 'https://smb.optgeo.org/ipfs/QmXYBL9eeeB3VXc5sFhU3AySbJQevD29Nfu4ycd4RZsfA7/tileset.json'
viewof pane = {
const container = yield html`<div style="height:800px">`;
const map = (container.value = new maplibregl.Map({
container,
zoom: 10.3,
center: [24.94254730066325, 60.17663597648806],
style: "https://tile.openstreetmap.jp/styles/maptiler-toner-en/style.json"
}))
map.on('load', () => {
const { MapboxLayer, Tile3DLayer } = deck
const layer = new MapboxLayer({
id: '3d',
type: Tile3DLayer,
pointSize: 1.4,
opacity: 0.5,
data: TILESET_URL,
loader: loaders.Tiles3DLoader,
loadOptions: {
tileset: {
// viewDistanceScale: 1.2
}
}
})
map.addLayer(layer)
map.addControl(new maplibregl.FullscreenControl())
})
invalidation.then(() => map.remove());
}
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
}
{ return map.getCenter() }
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.
