Last active
August 2, 2021 07:51
-
-
Save morganherlocker/597e16852d95acafe5dc to your computer and use it in GitHub Desktop.
turf buffer example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Water fountains near Bay to Breakers</title> | |
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' /> | |
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> | |
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' /> | |
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
.small-input { width: 80px; vertical-align:middle; } | |
</style> | |
</head> | |
<body> | |
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v1.3.0/turf.min.js'></script> | |
<div id='map'></div> | |
<div class='pin-top fill-gray pad1'> | |
Water Fountains accessible within | |
<input type='number' id='radius' max='4000' min='0' class='clean short small-input' value='500' step='10' /> feet | |
of the Bay to Breakers race route. | |
<p class='small'>A GeoJSON route is buffered with <a target='_blank' href='https://github.com/Turfjs/turf-buffer'>turf-buffer</a> | |
and points are found with <a href='https://github.com/Turfjs/turf-within'>turf-within</a>.</p> | |
</div> | |
<script src='site.js'></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
L.mapbox.accessToken = '!!!your token here!!!'; | |
var map = L.mapbox.map('map', 'mapbox.dark', { zoomControl: false }); | |
map.scrollWheelZoom.disable(); | |
var bufferLayer = L.mapbox.featureLayer().addTo(map); | |
var raceRoute = L.mapbox.featureLayer().addTo(map); | |
var waterFountains = L.mapbox.featureLayer().addTo(map); | |
var waterFountainsInside = L.mapbox.featureLayer().addTo(map); | |
waterFountains.loadURL('./water_fountains.geojson') | |
.on('ready', done); | |
raceRoute.loadURL('./bay_to_breakers.geojson') | |
.on('ready', done); | |
var loaded = 0; | |
function done() { | |
if (++loaded !== 2) return; | |
raceRoute.setStyle({ color: 'hotpink', weight: 3 }); | |
map.fitBounds(raceRoute.getBounds()); | |
function run() { | |
var radius = parseInt(document.getElementById('radius').value); | |
if (isNaN(radius)) radius = 500; | |
var buffer = turf.buffer(raceRoute.getGeoJSON(), radius/5280, 'miles'); | |
var fountains = waterFountains.getGeoJSON(); | |
fountains.features.forEach(function(feature) { | |
feature.properties['marker-color'] = '#111'; | |
feature.properties['marker-symbol'] = 'water'; | |
feature.properties['marker-size'] = 'small'; | |
}); | |
waterFountains.setGeoJSON(fountains); | |
bufferLayer | |
.setGeoJSON(buffer) | |
.setStyle({ | |
stroke: false, | |
fillColor: 'hotpink', | |
fillOpacity: 0.2 | |
}) | |
.eachLayer(function(layer) { | |
layer.bindLabel('Bay to Breakers Route', { noHide: true }); | |
}); | |
var fountainsInside = turf.within(waterFountains.getGeoJSON(), buffer); | |
fountainsInside.features.forEach(function(feature) { | |
feature.properties['marker-color'] = '#00f'; | |
feature.properties['marker-symbol'] = 'water'; | |
feature.properties['marker-size'] = 'large'; | |
}); | |
waterFountainsInside | |
.setGeoJSON(fountainsInside) | |
.eachLayer(function(layer) { | |
layer.bindLabel('Accessible water fountain'); | |
}); | |
} | |
run(); | |
document.getElementById('radius').onchange = run; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment