Skip to main content

Add Vector Tile Layer

Load blazing-fast vector tiles (Mapbox Vector Tiles / MVT format) and style them dynamically. Perfect for rendering millions of features like buildings, village boundaries, land parcels, flood zones, or custom geospatial data.

Quick Usage​

map.addSource("my-tiles", {
  type: "vector",
  url: "https://tiles.example.com/data/{z}/{x}/{y}",
  // OR use url: "https://tiles.example.com/data/{z}/{x}/{y}.pbf",
  // OR use tiles: ["https://a.tiles.example.com/{z}/{x}/{y}.pbf", ...]
});

map.addLayer({
  id: "villages",
  type: "fill",
  source: "my-tiles",
  "source-layer": "villages",
  paint: {
    "fill-color": "#3b82f6",
    "fill-opacity": 0.3,
  },
});

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vector Tile Layer - 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%;
      }

      .legend {
        position: absolute;
        bottom: 30px;
        right: 20px;
        background: white;
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        font-family: system-ui, sans-serif;
        z-index: 10;
      }
      .legend h4 {
        margin: 0 0 10px 0;
        font-size: 14px;
        color: #1e293b;
      }
      .legend-item {
        font-size: 13px;
        color: #475569;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div class="legend">
      <h4>Vector Tile Layer</h4>
      <div class="legend-item">Source: Barikoi building Grid</div>
      <div class="legend-item">Format: Vector Tiles (.pbf)</div>
    </div>

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

      map.on("load", () => {
        // Add Barikoi's public building boundary vector tiles
        map.addSource("building-layer", {
          type: "vector",
          tiles: ["https://tiles.bmapsbd.com/bd_buildings/{z}/{x}/{y}"],
          minzoom: 6,
          maxzoom: 14,
        });

        // Fill polygons (buildings)
        map.addLayer({
          id: "building-fill",
          type: "fill",
          source: "building-layer",
          "source-layer": "data.bd_buildings",
          paint: {
            "fill-color": "#3b82f6",
            "fill-opacity": [
              "interpolate",
              ["linear"],
              ["zoom"],
              10,
              0.4,
              14,
              0.9,
            ],
          },
        });

        // Outline (stronger at higher zoom)
        map.addLayer({
          id: "building-outline",
          type: "line",
          source: "building-layer",
          "source-layer": "building_grid",
          paint: {
            "line-color": "#1d4ed8",
            "line-width": [
              "interpolate",
              ["linear"],
              ["zoom"],
              10,
              0.5,
              14,
              1.5,
            ],
            "line-opacity": 0.8,
          },
        });
      });
    </script>
  </body>
</html>

Key Concepts​

TermMeaning
type: "vector"Source type for .pbf tiles
tiles: [...]Direct tile URLs (no TileJSON needed)
source-layerName of layer inside the .pbf file
filterOptional: filter by geometry type or props

Performance Advantages​

FeatureVector TilesGeoJSON
File SizeTiny (~10–50 KB per tile)Large (MBs)
Rendering SpeedExtremely fastSlow with 10k+ features
Zoom-dependent StylingYesLimited
InteractivityFull (hover, click)Possible but heavy

Use vector tiles for anything over 5,000 features.