JSFiddle - React, Tailwind, and code Playground

changing router parameters on the fly in leaflet routing machine (with GraphHopper)

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<script src="https://rawgit.com/perliedman/leaflet-routing-machine/master/dist/leaflet-routing-machine.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/perliedman/leaflet-routing-machine/master/dist/leaflet-routing-machine.css">
<script src="https://rawgit.com/perliedman/leaflet-routing-machine/master/examples/Control.Geocoder.js"></script>
<script src="//www.liedman.net/lrm-graphhopper/dist/lrm-graphhopper-1.1.2.min.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background: white;
}

.leaflet-routing-container {
  display:none;
}

JavaScript

/////////////////////////////////////////////////////////////////////////////////////////////
//initialize map//
/////////////////////////////////////////////////////////////////////////////////////////////
var map = L.map('map').setView([57.7,11.94], 11);
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

/////////////////////////////////////////////////////////////////////////////////////////////
//initialize routing control//
/////////////////////////////////////////////////////////////////////////////////////////////
var control = L.Routing.control({
  waypoints: [
    L.latLng(57.74, 11.94),
    L.latLng(57.6792, 11.949)
  ],
  routeWhileDragging: true,
  geocoder: L.Control.Geocoder.nominatim(),
  router: L.Routing.graphHopper('a585904f-5193-4605-bc3c-870c4f472177' , {
    urlParameters: {
        vehicle: 'car'
    }
  })
}).addTo(map);

console.log(control.getRouter().options.urlParameters.vehicle);

/////////////////////////////////////////////////////////////////////////////////////////////
//switch to pedestrian router//
/////////////////////////////////////////////////////////////////////////////////////////////
control.getRouter().options.urlParameters.vehicle = "foot";
control.route();
console.log(control.getRouter().options.urlParameters.vehicle);