Published
Edited
May 29, 2020
Insert cell
Insert cell
Insert cell
viewof m = mapboxMap('https://locationinsights.co.uk/maps/8a818dbd-c989-4c85-981d-af6ad4785b9a/style.json')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Call this function to embed a MapboxGL map with the specified style. You can pass additional options.
// See https://www.mapbox.com/mapbox-gl-js/api/#map for possible options.
// Use 'viewof m = map(...)' to embed the map and get a reference to the MapboxGL Map instance
function* mapboxMap(style, options = {}) {
const defaultOptions = {
height: 600,
scrollZoom: true,
// center: [148.9819, -35.3981],
center: [-121.89955817111, 37.33147675195],
zoom: 17,
pitch: 30
};
// Apply default options
options = Object.assign({}, defaultOptions,options, {style});
// Create and yield the container first so that the map can be attached to it
const container = options.container = html`<div style='height:${options.height}px;'></div>`;
yield container;
// Create the MapboxGL Map object
const map = new mapboxgl.Map(options);
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
// The container value is a promise that resolves to the map once it has fully loaded
// This allows referencing cells to safely use the MapboxGL API.
container.value = new Promise((resolve) => {
map.on('load', () => {
resolve(map);
map.addSource('site', getSiteJson());
map.addSource('bulks', getBulksJson());
map.addLayer({ 'id': 'site', 'type': 'line', 'source': 'site',
'paint': { 'line-color': 'grey', 'line-width': 3, 'line-dasharray': [4, 1] }
});
map.addLayer({ 'id': 'bulks', 'type': 'fill-extrusion', 'source': 'bulks',
'paint': {
'fill-extrusion-color': ['get', 'color'],
'fill-extrusion-height': ['get', 'extrude-height'],
'fill-extrusion-opacity': 0.8
}
});
map.addLayer({ 'id': 'envelope', 'type': 'fill-extrusion', 'source': 'site',
'paint': { 'fill-extrusion-color': '#ffbbff', 'fill-extrusion-height': 10, 'fill-extrusion-opacity': 0.2 }
});
var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false });
map.on('mouseenter', 'bulks', function(e) {
var description = e.features[0].properties.description;
var centroid = JSON.parse(e.features[0].properties.centroid);
popup.setLngLat(centroid).setHTML(description).addTo(map);
});
map.on('mouseleave', 'bulks', function() { popup.remove(); });
});
});
// Clean up the map on invalidation
try {
yield invalidation;
} finally {
map.remove();
}
}
Insert cell
// Call this function in your notebook to load the MapboxGL stylesheet
loadStyleSheet = () => html`<link href='https://unpkg.com/mapbox-gl@1.5.0/dist/mapbox-gl.css' rel='stylesheet' />`
Insert cell
Insert cell
mapboxgl = {
let mapboxgl = await require('mapbox-gl@1.5.0');
mapboxgl.accessToken = 'pk.eyJ1IjoiZGF2aWQ3MzMiLCJhIjoib0xTS3RGMCJ9.zFbF075clGeX7BOOARqISg';
return mapboxgl;
}
Insert cell
threejs = {
let threejs = await require('three@0.106.2');
return threejs;
}
Insert cell
Insert cell

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.
Learn more