function* mapboxMap(style, options = {}) {
const defaultOptions = {
height: 600,
scrollZoom: true,
center: [-121.89955817111, 37.33147675195],
zoom: 17,
pitch: 30
};
options = Object.assign({}, defaultOptions,options, {style});
const container = options.container = html`<div style='height:${options.height}px;'></div>`;
yield container;
const map = new mapboxgl.Map(options);
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
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(); });
});
});
try {
yield invalidation;
} finally {
map.remove();
}
}