Example: Controls

FullscreenControl

The FullscreenControl is the component provided by the bkoi-gl package that allows users to toggle fullscreen mode for the map. This can enhance the user experience by providing a more immersive view of the map.

NavigationControl

The NavigationControl component in the bkoi-gl package provides users with convenient map navigation tools, including zoom in/out controls and a reset-to-north feature. These controls improve user interaction by offering an easy way to adjust the map view, allowing users to zoom in for detailed exploration or zoom out for a broader perspective. Additionally, the reset-to-north functionality helps reorient the map to its default position, ensuring a more seamless and intuitive mapping experience.

GeolocateControl

The GeolocateControl component in the bkoi-gl package allows users to center the map on their current location. By leveraging the device's GPS capabilities, it provides a seamless way for users to quickly view their position on the map. This feature is particularly useful for location-based services, navigation, and enhancing user experience in applications where finding one's location is crucial. The control ensures users can easily orient themselves within the map, improving engagement and interactivity.

ScaleControl

The ScaleControl component in the bkoi-gl package displays a scale bar on the map, helping users understand distances between points on the map. This visual guide dynamically adjusts as users zoom in or out, offering a clear representation of scale relative to the map’s current zoom level. It enhances map usability by providing a quick reference for measuring distances, making it especially useful in mapping, navigation, and geographic analysis applications. The ScaleControl ensures users can easily gauge real-world distances, improving the overall user experience.

Example

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

// MainMap component
const MainMap = () => {
  // Reference to the map container DOM element
  const mapContainer = useRef(null);

  // Reference to the map instance
  const map = useRef(null);

  useEffect(() => {
    // Check if the map is already initialized
    if (map.current) return;

    // Initialize the map
    map.current = new Map({
      container: mapContainer.current, // Reference to the map container element
      center: [90.39017821904588, 23.719800220780733], // Coordinates for center of the map (Dhaka)
      zoom: 10, // Initial zoom level
      doubleClickZoom: false, // Disable zooming on double-click
      accessToken: "YOUR_BARIKOI_API_KEY_HERE", // Your Barikoi API key
    });

    // Add fullscreen control to the map
    map.current.addControl(new FullscreenControl());
    map.current.addControl(new NavigationControl());
    map.current.addControl(new GeolocateControl());
  }, []); // Empty dependency array ensures this effect runs only once on component mount

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

// Styles for the map container
const containerStyles = {
  width: "100%", // Full width of the container
  height: "100vh", // Full viewport height
  minHeight: "400px", // Minimum height of 400px
  overflow: "hidden", // Hide overflow to prevent scrollbars
};

export default MainMap;