Published
Edited
Nov 19, 2018
1 fork
map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = new mapboxgl.Map({
container,
center: [-95.7129, 37.0902],
zoom: 3,
style: "mapbox://styles/mapbox/light-v9",
});
const timeSlices = ts.seriesInfo.radar.series;
const timeSlice = timeSlices[timeSlices.length - 1].ts;
const twcUrl = 'https://api.weather.com/v3/TileServer/tile/radar?ts=' + timeSlice +
'&xyz={x}:{y}:{z}&apiKey=3f8ed76d96d94f1f8ed76d96d98f1fc0';
map.on("load", function() {
map.addSource('twcRadar', {
type: 'raster',
tiles: [twcUrl],
tileSize: 256
});
map.addLayer({
'id': 'radar',
'type': 'raster',
'source': 'twcRadar',
'layout': {
'visibility': 'visible'
}
}, 'aeroway-taxiway');
});
invalidation.then(() => map.remove());
}
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
// This is my token. https://www.mapbox.com/help/how-access-tokens-work/
gl.accessToken = "pk.eyJ1IjoiYnJhbmlnYW4iLCJhIjoiY2puM2lucjMzMGdlejNwcWdsMmoxZnFwdCJ9.mmh4Bjo-y_43TnFolyb17Q";
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
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.
