2f:null 30:["$","title",null,{"children":"Grocery Store Routing with GeoJSON Path Finder | jbranigan | Observable"}] 35:T7f8,map = { const container = html`

`; 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()); }36:T477,finishOptions = ({ "type": "FeatureCollection", "name": "destinations", "features": [ { "type": "Feature", "properties": { "Name": "Seafood" }, "geometry": { "type": "Point", "coordinates": [ -97.7548391, 30.2382504 ] } }, { "type": "Feature", "properties": { "Name": "Produce" }, "geometry": { "type": "Point", "coordinates": [ -97.7544914, 30.2385283 ] } }, { "type": "Feature", "properties": { "Name": "Nail care" }, "geometry": { "type": "Point", "coordinates": [ -97.754997783769213, 30.238429268502816 ] } }, { "type": "Feature", "properties": { "Name": "Hot Cereal" }, "geometry": { "type": "Point", "coordinates": [ -97.755308175443247, 30.238633674088895 ] } }, { "type": "Feature", "properties": { "Name": "Yogurt" }, "geometry": { "type": "Point", "coordinates": [ -97.755236875475447, 30.238585000195275 ] } }, { "type": "Feature", "properties": { "Name": "Salad Dressing" }, "geometry": { "type": "Point", "coordinates": [ -97.755386748638642, 30.238782007259253 ] } }, { "type": "Feature", "properties": { "Name": "Gluten Free" }, "geometry": { "type": "Point", "coordinates": [ -97.755349021369753, 30.238632502823982 ] } } ] })37:[] 33:{"id":"b946f33b56c4d1b9","slug":"grocery-store-routing-with-geojson-path-finder","title":"Grocery Store Routing with GeoJSON Path Finder","thumbnail":"bc0bd96f8ea0d5764e63717466299eb0c97933dfe7ad8f417fa24b810c77a43a","access_level":"public","create_time":"$D2018-10-24T15:37:17.658Z","update_time":"$D2020-02-17T18:26:55.710Z","view_time":null,"first_public_time":"$D2018-10-24T17:35:41.388Z","has_unpublished_edits":null,"fork":{"id":"092ed7c730734c79","slug":"heb-routing","title":"Grocery Store Routing with TurfJS","owner":{"id":"3734e46cc017e3a2","login":"jbranigan","name":""}},"stars":5,"starred":false,"owner":{"type":"team","id":"3734e46cc017e3a2","login":"jbranigan","name":"","avatar_url":"https://avatars-next.observableusercontent.com/967ced96aa7518104b7d7f665f8ee2282323f1664bdf9dde6c349c4bed774187","tier":"starter_2024"},"version":261,"publish_version":261,"role":null,"authored":false,"authors":[{"type":"individual","id":"74033eace9e09c30","login":"jbranigan","name":"","avatar_url":"https://avatars-next.observableusercontent.com/967ced96aa7518104b7d7f665f8ee2282323f1664bdf9dde6c349c4bed774187","tier":null}],"members":[{"type":"individual","id":"74033eace9e09c30","login":"jbranigan","name":"","avatar_url":"https://avatars-next.observableusercontent.com/967ced96aa7518104b7d7f665f8ee2282323f1664bdf9dde6c349c4bed774187","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Grocery Store Routing with GeoJSON Path Finder","cells":[{"id":0,"value":"md`# Grocery Store Routing with GeoJSON Path Finder`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"viewof choice = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n // This is my token. https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken = \"pk.eyJ1IjoiYnJhbmlnYW4iLCJhIjoiY2puM2lucjMzMGdlejNwcWdsMmoxZnFwdCJ9.mmh4Bjo-y_43TnFolyb17Q\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"turf = require(\"https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"PathFinder = require('https://bundle.run/geojson-path-finder@1.5.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"pathFinder = new PathFinder(netgrid, {precision: 2e-5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"geojson = fetch('https://gist.githubusercontent.com/jbranigan/4353a37b15baf6578d89f1e5625219d3/raw/2f2b204bf6501b3f00941b86f8775d538db9dbd6/heb-austin-45-internal.geojson').then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"netgrid = fetch('https://gist.githubusercontent.com/jbranigan/337a9faad0ca6715e85a21984fa72394/raw/f2cf656041cf19a46c180f2bbbdd62e1d2b41539/buffer-network.geojson').then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 34:"$33:body"