Skip to content

Instantly share code, notes, and snippets.

@hanbyul-here

hanbyul-here/valhalla_ex.html

Created August 14, 2015 18:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hanbyul-here/45e627122da4b112dc0e to your computer and use it in GitHub Desktop.
Save hanbyul-here/45e627122da4b112dc0e to your computer and use it in GitHub Desktop.
Download ZIP
valhalla example
Raw
valhalla_ex.html
<!DOCTYPE html>
<html>
<head>
<title>My Valhalla Map</title>
<link rel="stylesheet" href="\leaflet\leaflet.css"/>
<link rel="stylesheet" href="\lrm-valhalla\leaflet.routing.valhalla.css"/>
<style>
#map {
height: 100%;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function loadMap(){
var map = L.map('map');
var layer = Tangram.leafletLayer({
scene: 'scene.yaml',
attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | <a href="http://www.openstreetmap.org/about" target="_blank">&copy; OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>',
});
layer.addTo(map);
L.Routing.control({
waypoints: [
L.latLng(38.968,-77.099),
L.latLng(38.907,-77.069)
],
router: L.Routing.valhalla('valhalla-yirqCm8', 'bicycle', {
bicycle: {
bicycle_type: "Road",
cycling_speed: 17,
use_roads: "0.1"
}
}),
formatter: new L.Routing.Valhalla.Formatter(),
summaryTemplate:'<div class="start">{name}</div><div class="info {transitmode}">{distance}, {time}</div>',
routeWhileDragging: false
}).addTo(map);
};
window.onload = loadMap;
</script>
<script src="\leaflet\leaflet.js"></script>
<script src="https://mapzen.com/tangram/0.2/tangram.min.js"></script>
<script src="\leaflet-routing-machine\leaflet-routing-machine.js"></script>
<script src="\lrm-valhalla\lrm-valhalla.js"></script>
<style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment