I'm starting to take my first steps using Leaflet Routing Machine. Everything works fine if I use load waypoints when I create my L.Routing.control and add it to the map. Now I'd like to start my map without waypoints and after starting to editing points in my map. I've tried to use:
waypoints: [null]
This doesn't work: a blank map appears.
Here's my complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Leaflet Routing Machine Example</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<link rel="stylesheet" href="LeafletRoutingMachine/dist/leaflet-routing-machine.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"/>
<link rel="stylesheet" href="css/easy-button.css"/>
<style>
.map {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="LeafletRoutingMachine/dist/leaflet-routing-machine.js"></script>
<script src="LeafletRoutingMachine/examples/Control.Geocoder.js"></script>
<script src="lib/easybutton/easy-button.js"></script>
<script>
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(map);
function button(label, container) {
var btn = L.DomUtil.create('button', '', container);
btn.setAttribute('type', 'button');
btn.innerHTML = label;
return btn;
}
var control = L.Routing.control({
waypoints: [null],
// waypoints: [ L.latLng(44.91221, 7.671685), L.latLng(44.907852, 7.673789) ],
routeWhileDragging: true,
show: true,
language: 'it',
geocoder: L.Control.Geocoder.nominatim(),
autoRoute: true
}).addTo(map);
map.on('click', function (e) {
var container = L.DomUtil.create('div'),
startBtn = button('Start from this location', container),
destBtn = button('Go to this location', container);
L.DomEvent.on(startBtn, 'click', function () {
control.spliceWaypoints(0, 1, e.latlng);
map.closePopup();
});
L.DomEvent.on(destBtn, 'click', function () {
control.spliceWaypoints(control.getWaypoints().length - 1, 1, e.latlng);
map.closePopup();
});
L.popup().setContent(container).setLatLng(e.latlng).openOn(map);
});
L.easyButton('<span class="fa fa-floppy-o"></span>', function () {
alert('Save routing coordinates ...');
}).addTo(map);
</script>
</body>
</html>
In this case this is the result:
Otherwise if I use this Routing.control definition:
var control = L.Routing.control({
// waypoints: [null],
waypoints: [
L.latLng(44.91221, 7.671685),
L.latLng(44.907852, 7.673789)
],
routeWhileDragging: true,
show: true,
language: 'it',
geocoder: L.Control.Geocoder.nominatim(),
autoRoute: true
}).addTo(map);
The result is this:
Any suggestions, examples, or jsfiddles to help me?
