wardbeyens/bay_to_breakers.geojson

## bay_to_breakers.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              bay_to_breakers.geojson
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!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>

## site.js

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;
}

## water_fountains.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              water_fountains.geojson
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>

	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;
	}