Example: Add a linestring layer

Introduction

In this example, you will learn how to add a LineString layer to a map using the bkoi-gl library. A LineString represents a series of connected points, which is useful for visualizing routes or paths on a map. The example uses GeoJSON data to define a custom route and displays it as a line on the map with styling options like line width, color, and join types.

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;

      // Add a new GeoJSON source for Dhaka boundary
      map.current.addSource("route", {
        type: "geojson",
        data: {
          type: "Feature",
          properties: {},
          geometry: {
            type: "LineString",
            coordinates: [
              [90.39592977568441, 23.73819466254021],
              [90.3884381455731, 23.739079495318904],
              [90.38360476257503, 23.739079504888963],
              [90.38215469683195, 23.744388720000913],
              [90.37852968658598, 23.750803712875054],
              [90.3739378305936, 23.758988095243794],
              [90.36716887736895, 23.77314691763415],
              [90.35967464842929, 23.77934226128079],
              [90.35483773339735, 23.779566575347957],
              [90.35096875523459, 23.782001262987862],
              [90.35435594458619, 23.786864015173265],
              [90.35387598554115, 23.796368929814676],
              [90.35339373496487, 23.799020710977217],
              [90.35992109156467, 23.8029969084906],
              [90.36668705362558, 23.80609505292402],
              [90.36910298772528, 23.806098265925556],
              [90.37868166683086, 23.78419024025885],
              [90.38085730053507, 23.77644734596072],
              [90.38279123521215, 23.76671248707426],
              [90.38303314260423, 23.75896902301504],
              [90.38907534943587, 23.75963375234933],
              [90.39004239268218, 23.774455816768167],
              [90.39753615372246, 23.778660709098645],
              [90.39850260723358, 23.781313843102453],
              [90.4258181375858, 23.780872861090273],
            ],
          },
        },
      });

      // Add a new fill layer for Dhaka boundary and insert it below the first symbol layer
      map.current.addLayer({
        id: "route",
        type: "line", // Layer type: 'fill' for polygons
        source: "route", // Source of GeoJSON data
        layout: {
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          "line-color": "#888",
          "line-width": 8,
        },
      });
    });
  }, []); // 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;