Published
Edited
Nov 17, 2020
5 stars
md`# Finding Safe Routes `
md`### Import Packages
<br/>
##### We will be using:<br/>
##### *Leaflet:* Creates mobile friendly, interactive webmaps<br/>
##### *TurfJs:* geospatial analysis in the browser<br/>
##### *Pathfinder:* routing library
<br/>
`
turf = require('@turf/turf')
PathFinder = require('https://bundle.run/geojson-path-finder@1.5.1')
L = require("leaflet@1.2.0")
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
{
const container = DOM.element('div', {style: `width:${width}px; height:350px` });
yield container;
//Create a map object and add a layer
let map = L.map(container).setView([7,30], 6);
let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var roadsLayer = L.geoJson(south_sudan_roads, {
weight: 2,
color: '#006400'}).addTo(map);
L.geoJson(buffered_danger_zones, {
fillColor: '#ff0000', color: 'ff0000', fillOpacity: 1}).addTo(map);
roadsLayer.on('click', function(ev){
var latlng = map.mouseEventToLatLng(ev.originalEvent);
console.log(latlng.lat + ', ' + latlng.lng);
});
L.geoJson(safe_route, {
weight: 2,
color: '#FF7F50'}).addTo(map);
}
md`### Import Roads
Import a vector layer with street information. `
south_sudan_roads = fetch('https://build-peace.s3-us-west-1.amazonaws.com/2019/south_sudan_roads.geojson').then(response => response.json())
{
const container = DOM.element('div', {style: `width:${width}px; height:350px` });
yield container;
//Create a map object and add a layer
let map = L.map(container).setView([7,30], 6);
let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.geoJson(south_sudan_roads, {
weight: 2,
color: '#006400'}).addTo(map);
}
md`####`
reformatted_road_segments = turf.lineSegment(south_sudan_roads)
md`### Import Obstacle boundaries
These are polygon boundaries for areas of risk which should be avoided.
`
attack_points = fetch('https://build-peace.s3-us-west-1.amazonaws.com/2019/sudan-danger-zones.geojson').then(response => response.json())
md`#### We want to create a safety buffer for travelers. For this we will use the TurfJs "buffer" function described below:
Buffer
Calculates a buffer for input features for a given radius. Units supported are miles, kilometers, and degrees.
Input: (feature, buffer_distance, {units: "kilometers/miles"})
output: an array of polygons representing the buffered radius around each point`
buffered_danger_zones = (
{
type: "FeatureCollection",
features: attack_points.features.map(feature => turf.buffer(feature, 15, {units: "kilometers"}))
}
)
{
const container = DOM.element('div', {style: `width:${width}px; height:350px` });
yield container;
//Create a map object and add a layer
let map = L.map(container).setView([7,30], 6);
let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.geoJson(buffered_danger_zones, {
fillColor: '#ff0000', color: 'ff0000', fillOpacity: 1}).addTo(map);
}
md`#### Define start and end points`
start = turf.point([31.295289057004652, 4.513351433475179])
end = turf.point([29.501498756659409, 9.068501606906681])
md`### Find shortest route avoiding polygons of Unsafe Areas`
pathFinder = new PathFinder(reformatted_road_segments, {
weightFn: function(a, b, props) {
const lineString = turf.lineString([a, b]);
if (turf.lineIntersect(lineString, buffered_danger_zones).features.length > 0) {
return 100000000;
}
var dx = a[0] - b[0];
var dy = a[1] - b[1];
return Math.sqrt(dx * dx + dy * dy);
}})
route = pathFinder.findPath(start, end)
safe_route = turf.lineString(route.path)
{
const container = DOM.element('div', {style: `width:${width}px; height:350px` });
yield container;
//Create a map object and add a layer
let map = L.map(container).setView([7,30], 6);
let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.geoJson(safe_route, {
weight: 2,
color: '#FF7F50'}).addTo(map);
}
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.
