--- title: "Show drawn polygon area | JavaScript maps SDK" description: "Use mapbox-gl-draw to draw a polygon and Turf.js to calculate its area in square meters." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Show drawn polygon area Use [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw) to draw a polygon and [Turf.js](https://turfjs.org/) to calculate its area in square meters. ### NPM module setup ```bash npm install --save @maptiler/sdk @mapbox/mapbox-gl-draw @turf/turf ``` #### main.js ```js import { Map, MapStyle, config } from '@maptiler/sdk'; import '@maptiler/sdk/dist/maptiler-sdk.css'; import MapboxDraw from '@mapbox/mapbox-gl-draw'; import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'; import * as turf from '@turf/turf'; config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE'; const map = new Map({ container: 'map', // container id style: MapStyle.STREETS, //hosted style id center: [-91.874, 42.76], // starting position zoom: 12 // starting zoom }); const draw = new MapboxDraw({ displayControlsDefault: false, controls: { polygon: true, trash: true } }); map.addControl(draw); //fix conytrols style const drawControls = document.querySelectorAll(".mapboxgl-ctrl-group.mapboxgl-ctrl"); drawControls.forEach((elem) => { elem.classList.add('maplibregl-ctrl', 'maplibregl-ctrl-group'); }); 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 to area to 2 decimal points const rounded_area = Math.round(area * 100) / 100; answer.innerHTML = '

' + rounded_area + '

square meters

'; } else { answer.innerHTML = ''; if (e.type !== 'draw.delete') alert('Use the draw tools to draw a polygon!'); } } ``` #### index.html ```html Show drawn polygon area | NPM example

Draw a polygon using the draw tools.

``` #### style.css ```css body {margin: 0; padding: 0;} #map {position: absolute; top: 0; bottom: 0; width: 100%;} ``` ### Basic JavaScript setup ```html Show drawn polygon area

Draw a polygon using the draw tools.

``` ## Related examples ### [Measure distances](https://docs.maptiler.com/sdk-js/examples/measure/) Examples To calculate distances on the map, simply click on different points to create lines that will measure the distances using turf.length. ### [Geocoding limit results by a drawn area](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-draw-bbox/) Examples Limit geocoding search results to a drawn polygon bounding box. ### [Add a pattern to a polygon](https://docs.maptiler.com/sdk-js/examples/fill-pattern/) Examples Draw polygons using repeating image patterns with fill-pattern.