An error occurred while loading the file. Please try again.
-
Santhanavanich authoredf4fadffb
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Draw a polygon and calculate its area</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style></head><body> <style> .calculation-box { height: 150px; width: 350px; position: absolute; bottom: 40px; left: 10px; background-color: rgba(255, 255, 255, 0.9); padding: 15px; text-align: center; } p { font-family: 'Open Sans'; margin: 0; font-size: 13px; } </style> <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script> <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script> <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css" type="text/css"> <div id="map"></div> <div class="calculation-box"> <p>Click the map to draw a polygon.</p> <div id="calculated-area"></div> </div> <script> var tmp; mapboxgl.accessToken = 'pk.eyJ1IjoidGh1bnlhdGhlcCIsImEiOiJjamFpOWV4a2gxd21vMndxdXd2M3VoY3hmIn0.jLlCscei0yH-ZHwcfxF_ug'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v11', // style URL center: [9.1829, 48.7758], // starting position [lng, lat] ° N, ° E zoom: 12 // starting zoom }); const draw = new MapboxDraw({ displayControlsDefault: false, // Select which mapbox-gl-draw control buttons to add to the map. controls: { polygon: true,
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
trash: true
},
// Set mapbox-gl-draw to draw by default.
// The user does not have to click the polygon control button first.
defaultMode: 'draw_polygon'
});
map.addControl(draw);
map.on('draw.create', updateArea);
map.on('draw.delete', updateArea);
map.on('draw.update', updateArea);
function updateArea(e) {
const data = draw.getAll();
tmp = data
coord = tmp.features[0].geometry.coordinates[0]
var maxlat = 0
var maxlng = 0
var minlat = 999
var minlng = 999
for (let index = 0; index < coord.length; index++) {
const element = coord[index];
lat = element[1]
lng = element[0]
if (lat> maxlat) {maxlat = lat}
if (lat< minlat) {minlat = lat}
if (lng> maxlng) {maxlng = lng}
if (lng< minlng) {minlng = lng}
}
const answer = document.getElementById('calculated-area');
if (data.features.length > 0) {
const area = turf.area(data);
// Restrict the area to 2 decimal points.
const rounded_area = Math.round(area * 100) / 100;
answer.innerHTML = `
<p><strong>${rounded_area}</strong></p><p>square meters</p>
min: ${minlat},${minlng}
max: ${maxlat},${maxlng}
`;
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete')
alert('Click the map to draw a polygon.');
}
}
</script>
</body>
</html>