Skip to main content

Add Polygon

Draw beautiful filled polygons using GeoJSON — ideal for highlighting delivery zones, flood-prone areas, property boundaries, service coverage, or any custom region.

Quick Usage​

map.addSource("zone", {
  type: "geojson",
  data: yourPolygonGeoJSON,
});

map.addLayer({
  id: "zone-fill",
  type: "fill",
  source: "zone",
  paint: {
    "fill-color": "#3b82f6",
    "fill-opacity": 0.5,
  },
});

map.addLayer({
  id: "zone-outline",
  type: "line",
  source: "zone",
  paint: {
    "line-color": "#1d4ed8",
    "line-width": 3,
  },
});

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add Polygon - Barikoi GL</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Barikoi GL -->
    <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>

    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }

      .info-panel {
        position: absolute;
        top: 20px;
        left: 20px;
        background: white;
        padding: 16px 20px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        font-family: system-ui, sans-serif;
        z-index: 10;
        max-width: 280px;
      }
      .info-panel h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
        color: #1e293b;
      }
      .info-panel p {
        margin: 0;
        font-size: 14px;
        color: #64748b;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div class="info-panel">
      <h3>Dhaka Service Zone</h3>
      <p>
        Delivery available within this highlighted area. Estimated arrival:
        30–45 mins.
      </p>
    </div>

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

      // Sample delivery/service zone in Dhaka
      const serviceZone = {
        type: "Feature",
        properties: { name: "Dhaka City Center Zone" },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [90.3613, 23.8039],
              [90.3653, 23.7972],
              [90.3655, 23.7946],
              [90.3652, 23.7924],
              [90.3662, 23.7905],
              [90.3666, 23.788],
              [90.3671, 23.7855],
              [90.3682, 23.7833],
              [90.3685, 23.7818],
              [90.368, 23.779],
              [90.371, 23.7772],
              [90.374, 23.7809],
              [90.379, 23.7819],
              [90.3748, 23.7925],
              [90.3682, 23.807],
              [90.3661, 23.8067],
              [90.3613, 23.8039],
            ],
          ],
        },
      };

      map.on("load", () => {
        map.addSource("zone", {
          type: "geojson",
          data: serviceZone,
        });

        // Filled area
        map.addLayer({
          id: "zone-fill",
          type: "fill",
          source: "zone",
          paint: {
            "fill-color": "#3b82f6",
            "fill-opacity": 0.35,
          },
        });

        // Strong outline
        map.addLayer({
          id: "zone-outline",
          type: "line",
          source: "zone",
          paint: {
            "line-color": "#1d4ed8",
            "line-width": 4,
            "line-opacity": 0.9,
          },
        });

        // Optional: Glowing border effect
        map.addLayer(
          {
            id: "zone-glow",
            type: "line",
            source: "zone",
            paint: {
              "line-color": "#60a5fa",
              "line-width": 12,
              "line-opacity": 0.3,
              "line-blur": 8,
            },
          },
          "zone-outline"
        );
      });
    </script>
  </body>
</html>

Polygon Paint Properties​

PropertyRecommended ValuesEffect
"fill-color"#3b82f6, #10b981Fill color
"fill-opacity"0.3–0.7Transparency (great for overlays)
"fill-outline-color"Auto (or custom)Border color

Pro Tip: Always add a separate line layer for crisp borders!

Advanced: Multiple Polygons (Zones)​

const zones = {
  type: "FeatureCollection",
  features: [
    { geometry: { ... }, properties: { name: "Zone A", color: "#ef4444" } },
    { geometry: { ... }, properties: { name: "Zone B", color: "#f59e0b" } }
  ]
};

// Then use data-driven styling:
"fill-color": ["get", "color"]

Advanced: Click to Highlight​

map.on("click", "zone-fill", (e) => {
  map.setPaintProperty("zone-fill", "fill-opacity", 0.8);
});