2b:null 2c:["$","title",null,{"children":"Area Calculation Strategy | julio-collazos-projects | Observable"}] 31:T279a,viewof map = { await leafletDraw; const container = html`

`; const modal = html`

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; }32:T102a,geojsonData = ({ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ [99.9974294736914, 8.498240105542934], [99.9974294736914, 8.498321700526972], [99.99737905640598, 8.498407828537466], [99.99727363869482, 8.498471291276417], [99.99714530408869, 8.498611815874611], [99.99688863487643, 8.499359768516129], [99.9967190498615, 8.499872001907292], [99.99406527354944, 8.498838468344516], [99.99430819262437, 8.498099580799888], [99.99388193839718, 8.497927324603069], [99.9939506890791, 8.497591878103023], [99.99538070325872, 8.498117713026133], [99.99553653813638, 8.498108646913451], [99.9956465392271, 8.497727869963072], [99.9965632149839, 8.498054250229472], [99.99667321607456, 8.497922791544141], [99.9974294736914, 8.498240105542934] ] ], "type": "Polygon" } }, { "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ [99.99684738339386, 8.499849335023626], [99.99706280219573, 8.499178445093804], [99.99737447195258, 8.498516620093284], [99.99817197986084, 8.498806735302807], [99.9976494746802, 8.500171180451787], [99.99684738339386, 8.499849335023626] ] ], "type": "Polygon" } }, { "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ [99.99208984906147, 8.495737853762193], [99.99225943407646, 8.495320809742836], [99.99363444770995, 8.495787717690618], [99.99782823929394, 8.497383359979821], [99.99752573629479, 8.497823067057723], [99.99427612073902, 8.496571940440532], [99.99208984906147, 8.495737853762193] ] ], "type": "Polygon" } }, { "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ [99.9918331839558, 8.49686659442007], [99.99278652674178, 8.497197508487005], [99.99267194227292, 8.49756468677478], [99.99164984880508, 8.497197508487005], [99.9918331839558, 8.49686659442007] ] ], "type": "Polygon" } }, { "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ [99.99300965746892, 8.494463929392893], [99.99317465910576, 8.494065016407177], [99.99809720791461, 8.495841989244084], [99.99809262453499, 8.496200102671068], [99.9979734566881, 8.496272631932314], [99.99581468528208, 8.495520140182407], [99.99560384985824, 8.496041444864815], [99.99311049180193, 8.495084963556835], [99.99330757708998, 8.494586323067082], [99.99300965746892, 8.494463929392893] ] ], "type": "Polygon" } }, { "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ [99.99338818470079, 8.496899008674276], [99.99183556986907, 8.496341598824245], [99.9920028304831, 8.495766207161935], [99.99358089801672, 8.496363175995086], [99.99338818470079, 8.496899008674276] ] ], "type": "Polygon" } }, { "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ [99.99105744456944, 8.497831845286228], [99.9912065246823, 8.497414688037978], [99.99412267712836, 8.498464772657854], [99.99396268871499, 8.498910698134083], [99.99105744456944, 8.497831845286228] ] ], "type": "Polygon" } } ] })33:[] 2f:{"id":"8e66b399d6c9d82f","slug":null,"title":"Area Calculation Strategy","thumbnail":"c67ce702990ffed729936364c77aae4c3ea241d04eb48359261dc2a52881a09e","access_level":"public","create_time":"$D2025-10-04T10:54:10.509Z","update_time":"$D2025-10-04T16:20:14.442Z","view_time":null,"first_public_time":"$D2025-10-04T13:38:54.942Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"930746d1cf005caf","login":"julio-collazos-projects","name":"julio-collazos-projects","avatar_url":"https://avatars-next.observableusercontent.com/41925d977414169f79643ac56089edeabf922f6fdc1040df82d384e41a53f3a3","tier":"starter_2024","bio":""},"version":133,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"82f1079e1eb2fdd4","login":"julio-cesar-collazos","name":"Julio Cesar Collazos","avatar_url":"https://avatars-next.observableusercontent.com/96f9b5858a475e9e4fa70c7f2b2bc96839ee339a4501ff9da277b5dd19ba11ea","tier":null,"bio":""}],"members":[{"type":"individual","id":"82f1079e1eb2fdd4","login":"julio-cesar-collazos","name":"Julio Cesar Collazos","avatar_url":"https://avatars-next.observableusercontent.com/96f9b5858a475e9e4fa70c7f2b2bc96839ee339a4501ff9da277b5dd19ba11ea","tier":null,"role":"editor"},{"type":"team","id":"930746d1cf005caf","login":"julio-collazos-projects","name":"julio-collazos-projects","avatar_url":"https://avatars-next.observableusercontent.com/41925d977414169f79643ac56089edeabf922f6fdc1040df82d384e41a53f3a3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Area Calculation Strategy","cells":[{"id":0,"value":"# Area Calculation Strategy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"L = require('leaflet@1.7.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"leafletDraw = {\n const link1 = document.createElement('link');\n link1.rel = 'stylesheet';\n link1.href = 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css';\n document.head.appendChild(link1);\n \n const link2 = document.createElement('link');\n link2.rel = 'stylesheet';\n link2.href = 'https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css';\n document.head.appendChild(link2);\n\n const script = document.createElement('script');\n script.src = 'https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js';\n document.head.appendChild(script);\n \n await new Promise((resolve, reject) => {\n script.onload = resolve;\n script.onerror = reject;\n });\n \n return L;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"

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