[GIS] Get coordinates from drawn items with Mapbox-gl-draw

coordinatesmap-drawingmapbox-gl-js

I'm using mapbox-gl-draw in my application and I need to get and save the coordinates of the drawn items on the map. I've checked and I found turf getCoor method, but I don't know how to access the info because I'm using the default set of tools, which you obtain thru the lines below

var Draw = mapboxgl.Draw();

map.addControl(Draw);

Can someone help me figure this out? I'm sure it's pretty easy, I just can't find as many examples online as I wanted it.

EDIT

Also, while trying to figure this out I got type error from turf, which it means just calling <script src='//api.tiles.mapbox.com/mapbox.js/plugins/turf/v1.3.0/turf.min.js'></script> in my html file didn't work. Am I including it wrong? with https: before the slashes didn't work either.

Best Answer

You could try using Draw.getAll().

It should return a feature collection containing all of the drawn features.

The reference for this is here.

Related Solutions

OpenLayers Coordinates – How to Get Coordinates of Drawn Features in OpenLayers

The drawn feature are added to the layer named vector. See draw interactions constructors.

// Get the array of features
var features = vector.getSource().getFeatures();

// Go through this array and get coordinates of their geometry.
features.forEach(function(feature) {
   console.log(feature.getGeometry().getCoordinates());
});

[GIS] How to get coordinates of all polygon drawn on mapbox

Turns out that Turf.coordAll() is not included in the standard Turf CDN as described in this issue.

What I suggest is:

Go to this app and download a build of Turf that only include Turf area and Turf meta (plus any other modules you may want)
Include that script in the body of your page instead of the turf.min.js CDN
Change your reference from turf.coordAll() toturf.meta.coordAll()

After I made those changes, your app works. Relevant code follows

var polyCoord = turf.meta.coordAll(data);

if (data.features.length > 0) {
        var area = turf.area(data);
        // restrict to area to 2 decimal points
        var rounded_area = Math.round(area*100)/100;
        var answer = document.getElementById('calculated-area');
        answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>'+ 'first co-ordinate' +polyCoord[0];
    } else {
        alert("Use the draw tools to draw a polygon!");
    }
};

Best Answer

Related Solutions

OpenLayers Coordinates – How to Get Coordinates of Drawn Features in OpenLayers

[GIS] How to get coordinates of all polygon drawn on mapbox

Related Question