Skip to content

Instantly share code, notes, and snippets.

@burritojustice

burritojustice/.block

Last active June 7, 2017 09:19
Show Gist options
  • Save burritojustice/134599469cd59a5f94ba702a1a5533f1 to your computer and use it in GitHub Desktop.
Save burritojustice/134599469cd59a5f94ba702a1a5533f1 to your computer and use it in GitHub Desktop.
Download ZIP
click2isochrone
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>click2isochrone</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://mapzen.com/js/mapzen.css">
<script src="https://mapzen.com/js/mapzen.min.js"></script>
<style>
html,body{margin: 0; padding: 0}
#map {
height: 100%;
width: 100%;
position: absolute;
}
.info {
background: rgba(255, 255, 255, 0.85);
padding: 5px 10px;
width: 250px;
border-radius: 5px;
}
.info p {
margin: 2px 0;
font-size: 10px;
}
.toggleButton {
cursor: pointer;
color: #2aa9e0;
}
.toggleButton:first-of-type {
margin-left: 5px;
};
</style>
</head>
<body>
<div id="map"></div>
<script>
var la = [34.0522, -118.2437];
var vancouver = [49.282, -123.1207];
var scene;
var lat, lng;
// var _20 = [5,10,15,20];
// var _60 = [15,30,45,60];
// var _90 = [15,30,60,90];
// var _120 = [30,60,90,120];
var bridges = [
{"lat": 34.13385, "lon": -118.1674916667 },
{"lat": 34.060155555599998,"lon": -118.1435805556},
{"lat": 33.901991666699999, "lon": -118.1091416667},
{"lat": 33.788588888900001, "lon": -118.1037472222},
{"lat": 33.765447222200002, "lon": -118.1034888889},
{"lat": 33.765336111099998, "lon": -118.10333611110001},
{"lat": 33.759486111100003, "lon": -118.0988555556},
{"lat": 33.759472222200003, "lon": -118.09628333329999},
{"lat": 33.774886111100002, "lon": -118.0907583333},
{"lat": 33.900425, "lon": -118.0613833333},
{"lat": 33.858638888900003, "lon": -118.0435333333},
{"lat": 34.095041666699998, "lon": -118.0275972222},
{"lat": 34.1041055556, "lon": -118.3237777778},
{"lat": 34.096333333300002, "lon": -118.3135138889},
{"lat": 34.0783916667, "lon": -118.2865277778},
{"lat": 34.078161111100002, "lon": -118.286525},
{"lat": 33.857872222200001, "lon": -118.2814277778},
{"lat": 33.823786111099999, "lon": -118.2425805556},
{"lat": 33.897186111099998, "lon": -118.2375361111},
{"lat": 33.8079194444, "lon": -118.23616944440001},
{"lat": 33.895813888900001, "lon": -118.2360388889},
{"lat": 33.824388888900003, "lon": -118.2301027778},
{"lat": 33.846530555599998, "lon": -118.2228694444},
{"lat": 34.008647222199997, "lon": -118.2181305556},
{"lat": 33.755883333299998, "lon": -118.205675}
]
var map = L.Mapzen.map('map', {
center: la,
zoom: 10,
debugTangram: true,
scene: 'scene.yaml'
// scene: 'https://mapzen.com/api/scenes/22/63/resources/default.yaml',
});
// Move zoom control to the top right corner of the map
map.zoomControl.setPosition('topright');
// Mapzen Search box (replace key with your own)
// To generate your own key, go to https://mapzen.com/developers/
var geocoder = L.Mapzen.geocoder('mapzen-JA21Wes');
geocoder.addTo(map);
// add lat/lon hash
L.Mapzen.hash({
map: map
});
// Control that shows feature info on click
var mode = 'auto';
var time = [15,30,45,60];
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<p id="controller"><table><tr><td><b>Travel Mode</b><br>' +
'<form id=modeRadio>' +
'<input type="radio" name=modes id=pedestrian value="pedestrian" >🚶<br>' +
'<input type="radio" name=modes id=bicycle value="bicycle" > 🚴<br>' +
'<input type="radio" name=modes id=auto value="auto" checked="checked"> 🚗<br>' +
'<input type="radio" name=modes id=multimodal value="multimodal"> 🚌 </form></p></td>'+
'<td><b>Isochrone minutes</b>' +
'<form><input type="radio" name=times id=20 value="[5,10,15,20]" > 5/10/15/20<br>' +
'<input type="radio" name=times id=60 value=[15,30,45,60] checked="checked" > 15/30/45/60<br>' +
'<input type="radio" name=times id=90 value=[15,30,60,90] > 15/30/60/90</br>' +
'<input type="radio" name=times id=120 value=[30,60,90,120] > 30/60/90/120</form></td></tr></p>';
};
info.setPosition('bottomleft');
info.addTo(map);
function onRadioClick(e) {
//build url
var mode = document.querySelector('input[name = "modes"]:checked').value;
var time = document.querySelector('input[name = "times"]:checked').value;
time = JSON.parse(time);
var url = 'https://matrix.mapzen.com/isochrone?json=';
var json = {
locations: [{"lat":lat, "lon":lng}],
costing: mode,
contours: [{"time":time[0]},{"time":time[1]},{"time":time[2]},{"time":time[3]}],
polygons: true,
denoise: 0.5,
generalize: 150,
avoid_locations: bridges // DON'T BOTHER TOGGLING THIS ONE
};
url += escape(JSON.stringify(json));
//grab the url
url+= '&api_key=mapzen-c4C1Lbb';
scene.setDataSource('isochrone_live', { type: 'GeoJSON', url: url });
console.log(mode + "/" + time);
console.log('url: ', url);
e.stopPropagation();
}
//click callback
function onMapClick(e) {
//build url
var mode = document.querySelector('input[name = "modes"]:checked').value;
var time = document.querySelector('input[name = "times"]:checked').value;
time = JSON.parse(time);
lat = e.leaflet_event.latlng.lat;
lng = e.leaflet_event.latlng.lng;
var url = 'https://matrix.mapzen.com/isochrone?json=';
var json = {
locations: [{"lat":lat, "lon":lng}],
costing: mode,
contours: [{"time":time[0]},{"time":time[1]},{"time":time[2]},{"time":time[3]}],
polygons: true,
denoise: 0.5,
generalize: 150,
avoid_locations: bridges // TOGGLE THIS ONE
};
url += escape(JSON.stringify(json));
//grab the url
url+= '&api_key=mapzen-c4C1Lbb';
scene.setDataSource('isochrone_live', { type: 'GeoJSON', url: url });
console.log(mode + "/" + time);
console.log('url: ', url);
}
// Add a control event listener
document.getElementById('controller').addEventListener('click', onRadioClick, false);
// Add a Tangram event listener
map.on('tangramloaded', function(e) {
var tangramLayer = e.tangramLayer;
scene = tangramLayer.scene;
tangramLayer.setSelectionEvents({
click: onMapClick
});
});
</script>
</body>
</html>
Raw
scene.yaml
import:
- https://tangrams.github.io/blocks/global.yaml
- https://tangrams.github.io/blocks/filter/height.yaml
- https://mapzen.com/carto/refill-style/7/refill-style.yaml
# - https://mapzen.com/carto/bubble-wrap-style/bubble-wrap.yaml
# - https://mapzen.com/carto/zinc-style/zinc-style.yaml
- https://mapzen-assets.s3.amazonaws.com/resources/demo.yaml
sources:
isochrone_polygons:
type: GeoJSON
url: https://s3.amazonaws.com/mapzen-assets/images/isochrone/isochrone_polygons.geojson
# isochrone_lines:
# type: GeoJSON
# url: https://gist.githubusercontent.com/burritojustice/928315fbb9a318c36cb8f5351cee10ff/raw/8fe29cf90d778c1ae7844442c18b0cfa3cf515d7/mexico_city.geojson
# isochrone API response saved as geojson for demo purposes
isochrone_live:
type: GeoJSON
url: 'https://matrix.mapzen.com/isochrone?json={"locations":[{"lat":53.5421,"lon":-113.4860}],"costing":"pedestrian","contours":[{"time":15},{"time":30},{"time":60},{"time":120}],"polygons":true,"denoise":0.2,"generalize":150}'
url_params:
api_key: global.sdk_mapzen_api_key
bridges:
type: GeoJSON
url: https://gist.githubusercontent.com/burritojustice/45f6d44fae5e3bfe2dd5c6776eaf151e/raw/b2134fb5db9f1c3436c922dbf1dcb256fd5f69d3/LA_25.geojson
layers:
_bridges:
data: { source: bridges}
draw:
points:
color: red
width: 2px
outline:
color: black
width: 2px
text:
text_source: |
function(){
if ($zoom > 11) {
return feature.descrip1 + "\n(" + feature.descrip2 + ")\n" + feature.deficiency_score + "/" + feature.deck + "/" + feature.superstructure + "/" + feature.substructure + "/" + feature.channel + "/" + feature.culvert + "\n" + feature.year
}
}
text_wrap: 20
font:
size: 10px
fill: blue
stroke:
color: white
width: 2
roads:
data: { source: mapzen, layer: roads }
filter: { not: { kind: rail } }
draw:
lines:
interactive: true
#color: black
width: 1px
order: global.feature_order
# but give them all the same outline
outline:
style: _outline
# color: white
# width: 2px
# blend: function() { if sdk_data_viz_road_friendly return 'multiply'; else return 'normal'}
isochrone_polygons:
data: { source: isochrone_live }
draw:
polygons:
order: |
function() {
return 100 - ((feature.contour/120) * 10) ;
}
color: |
function() {
return feature.fill;
}
#lines:
#order: 4000
#color: white
#width: [[10,.3px],[18,2px]]
# function() {
# return feature.fill;
# }
# width: [[10,2px],[18,10px]]
# outline:
# color: white
# width: [[10,2px],[18,4px]]
# isochrone_lines:
# data: { source: isochrone_lines}
# draw:
# lines:
# width: 5px
# order: 3500
# color: |
# function() {
# return feature.color; //
# }
# styles:
# _alpha_polygons:
# base: polygons
# blend: inlay
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment