Draw a polygon and calculate its area
This examples allows you to draw a polygon on a map and calculate the area contained in the polygon.
- Click the map to begin drawing a polygon.
- Double-click when you draw the final vertex to complete the polygon. The total area of the polygon will appear in the lower left corner of the map.
- To delete your polygon and draw a new one, use the draw tools on the upper right corner of the map.
The example uses mapbox-gl-draw to draw the polygon and Turf.js to calculate its area in square meters.
<!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/v3.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.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: 75px;
width: 150px;
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.4.3/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/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>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/satellite-v9', // style URL
center: [-91.874, 42.76], // starting position [lng, lat]
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,
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();
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 = ``;
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete')
alert('Click the map to draw a polygon.');
}
}
</script>
</body>
</html>
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.import React, { useEffect, useRef, useState } from 'react';
import mapboxgl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import * as turf from '@turf/turf';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
const paragraphStyle = {
fontFamily: 'Open Sans',
margin: 0,
fontSize: 13
};
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
const [roundedArea, setRoundedArea] = useState();
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/satellite-v9',
center: [-91.874, 42.76],
zoom: 12
});
const draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
},
defaultMode: 'draw_polygon'
});
mapRef.current.addControl(draw);
mapRef.current.on('draw.create', updateArea);
mapRef.current.on('draw.delete', updateArea);
mapRef.current.on('draw.update', updateArea);
function updateArea(e) {
const data = draw.getAll();
if (data.features.length > 0) {
const area = turf.area(data);
setRoundedArea(Math.round(area * 100) / 100);
} else {
setRoundedArea();
if (e.type !== 'draw.delete') alert('Click the map to draw a polygon.');
}
}
}, []);
return (
<>
<div ref={mapContainerRef} id="map" style={{ height: '100%' }}></div>
<div
className="calculation-box"
style={{
height: 75,
width: 150,
position: 'absolute',
bottom: 40,
left: 10,
backgroundColor: 'rgba(255, 255, 255, 0.9)',
padding: 15,
textAlign: 'center'
}}
>
<p style={paragraphStyle}>Click the map to draw a polygon.</p>
<div id="calculated-area">
{roundedArea && (
<>
<p style={paragraphStyle}>
<strong>{roundedArea}</strong>
</p>
<p style={paragraphStyle}>square meters</p>
</>
)}
</div>
</div>
</>
);
};
export default MapboxExample;
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.Was this example helpful?