Published
Edited
Oct 31, 2018
5 stars
Insert cell
Insert cell
Insert cell
map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = new mapboxgl.Map({
container,
center: [-97.7549, 30.2386],
pitch: 45,
bearing: 215,
zoom: 19,
style: "mapbox://styles/mapbox/streets-v10",
//scrollZoom: false
});
map.on('style.load', function() {
// define the geojson source for both the map and the routing functions
map.addSource('heb-internal', {
'type': 'geojson',
'data': geojson
});
// set up a source for the route, empty for now
map.addSource('shortest-path', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
]
}
});

// add the empty route to the map
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'shortest-path',
'layout': {
'line-join': 'round'
},
'paint': {
'line-width': 8,
'line-color': '#ff0000',
}
});
// add the building geojson to the map
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
}
});
// set up the route parameters
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);
//var bezier = turf.bezierSpline(line, { sharpness: 0.9 });
//and add the path to the map
//this is just to get there quickly and will need refactoring
map.getSource('shortest-path').setData(line);
});
invalidation.then(() => map.remove());
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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