Skip to main content

Measure Polygon Area

Let users draw and edit polygons directly on the map and instantly see the real-time area in square meters, hectares, and square kilometers — ideal for land measurement, property boundaries, construction planning, or agriculture.

Features​

  • Draw, edit, and delete polygons freely
  • Real-time area calculation using Turf.js

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Polygon Area Calculator</title>

    <link
      rel="stylesheet"
      href="https://unpkg.com/bkoi-gl@latest/dist/style/bkoi-gl.css"
    />
    <script src="https://unpkg.com/bkoi-gl@latest/dist/iife/bkoi-gl.js"></script>

    <link
      rel="stylesheet"
      href="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.1/dist/mapbox-gl-draw.css"
    />
    <script src="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.1/dist/mapbox-gl-draw.js"></script>
    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body,
      #map {
        height: 100%;
        overflow: hidden;
        font-family: system-ui, -apple-system, sans-serif;
        background: #000;
      }

      /* Compact & beautiful info panel */
      #info {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 10;
        pointer-events: none;
      }

      .box {
        background: rgba(20, 20, 30, 0.82);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
        padding: 12px 16px;
        min-width: 210px;
        text-align: center;
        pointer-events: auto;
        transition: all 0.3s ease;
      }

      .title {
        font-size: 13px;
        font-weight: 700;
        color: #ffd42a;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
        opacity: 0.95;
      }

      .area {
        font-size: 26px;
        font-weight: 800;
        color: #72f68e;
        line-height: 1.1;
        margin: 2px 0;
      }

      .unit {
        font-size: 12px;
        color: #bbbbbb;
        margin-bottom: 4px;
      }

      .extra {
        font-size: 11.5px;
        color: #999caa;
        opacity: 0.9;
      }

      .hint {
        font-size: 13px;
        font-weight: 600;
        color: #ffdd57;
        opacity: 0.9;
      }

      /* Optional hover lift effect */
      .box:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
      }

      /* Keep draw controls fully clickable */
      .mapboxgl-ctrl-top-left,
      .mapboxgl-ctrl-group {
        z-index: 100 !important;
        pointer-events: auto !important;
      }
      .mapboxgl-ctrl-group button {
        pointer-events: auto !important;
        cursor: pointer !important;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div id="info">
      <div class="box">
        <div class="title">Polygon Area</div>
        <div id="result" class="hint">Draw a polygon to measure</div>
      </div>
    </div>

    <script>
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/barikoi-light/style.json",
        center: [90.37008547313786, 23.79253097629713],
        zoom: 11,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      let draw;

      map.on("load", () => {
        draw = new MapboxDraw({
          displayControlsDefault: false,
          controls: { polygon: true, trash: true },
          defaultMode: "draw_polygon",
        });

        map.addControl(draw, "top-left");

        const update = () => {
          const data = draw.getAll();
          const el = document.getElementById("result");

          if (data.features.length > 0) {
            const a = turf.area(data);
            const m2 = Math.round(a * 100) / 100;
            const ha = (m2 / 10000).toFixed(4);
            const km2 = (m2 / 1e6).toFixed(6);

            el.innerHTML = `
              <div class="area">${m2.toLocaleString()}</div>
              <div class="unit">square meters</div>
              <div class="extra">${ha} ha • ${km2} km²</div>
            `;
          } else {
            el.innerHTML = `<div class="hint">Draw a polygon to measure</div>`;
          }
        };

        map.on("draw.create", update);
        map.on("draw.update", update);
        map.on("draw.delete", update);
      });
    </script>
  </body>
</html>

Area Units Explained​

UnitConversionBest For
m²Base unitSmall plots, buildings
Hectares1 ha = 10,000 m²Agriculture, large land
km²1 km² = 1,000,000 m²City blocks, industrial zones

Pro Tips​

  • Use turf.area() — most accurate for spherical Earth
  • Combine with snap-to-roads or ortho imagery for surveying
  • Export drawn polygon with draw.getAll() → send to backend