Re-drawing drawn mapbox GL features

Question

I am developing an application using angular 1.5 and the javascript Mapbox GL library.

I've loaded the https://github.com/mapbox/mapbox-gl-draw/ plugin to enable users to draw their own lines and polygons. This works wonderfully.

Now I want the drawn lines to be persistent. So when the user leaves the page and returns the previously drawn lines are re-drawn and can be edited and deleted as you'd expect.

To save the drawn lines I listen for the draw.create event, use the Draw.getAll() to grab all drawn layers and save them somewhere so it's available throughout my application.

So far so good.

Now for the persistence part; whenever I re-visit the map's page, I have all the data I need and use the following API call to attempt to re-draw the features.

function reDrawRoutes(){
    var id = Draw.add(scope.model.drawn_routes);
}

I have also tried the following method (as both should have similar outcomes according to the mapbox-gl-draw docs):

function reDrawRoutes(){
    var id = Draw.set(scope.model.drawn_routes);
}

FYI; the scope.model.drawn_routes contains an array of objects like this:

Array[1]
    0: Object
        geometry: Object
            coordinates: Array[2]
            type: "LineString"
        id: "23f7fd3af36d6ba6ea02907b10f40391"
        properties: Object
            type: "Feature"

Now for the strange part;

Whenever I call the above method, no apparent changes are made. However! When I press the "draw line" or "draw polygon" buttons the routes are actually drawn on the map!

So there is something going on I'm missing. I dug a bit deeper and called the Draw.getAll() right after I called the Draw.set()/add() method and I see my added feature like you'd expect.

But when I called the Draw.getAll() method right after the draw.mode_changed (which fires after i click the draw line/polygon buttons) event fires I see that there's suddenly an extra feature. So clicking the buttons actually creates the lines I want to draw.

Draw.getAll() results after calling Draw.set(scope.model.drawn_routes):

Object
    type: "FeatureCollection"
    features: Array[1]
        0: Object
            type: "Feature"
            geometry: Object
                coordinates: Array[2]
                type: "LineString"
            id: "b89da95478ca83d653cf9756a1531f0b"
            properties: Object
                // empty object

Draw.getAll() results after clicking either the draw line or draw polygon button:

Object
    type: "FeatureCollection"
    features: Array[2]
        0: Object
            type: "Feature"
            geometry: Object
                coordinates: Array[2]
                type: "LineString"
            id: "b89da95478ca83d653cf9756a1531f0b"
            properties: Object
                // empty object

        1: Object
            type: "Feature"
            geometry: Object
                coordinates: Array[0]
                type: "LineString"
            id: "79cad278991d533454612e2b783f5abe"
            properties: Object
                // empty object

So as you can see the second feature that shows up after click the draw controls doesn't even have coordinates.

So my question is: what is going on here? How can I re-draw the routes I've extracted and saved?

Matthew Whittemore Matthew Whittemore · Accepted Answer · 2017-04-03T15:17:25

Nick,

The problem you are having is because you are calling Draw.set() before the all the assets needs to render the map have been loaded. To fix this, make sure you are initializing Draw inside of the map.on('load', function() { ... }); callback. People often get load and style.load confused. load is the event you need to listen for.

Re-drawing drawn mapbox GL features

1 Answers