Software construction worker.
Published
Edited
May 25, 2019
2 forks
5 stars
{
const mapboxgl = await require("mapbox-gl");
const mapboxGlGeocoder = await require('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js');
let container = html`<div style='height:600px;' />`;
mapboxgl.accessToken = 'pk.eyJ1IjoibGF0aW1lcyIsImEiOiJjajhvcXRraGUwNnlwMzNyczR3cTBsaWh1In0.0cPKLwe2A0ET4P5CtWSiLQ';
const map = new mapboxgl.Map({
container: container,
style: 'mapbox://styles/mapbox/streets-v11',
center: [-58.4473, -34.6229],
zoom: 9
});
map.addControl(new mapboxGlGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
}));
const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
const href2 = await require.resolve('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css')
document.head.appendChild(html`<link href=${href2} rel=stylesheet>`);
yield container
}
html`<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/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.
