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

coordinatesjavascriptmapbox-gl-jsturf

I am new to GIS world and looking to get coordinates of the polygon drawn on mapbox map , so that i can pass the coordinates to my python program. In below program I am trying to capture all co-ordinate in the array "polyCoord" and display first value when calculate button is hit, just to see if data is getting captured

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
    .calculation-box {
        height: 140px;
        width: 150px;
        position: absolute;
        top: 210px;
        left: 10px;
        background-color: rgba(255, 255, 255, .9);
        padding: 15px;
        text-align: center;
    }

    #calculate {
        min-height: 20px;
        background-color: #3887be;
        color: #fff;
        font-family: 'Open Sans';
        border-radius: 5px;
        padding: 10px;
        cursor: pointer;
        margin: 10px 0;
    }

    p {
        font-family: 'Open Sans';
        margin: 0;
        font-size: 13px;
    }
</style>

<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.16.0/mapbox-gl-draw.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.16.0/mapbox-gl-draw.css' type='text/css'/>
<div id='map'></div>
<div class='calculation-box'>
    <p>Draw a polygon using the draw tools.</p>
    <div id='calculate' class='button button'>Calculate area</div>
    <div id='calculated-area'></div>
</div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicnVjaGl0Z2FyZyIsImEiOiJlMGE3MDc1NjYyYjViYzk0ZWViNzJjNzg4MjZmYjc2OCJ9.FTIkEHn2TR64Ndim1tgL2Q';
/* eslint-disable */
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/satellite-v9', //hosted style id
    center: [-91.874, 42.760], // starting position
    zoom: 12 // starting zoom
});

var draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        polygon: true,
        trash: true
    }
});
map.addControl(draw);

var calcButton = document.getElementById('calculate');
calcButton.onclick = function() {
    var data = draw.getAll();

var polyCoord = turf.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!");
    }
};

</script>

</body>
</html>

At the moment, on click of calculate nothing shows up, probably statement " var polyCoord = turf.coordAll(data);" is not valid.

Best Answer

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

What I suggest is:

  1. 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)
  2. Include that script in the body of your page instead of the turf.min.js CDN
  3. 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!");
    }
};
Related Question