Published
Edited
Jun 28, 2020
1 star
mapConfig = {
return {
// this field is temporarily modified during a travel on a map
viewConfig: {
center: [-74.5, 40.0],
zoom: 9,
bearing: 0,
pitch: 0
}
}
}
html`<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />`
html`<style>
.mapbox-comparison-container {
position: relative;
width: 100%;
height: 400px;
}
.mapbox-map-container {
width: 100%;
height: 100%;
}
.mapbox-map-container.left-map {
position: absolute;
left: 0;
top: 0;
}
.mapbox-map-container.right-map {
position: absolute;
left: 410px;
top: 0;
}
.mapbox-comparison-container .mapbox-map-container {
width: 400px;
}
.mapbox-map-container .map-body {
width: 100%;
height: 100%;
}
</style>`
html`<style>
.layer-selection-form label {
width: 100%; /* forces text wrap around. */
}
</style>`
mapboxgl = require('mapbox-gl@1.11.0')
function getViewConfig (map) {
return {
center: map.getCenter(),
zoom: map.getZoom(),
pitch: map.getPitch(),
bearing: map.getBearing()
}
}
function flyTo (map, viewConfig) {
map.flyTo(viewConfig)
}
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.
