31:[] 2f:{"title":"Finding Safe Routes","cells":[{"id":0,"value":"md`# Finding Safe Routes `","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`### Import Packages\n
\n##### We will be using:
\n##### *Leaflet:* Creates mobile friendly, interactive webmaps
\n##### *TurfJs:* geospatial analysis in the browser
\n##### *Pathfinder:* routing library\n
\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"turf = require('@turf/turf')","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"PathFinder = require('https://bundle.run/geojson-path-finder@1.5.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md `### Initialize Leaflet Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"L = require(\"leaflet@1.2.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"{\n const container = DOM.element('div', {style: `width:${width}px; height:350px` });\n yield container;\n \n //Create a map object and add a layer\n let map = L.map(container).setView([7,30], 6);\n let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n var roadsLayer = L.geoJson(south_sudan_roads, {\n weight: 2,\n color: '#006400'}).addTo(map); \n L.geoJson(buffered_danger_zones, {\n fillColor: '#ff0000', color: 'ff0000', fillOpacity: 1}).addTo(map);\n roadsLayer.on('click', function(ev){\n var latlng = map.mouseEventToLatLng(ev.originalEvent);\n console.log(latlng.lat + ', ' + latlng.lng);\n }); \n L.geoJson(safe_route, {\n weight: 2,\n color: '#FF7F50'}).addTo(map);\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`### Import Roads\nImport a vector layer with street information. `","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"south_sudan_roads = fetch('https://build-peace.s3-us-west-1.amazonaws.com/2019/south_sudan_roads.geojson').then(response => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"{\n const container = DOM.element('div', {style: `width:${width}px; height:350px` });\n yield container;\n \n //Create a map object and add a layer\n let map = L.map(container).setView([7,30], 6);\n let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n L.geoJson(south_sudan_roads, {\n weight: 2,\n color: '#006400'}).addTo(map); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`####`","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"reformatted_road_segments = turf.lineSegment(south_sudan_roads)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Import Obstacle boundaries\n\nThese are polygon boundaries for areas of risk which should be avoided.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"attack_points = fetch('https://build-peace.s3-us-west-1.amazonaws.com/2019/sudan-danger-zones.geojson').then(response => response.json())\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`#### We want to create a safety buffer for travelers. For this we will use the TurfJs \"buffer\" function described below:\n\nBuffer\nCalculates a buffer for input features for a given radius. Units supported are miles, kilometers, and degrees.\n\nInput: (feature, buffer_distance, {units: \"kilometers/miles\"})\noutput: an array of polygons representing the buffered radius around each point`","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"buffered_danger_zones = (\n {\n type: \"FeatureCollection\",\n features: attack_points.features.map(feature => turf.buffer(feature, 15, {units: \"kilometers\"}))\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"{\n const container = DOM.element('div', {style: `width:${width}px; height:350px` });\n yield container;\n \n //Create a map object and add a layer\n let map = L.map(container).setView([7,30], 6);\n let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n L.geoJson(buffered_danger_zones, {\n fillColor: '#ff0000', color: 'ff0000', fillOpacity: 1}).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`#### Define start and end points`","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"start = turf.point([31.295289057004652, 4.513351433475179])","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"end = turf.point([29.501498756659409, 9.068501606906681])","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`### Find shortest route avoiding polygons of Unsafe Areas`","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"pathFinder = new PathFinder(reformatted_road_segments, {\n weightFn: function(a, b, props) {\n const lineString = turf.lineString([a, b]);\n if (turf.lineIntersect(lineString, buffered_danger_zones).features.length > 0) {\n return 100000000;\n }\n var dx = a[0] - b[0];\n var dy = a[1] - b[1];\n return Math.sqrt(dx * dx + dy * dy);\n }})","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"route = pathFinder.findPath(start, end)","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"safe_route = turf.lineString(route.path)","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"{\n const container = DOM.element('div', {style: `width:${width}px; height:350px` });\n yield container;\n \n //Create a map object and add a layer\n let map = L.map(container).setView([7,30], 6);\n let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n L.geoJson(safe_route, {\n weight: 2,\n color: '#FF7F50'}).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}