Example: Using Markers with Barikoi GL

Introduction

This guide demonstrates how to add a customizable marker to a map using the bkoi-gl package within a React component. The example shows how to create a draggable marker, define its color, and position it on the map. Markers are useful for pinpointing specific locations on the map and can be easily customized based on your application's requirements.

Example

Instructions

Install the bkoi-gl Package

Use the following code in your React component to display a map with a draggable marker:

"use client";
import { useEffect, useRef } from "react";
import { Map, Marker } from "bkoi-gl"; // Import Package
import "bkoi-gl/dist/style/bkoi-gl.css"; // Import CSS

const MainMap = () => {
  // Refs
  const mapContainer = useRef(null);
  const map = useRef(null);

  useEffect(() => {
    if (map.current) return; // Ensures map initializes only once

    // Initialize the map
    map.current = new Map({
      container: mapContainer.current,
      center: [90.39017821904588, 23.719800220780733], // Dhaka coordinates
      zoom: 10,
      doubleClickZoom: false,
      accessToken: "YOUR_BARIKOI_API_KEY_HERE", // Replace with your Barikoi API key
    });

    // Initialize and add the marker after the map is created
    const marker = new Marker({
      color: "#ed6a5a", // Marker color
      draggable: true, // Make the marker draggable if you make it false the marker will not be draggable
    })
      .setLngLat([90.39017821904588, 23.719800220780733]) // Marker coordinates
      .addTo(map.current); // Add marker to the map
  }, []);

  return <div ref={mapContainer} style={containerStyles} />;
};

// JSX Styles
const containerStyles = {
  width: "100%",
  height: "100vh",
  minHeight: "400px",
  overflow: "hidden",
};

export default MainMap;