[GIS] Leaflet Routing Machine: how to initialise map without waypoints loaded

leafletrouting

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:

enter image description here

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:

enter image description here

Any suggestions, examples, or jsfiddles to help me?

Best Answer

The problem is that you are not initializing your map completely. The routing machine sets the map view for you when you give it waypoints, but without them, you need to tell the map where to start out. You can do this by specifying the view, either using .setView or the center and zoom options. Change the first line of your script to:

var map = L.map('map').setView([44.907852, 7.673789],16);

and everything will initialize correctly.

Related Question