Area Calculation Demo

The interactive demo replicates the backend's get_area_in_hectares() function used in the EUDR GIS Auditor.

📍 Pre-loaded Examples:

Seven example polygons are already displayed with calculated areas.

✏️ Draw Your Own:

Click the polygon tool (⬟) in the left to draw a custom polygon and see the calculation in real-time.

`; container.appendChild(modal); const map = L.map(container).setView([8.497, 99.995], 15); L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", { attribution: 'Tiles © Esri', maxZoom: 19 }).addTo(map); const utmZones = { type: "FeatureCollection", features: Array.from({length: 60}, (_, i) => ({ type: "Feature", properties: {zone: i + 1 }, geometry: { type: "Polygon", coordinates: [[ [i * 6 - 180, -80], [i * 6 - 180, 80], [(i + 1) * 6 - 180, 80], [(i + 1) * 6 - 180, -80], [i * 6 - 180, -80] ]] } })) }; L.geoJson(utmZones, { style: { color: "blue", weight: 1, fillOpacity: 0.05 }, onEachFeature: (feature, layer) => { layer.bindTooltip(`UTM Zone ${feature.properties.zone}`, { permanent: false, direction: 'center' }); } }).addTo(map); const drawItems = new L.FeatureGroup(); map.addLayer(drawItems); const drawControl = new L.Control.Draw({ edit: { featureGroup: drawItems }, draw: { polygon: { shapeOptions: { color: '#e74c3c', weight: 2, fillOpacity: 0.4 } }, marker: false, polyline: false, rectangle: false, circle: false, circlemarker: false } }); map.addControl(drawControl); function calculateCentroid(coords) { const sum = coords.reduce((acc, p) => ({ lng: acc.lng + p.lng, lat: acc.lat + p.lat }), { lng: 0, lat: 0 }); return { lng: sum.lng / coords.length, lat: sum.lat / coords.length }; } function getUTMZone(lon) { return Math.floor((lon + 180) / 6) + 1; } function latLngToUTM(lat, lng, zone) { const a = 6378137.0; const e = 0.081819190842622; const k0 = 0.9996; const latRad = lat * Math.PI / 180; const lonRad = lng * Math.PI / 180; const lonOrigin = (zone - 1) * 6 - 180 + 3; const lonOriginRad = lonOrigin * Math.PI / 180; const N = a / Math.sqrt(1 - e * e * Math.sin(latRad) * Math.sin(latRad)); const T = Math.tan(latRad) * Math.tan(latRad); const C = (e * e / (1 - e * e)) * Math.cos(latRad) * Math.cos(latRad); const A = (lonRad - lonOriginRad) * Math.cos(latRad); const M = a * ((1 - e * e / 4 - 3 * e * e * e * e / 64 - 5 * e * e * e * e * e * e / 256) * latRad - (3 * e * e / 8 + 3 * e * e * e * e / 32 + 45 * e * e * e * e * e * e / 1024) * Math.sin(2 * latRad) + (15 * e * e * e * e / 256 + 45 * e * e * e * e * e * e / 1024) * Math.sin(4 * latRad) - (35 * e * e * e * e * e * e / 3072) * Math.sin(6 * latRad)); const easting = k0 * N * (A + (1 - T + C) * A * A * A / 6 + (5 - 18 * T + T * T + 72 * C - 58 * (e * e / (1 - e * e))) * A * A * A * A * A / 120) + 500000; const northing = k0 * (M + N * Math.tan(latRad) * (A * A / 2 + (5 - T + 9 * C + 4 * C * C) * A * A * A * A / 24 + (61 - 58 * T + T * T + 600 * C - 330 * (e * e / (1 - e * e))) * A * A * A * A * A * A / 720)); return { easting, northing: northing + (lat < 0 ? 10000000 : 0) }; } function calculateAreaInUTM(coords, utmZone) { const utmCoords = coords.map(p => latLngToUTM(p.lat, p.lng, utmZone)); let area = 0; for (let i = 0; i < utmCoords.length; i++) { const j = (i + 1) % utmCoords.length; area += utmCoords[i].easting * utmCoords[j].northing; area -= utmCoords[j].easting * utmCoords[i].northing; } area = Math.abs(area) / 2; return area / 10000; } function addPolygonWithCalculation(coords, color = '#2ecc71', isExample = false) { const latlngs = coords.map(c => [c[1], c[0]]); const polygon = L.polygon(latlngs, { color: color, weight: 2, fillOpacity: 0.3 }).addTo(drawItems); const centroid = calculateCentroid(latlngs.map(c => ({ lat: c[0], lng: c[1] }))); const utmZone = getUTMZone(centroid.lng); const hemisphere = centroid.lat >= 0 ? 'N' : 'S'; const areaHa = calculateAreaInUTM(latlngs.map(c => ({ lat: c[0], lng: c[1] })), utmZone); const label = isExample ? '

EXAMPLE

' : ''; const popupContent = `

        ${label}
        Area Calculation
          1. Centroid:[${centroid.lng.toFixed(6)}°, ${centroid.lat.toFixed(6)}°]
2. UTM Zone:${utmZone}${hemisphere}
3. Area:${areaHa.toFixed(4)} ha

          Process: WGS84 → UTM ${utmZone}${hemisphere} → Calculate
        

`; polygon.bindPopup(popupContent, { maxWidth: 350 }); const centroidMarker = L.circleMarker([centroid.lat, centroid.lng], { radius: 4, color: color, fillColor: color, fillOpacity: 0.8, weight: 2 }).addTo(drawItems); centroidMarker.bindTooltip(`${areaHa.toFixed(4)} ha`, { permanent: false }); return polygon; } geojsonData.features.forEach(feature => { addPolygonWithCalculation(feature.geometry.coordinates[0], '#2ecc71', true); }); map.on("draw:created", e => { const layer = e.layer; drawItems.addLayer(layer); const coords = layer.getLatLngs()[0]; const centroid = calculateCentroid(coords); const utmZone = getUTMZone(centroid.lng); const hemisphere = centroid.lat >= 0 ? 'N' : 'S'; const areaHa = calculateAreaInUTM(coords, utmZone); const popupContent = `

YOUR POLYGON

Area Calculation
          1. Centroid:[${centroid.lng.toFixed(6)}°, ${centroid.lat.toFixed(6)}°]
2. UTM Zone:${utmZone}${hemisphere}
3. Area:${areaHa.toFixed(4)} ha

          Process: WGS84 → UTM ${utmZone}${hemisphere} → Calculate
        

`; layer.bindPopup(popupContent, { maxWidth: 350 }).openPopup(); const centroidMarker = L.circleMarker([centroid.lat, centroid.lng], { radius: 5, color: '#e74c3c', fillColor: '#e74c3c', fillOpacity: 0.8, weight: 2 }).addTo(drawItems); centroidMarker.bindTooltip(`${areaHa.toFixed(4)} ha`, { permanent: false }); }); const acceptBtn = modal.querySelector('#acceptBtn'); acceptBtn.onmouseover = () => acceptBtn.style.background = '#0770c4'; acceptBtn.onmouseout = () => acceptBtn.style.background = '#0984e3'; acceptBtn.onclick = () => { modal.style.display = 'none'; map.invalidateSize(); }; return container; }

1. Centroid:	[${centroid.lng.toFixed(6)}°, ${centroid.lat.toFixed(6)}°]
2. UTM Zone:	${utmZone}${hemisphere}
3. Area:	${areaHa.toFixed(4)} ha