CODEWITHSUNDEEP
leafletpolyline
Ropstah
Ropstah

Reputation: 17804

Leaflet polylines not working

I'm trying to show Polylines in Leaflet but it doesn't seem to work. Am I missing anything or...? p.s. Coordinate pairs do not contain the same values, so it should yield lines...

//this adds markers to the map, which works
var d = {};
d.coordinates = [[lat,lng],[lat,lng]]

var latLngs = d.coordinates.map(function (c) {
    var marker = L.marker(c).addTo(map);
    return {
        lat: c[0],
        lng: c[1]
    };
});

//This 'should' add polylines but doesn't ... 
var polyline = L.polyline(d.coordinates, { color: 'red', weight: 12 }).addTo(map);

I tried all sorts of variations on the code above, varying with instantiation/factory method like: new L.polyline() vs L.polyline() and trying upper- and lowercase Polyline. I tried passing arrays of [double, double] and [L.LatLng, L.LatLng] and even [{lat:lat,lng:lng}] but nothing seems to work... I really must be overlooking a simple thing...

I'm using Leaflet 0.7.

Edit:

As shown in the jsFiddle by ghybs it should work. I updated my code to the following:

var firstpolyline = L.polyline(d.coordinates, {
    color: 'red',
    weight: 12
}).addTo(map);

I also added identical logging statements in both the jsFiddle and my solution.

console.log(firstpolyline); //polyline for jsFiddle

console.log(map);

console.log(d.coordinates);

Those yield this (left is custom solution which is not showing a line, right is jsFiddle which is showing a line). Manually copy-pasting different coordinates pairs of my solution to the jsFiddle just works...:

I'm really lost here :(

enter image description here

Upvotes: 1

Views: 3727

Answers (1)

ghybs
ghybs

Reputation: 53290

There is no reason to add an extra .polyline after the factory L.polyline().

var polyline2 = L.polyline(d.coordinates, {color: 'red', weight: 12}).addTo(map);

Demo: http://jsfiddle.net/ve2huzxw/48/

Side note: you should use a single equal sign (=) for assignment in d.coordinates == [[lat,lng],[lat,lng]]

Upvotes: 0

Related Questions