CODEWITHSUNDEEP
javascriptmapsmapbox
Shane Jones
Shane Jones

Reputation: 905

Drawing lines dynamically between markers

I'm just getting to grips with the amazing MapBox.

On my map I have a dropdown that loads new markers and removes the old ones, that is all working fine (code is below). 

var pin_layer = L.mapbox.featureLayer().addTo(map);

$('select.traveller').on('change',function(){

    map.removeLayer(pin_layer);

    pin_layer = L.mapbox.featureLayer().addTo(map);

    var markers = '[';

    $.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){

        $.each( data, function(k, item) {

            markers += '{    "type": "Feature",' +
            '"geometry": { ' +
            '"type": "Point", ' +
            '"coordinates": ['+item.long+', '+item.lat+']},' +
            '"properties": {' +
            '"id": "'+item.id+'",' +
            '"image": "'+item.image+'",' +
            '"marker-symbol": "star",' +
            '"marker-color": "#ff8888",' +
            '"marker-size": "large",' +
            '"title": "'+item.title+'", ' +
            '"description": "'+item.description+'"' +
            '}' +
            '},';

        });

        markers = markers.substring(0, markers.length - 1);
        markers += ']';


        pin_layer.setGeoJSON(JSON.parse(markers));



    },'json');
})

I'm now looking to draw lines between the markers in the order that they are added. i.e. Marker 1 to marker 2, marker 2 to marker 3 etc. I've tried using the code at the below link but it's not drawing any of the lines, its also not throwing any errors.

https://www.mapbox.com/mapbox.js/example/v1.0.0/line-marker/

Has anyone successfully done this or know of any example code for drawing the lines?

Upvotes: 1

Views: 3400

Answers (1)

iH8
iH8

Reputation: 28638

First off i got to say, you've got a very curious method of building that array of markers. You could do this directly without the string/object conversion stuff. While you are looping your data you can immediately create an array with the coordinates for the linestring, in code with comments for explanation:

$.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){

    // Create empty featureLayer
    var featureLayer = L.mapbox.featureLayer().addTo(map);

    // Create empty featureCollection
    var featureCollection = {
        "type": "FeatureCollection",
        "features": []
    };

    // Create empty array to hold coordinates for line.
    var lineArray = [];

    // Looping over the data
    $.each(data, function (k, item) {

        // Create new feature object and push to featureCollection
        featureCollection.features.push({
            "type": "Feature",
            "properties": {
                "id": item.id,
                "title": item.title,
                "description": item.description,
                "image": item.image,
                "marker-symbol": "star",
                "marker-color": "#ff8888",
                "marker-size": "large"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    item.long,
                    item.lat
                ]
            }
        });

        // Add coordinates to the array at id position
        // Setting the key to ID will result in a sorted array
        lineArray[item.id] = [item.lat, item.long];

    });

    // Set featureCollection to featureLayer
    featureLayer.setGeoJSON(featureCollection);

    // Reset array keys to normal so L.Polyline can handle them
    // If your ID's are not consecutive or they didn't start with 0
    // you could end up with keys like: 1,2,5,8,9
    // linestring can't handle that, this resets the keys
    // to normal: 0,1,2,3,4,5,6 etc and keeps the order
    lineArray = lineArray.filter(function(){return true});

    // Creating polyline with array
    var polyline = L.polyline(lineArray).addTo(map);

},'json');

Here's a working example on Plunker: http://plnkr.co/edit/FM9u66BnbsQy39c8fast?p=preview

(Note that i'm using jquery's getJSON not what you are doing but you should get the same results)

Upvotes: 3

Related Questions