Published
Edited
Nov 18, 2021
4 stars
container = {
// Initialize the engine with a location and inject into page
var container = DOM.element('div');
container.style = `width:${width}px;height:500px`;
// api keys from the official demo
var datasource = {
elevation: {
apiKey: '12c27d08882df417c977cf5af64fd84f0'
},
imagery: {
apiKey: 'EIvJ3LPyMVsxeNd3Lyao',
urlFormat:
'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key={apiKey}',
attribution:
'<a href="https://www.maptiler.com/copyright/">Maptiler</a> <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
};
Procedural.init({ container, datasource });
Procedural.setCameraModeControlVisible(true);
Procedural.setCompassVisible(true);
Procedural.setUserLocationControlVisible(true);
Procedural.setRotationControlVisible(true);
Procedural.setZoomControlVisible(true);
Procedural.addBuiltinOverlay(['peaks', 'places']);
yield container;
}
html`<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.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.
