1

I'm trying to draw polyline to connect an array of waypoints. But I'm getting an empty div like this

enter image description here

instead of a map with route.

My code is this:

<script>
        // set center coordinates
        var centerlat = 48.05;
        var centerlon = 44.25;

        // set default zoom level
        var zoomLevel = 3;

        // initialize map
        var map = L.map('map-track').setView([centerlat,centerlon], zoomLevel);
        var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
        var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 18, attribution: osmAttrib});
        var lats = [];
        var lons = [];

        lats = ${lats};
        lons = ${lons};
        map.addLayer(osm);
//Here I fill an array with coordinates
            var wps = [];
            for (var j = 0; j < lats.length; j++){
                wps.push({latLng: L.latLng(lats[j], lons[j])});

            }
        L.Routing.control({
            polyline: wps,
            lineOptions: {styles: [{color: 'black', opacity: 0.15, weight: 9},
                {color: 'white', opacity: 0.8, weight: 6},
                {color: 'blue', opacity: 0.3, weight: 15}],
                addWaypoints: false},
            createMarker: function() { return null; },
            show: false
        }).addTo(map);
    </script>

where I've made a mistake?


Here I get an array of latitudes. The trouble is in these lines:

L.Routing.control({
            polyline: wps,
            lineOptions: {styles: [{color: 'black', opacity: 0.15, weight: 9},
                {color: 'white', opacity: 0.8, weight: 6},
                {color: 'blue', opacity: 0.3, weight: 15}],
                addWaypoints: false},
            createMarker: function() { return null; },
            show: false
        }).addTo(map);

If I write waypoints instead of polyline it works, but I need to make it with polyline.

  • 2
    Not sure about your lats = ${lats} lines… Messages in browser console? (F12 or Cmd+Alt+i on Mac) Able to reproduce your issue online? (JSFiddle, Plunker, etc.) – ghybs May 21 '16 at 11:07
0
L.Routing.control({
            waypoints: wps,
            lineOptions: {styles: [{color: 'black', opacity: 0.15, weight: 9},
                {color: 'white', opacity: 0.8, weight: 6},
                {color: 'blue', opacity: 0.3, weight: 15}],
                addWaypoints: false},
            createMarker: function() { return null; },
            show: false
        }).addTo(map);

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • 2
    Please try to expand your answer. – david_p Feb 26 '18 at 9:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.