To boldly geo where no-one has geo'd before
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
locations = [
{name: "Loc. 1", center: [5.15722344, 52.29512444]},
{name: "Loc. 2", center: [4.90029047,52.37257180]},
{name: "Loc. 3", center: [5.11439793, 52.20078723]},
]
map3dtiles.flyTo(flytochoice.params)
maquettelocations = [
{name: "Naarden", params: {
bearing: 19,
center: { lng: 5.161204, lat: 52.293684 },
pitch: 41,
zoom: 15.94,speed:0.3 }
},
{name: "Windmolens", params: {
bearing: -10.9,
center: { lng: 4.762223, lat: 52.856257 },
pitch: 57,
zoom: 16.08,speed:0.3
} },
{name: "Leiden", params: {
bearing: 111.2,
center: { lng: 4.4827238, lat: 52.1540149 },
pitch: 46,
zoom: 19.19,speed:0.3
} }
]
threedeeconfig = {
return {
id: 'maquette',
dracoDecoderPath: "https://www.gstatic.com/draco/versioned/decoders/1.4.1/",
tilesets: [
{
"id": "GebouwenNL",
"url": "https://beta.geodan.nl/data/buildingtiles-dev/buildingtiles_nl_compressed_3857/tileset.json",
"horizonClip": true,
"horizonFactor": 200
}
,
{
"id": "Niveau0",
"url": "https://fileserv.beta.geodan.nl/i3dm/dev/nl_niveau_0/tileset.json",
"horizonClip": true,
"horizonFactor": 200
},
{
"id": "Niveau1",
"url": "https://fileserv.beta.geodan.nl/i3dm/dev/nl_niveau_1/tileset.json",
"horizonClip": true,
"horizonFactor": 200
},
{
"id": "Niveau2",
"url": "https://fileserv.beta.geodan.nl/i3dm/dev/nl_niveau_2/tileset.json",
"horizonClip": true,
"horizonFactor": 200
},
{
"id": "Niveau3",
"url": "https://fileserv.beta.geodan.nl/i3dm/dev/nl_niveau_3/tileset.json",
"horizonClip": true,
"horizonFactor": 200
}
]
}
}
center = location.center
map1.flyTo({center,zoom: 17})
map2.flyTo({center,zoom: 17})
maplibre = await require("maplibre-gl@1.14.0")
Mapbox3DTiles=require('@geodanresearch/mapbox-3dtiles@0.7.7/dist/Mapbox3DTiles_umd.js')
html`<link href="${await require.resolve(
"maplibre-gl@1.13.0-rc.2/dist/mapbox-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.
