Skip to content

Instantly share code, notes, and snippets.

@ebrelsford

ebrelsford/index.html

Created June 5, 2015 15:03
Show Gist options
  • Save ebrelsford/c659813a6fe0123f4874 to your computer and use it in GitHub Desktop.
Save ebrelsford/c659813a6fe0123f4874 to your computer and use it in GitHub Desktop.
Download ZIP
Bike routing with Valhalla // source http://jsbin.com/qepurisibe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://rawgit.com/jieter/Leaflet.encoded/master/Polyline.encoded.js"></script>
<meta charset="utf-8">
<title>Bike routing with Valhalla</title>
<style id="jsbin-css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"</div>
<script id="jsbin-javascript">
// A test using Valhalla from Mapzen:
// https://mapzen.com/projects/valhalla/
var base = 'http://valhalla.mapzen.com/route?';
var map,
directionsLayer;
var params = {
api_key: 'valhalla-wb-yvbM'
};
var json = {
costing:"bicycle",
directions_options: {
units: "miles"
}
};
var points = [
{
lat: 40.688448,
lon: -73.946915
},
{
lat: 40.621771,
lon: -73.982620
}
];
function findRoute(points) {
json.locations = [];
$.each(points, function (i, point) {
json.locations.push({
lat: point.lat,
lon: point.lon
});
});
$.getJSON(base + $.param(params) + '&json=' + JSON.stringify(json), function (response) {
var shape = L.polyline(L.PolylineUtil.decode(response.trip.legs[0].shape, 6));
console.log(shape.toGeoJSON());
directionsLayer.addLayer(shape);
});
}
$(document).ready(function () {
map = L.map('map').setView([40.70, -73.96], 11);
directionsLayer = L.layerGroup().addTo(map);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://mapbox.com">Mapbox</a>'
}).addTo(map);
findRoute(points);
map.on('click', function (e) {
if (points.length >= 2) {
points = [];
}
points.push({
lat: e.latlng.lat,
lon: e.latlng.lng
});
if (points.length >= 2) {
findRoute(points);
}
});
});
</script>
<script id="jsbin-source-css" type="text/css">html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// A test using Valhalla from Mapzen:
// https://mapzen.com/projects/valhalla/
var base = 'http://valhalla.mapzen.com/route?';
var map,
directionsLayer;
var params = {
api_key: 'valhalla-wb-yvbM'
};
var json = {
costing:"bicycle",
directions_options: {
units: "miles"
}
};
var points = [
{
lat: 40.688448,
lon: -73.946915
},
{
lat: 40.621771,
lon: -73.982620
}
];
function findRoute(points) {
json.locations = [];
$.each(points, function (i, point) {
json.locations.push({
lat: point.lat,
lon: point.lon
});
});
$.getJSON(base + $.param(params) + '&json=' + JSON.stringify(json), function (response) {
var shape = L.polyline(L.PolylineUtil.decode(response.trip.legs[0].shape, 6));
console.log(shape.toGeoJSON());
directionsLayer.addLayer(shape);
});
}
$(document).ready(function () {
map = L.map('map').setView([40.70, -73.96], 11);
directionsLayer = L.layerGroup().addTo(map);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://mapbox.com">Mapbox</a>'
}).addTo(map);
findRoute(points);
map.on('click', function (e) {
if (points.length >= 2) {
points = [];
}
points.push({
lat: e.latlng.lat,
lon: e.latlng.lng
});
if (points.length >= 2) {
findRoute(points);
}
});
});</script></body>
</html>
Raw
jsbin.qepurisibe.css
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
}
Raw
jsbin.qepurisibe.js
// A test using Valhalla from Mapzen:
// https://mapzen.com/projects/valhalla/
var base = 'http://valhalla.mapzen.com/route?';
var map,
directionsLayer;
var params = {
api_key: 'valhalla-wb-yvbM'
};
var json = {
costing:"bicycle",
directions_options: {
units: "miles"
}
};
var points = [
{
lat: 40.688448,
lon: -73.946915
},
{
lat: 40.621771,
lon: -73.982620
}
];
function findRoute(points) {
json.locations = [];
$.each(points, function (i, point) {
json.locations.push({
lat: point.lat,
lon: point.lon
});
});
$.getJSON(base + $.param(params) + '&json=' + JSON.stringify(json), function (response) {
var shape = L.polyline(L.PolylineUtil.decode(response.trip.legs[0].shape, 6));
console.log(shape.toGeoJSON());
directionsLayer.addLayer(shape);
});
}
$(document).ready(function () {
map = L.map('map').setView([40.70, -73.96], 11);
directionsLayer = L.layerGroup().addTo(map);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://mapbox.com">Mapbox</a>'
}).addTo(map);
findRoute(points);
map.on('click', function (e) {
if (points.length >= 2) {
points = [];
}
points.push({
lat: e.latlng.lat,
lon: e.latlng.lng
});
if (points.length >= 2) {
findRoute(points);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment