2

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.

0

1 Answer 1

1

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!");
    }
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.