map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = new mapboxgl.Map({
container,
center: [-97.7549, 30.2386],
pitch: 45,
bearing: 215,
zoom: 19,
style: "mapbox://styles/mapbox/streets-v10",
});
map.on('style.load', function() {
map.addSource('heb-internal', {
'type': 'geojson',
'data': geojson
});
map.addSource('shortest-path', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
]
}
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'shortest-path',
'layout': {
'line-join': 'round'
},
'paint': {
'line-width': 8,
'line-color': '#ff0000',
}
});
map.addLayer({
'id': 'internal',
'type': 'fill-extrusion',
'source': 'heb-internal',
'layout': {},
'paint': {
'fill-extrusion-color': '#088',
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-opacity': 0.8
}
});
var start = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-97.75464811,30.23864893]
}
}
var finish = finishOptions.features[choice];
var path = pathFinder.findPath(start, finish);
console.log(path);
var line = turf.lineString(path.path);
map.getSource('shortest-path').setData(line);
});
invalidation.then(() => map.remove());
}