Example: Add a layer

Introduction

This example demonstrates how to add a custom layer to a map using the bkoi-gl library. In this tutorial, we will walk through the steps to initialize a map, load a GeoJSON source, and add a new fill layer that represents the boundary of Dhaka city (you can customize as needed). The layer will be added on top of the map, with the ability to customize its appearance and placement relative to other layers.

Example

"use client";
import { useEffect, useRef, useState } from "react";
import { Map, FullscreenControl } from "bkoi-gl";
import "bkoi-gl/dist/style/bkoi-gl.css";

const MainMap = () => {
  // References to map container and map instance
  const mapContainer = useRef(null);
  const map = useRef(null);

  // State to track if the map has been initialized
  const [mapInitialized, setMapInitialized] = useState(false);

  useEffect(() => {
    // Prevent re-initializing the map if it already exists
    if (map.current) return;

    // Initialize the map
    map.current = new Map({
      container: mapContainer.current, // HTML element to contain the map
      center: [90.39017821904588, 23.719800220780733], // Initial map center (longitude, latitude)
      zoom: 10, // Initial map zoom level
      doubleClickZoom: false, // Disable zoom on double-click
      accessToken: "YOUR_BARIKOI_API_KEY_HERE", // Access token for bkoi-gl
    });

    // Set mapInitialized to true when the map is initialized
    setMapInitialized(true);

    // Add Fullscreen control to the map
    map.current.addControl(new FullscreenControl());

    // Listen for the 'style.load' event to ensure the style is fully loaded
    map.current.on("style.load", () => {
      // Re-set mapInitialized to true (ensures the style is loaded)
      setMapInitialized(true);

      // Access the layers in the map style
      const layers = map.current.getStyle().layers;
      let firstSymbolId;

      // Find the first 'symbol' layer in the map style
      for (let i = 0; i < layers.length; i++) {
        if (layers[i].type === "symbol") {
          firstSymbolId = layers[i].id;
          break;
        }
      }

      // Add a new GeoJSON source for Dhaka boundary
      map.current.addSource("dhaka-boundary", {
        type: "geojson",
        data: "https://raw.githubusercontent.com/faiazhossain/dhaka-geojson/main/dhaka-geojson.geojson",
      });

      // Add a new fill layer for Dhaka boundary and insert it below the first symbol layer
      map.current.addLayer(
        {
          id: "dhaka-boundary-fill",
          type: "fill", // Layer type: 'fill' for polygons
          source: "dhaka-boundary", // Source of GeoJSON data
          layout: {},
          paint: {
            "fill-color": "#f08", // Fill color of the Dhaka boundary
            "fill-opacity": 0.4, // Opacity of the fill color
          },
        },
        firstSymbolId // Place the new layer beneath the first symbol layer
      );
    });
  }, []); // Empty dependency array ensures this effect runs only once

  // Render the map container with full width and height
  return <div ref={mapContainer} style={containerStyles} />;
};

// Define styles for the map container
const containerStyles = {
  width: "100%",
  height: "100vh",
  minHeight: "400px",
  overflow: "hidden", // Ensure the map container does not show scrollbars
};

export default MainMap;

Introduction​

Example​

Introduction

Example