Add Map Controls

Improve user experience with built-in interactive controls for navigation, fullscreen mode, and scale display.

---

Available Controls at a Glance

Control	What It Does	Code
Fullscreen	Expands map to fill entire screen	new bkoigl.FullscreenControl()
Navigation	Zoom in/out buttons + compass	new bkoigl.NavigationControl()
Scale	Shows distance scale bar	new bkoigl.ScaleControl()

---

Quick Usage

Fullscreen Control

// Adds a button to toggle fullscreen mode
map.addControl(new bkoigl.FullscreenControl());

What it does: Adds a button (usually in the top-right corner) that expands the map to fill the entire browser window. Click again to exit fullscreen.

---

Navigation Control

// Adds zoom buttons (+/-) and a compass
map.addControl(new bkoigl.NavigationControl());

What it does:

• Zoom buttons — Click + to zoom in, - to zoom out
• Compass — Shows map orientation; click to reset to north

---

Scale Control

// Adds a scale bar showing real-world distance
map.addControl(new bkoigl.ScaleControl());

What it does: Displays a scale bar that updates as you zoom, showing the real-world distance (e.g., "500m" or "2km").

---

Full Working Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Map with Controls</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Barikoi GL CSS & JS -->
    <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%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      // Step 1: Initialize the map
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/osm_barikoi_v1/style.json",
        center: [90.3994, 23.7638],
        zoom: 6,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      // Step 2: Add controls after the map loads
      map.on("load", () => {
        // Add Fullscreen Control (top-right by default)
        map.addControl(new bkoigl.FullscreenControl());

        // Add Zoom Navigation Control (top-right by default)
        map.addControl(new bkoigl.NavigationControl());

        // Add Map Scale Control (bottom-left by default)
        map.addControl(new bkoigl.ScaleControl());
      });
    </script>
  </body>
</html>

---

Code Breakdown

1. Map Initialization

const map = new bkoigl.Map({
  container: "map", // HTML element ID
  style: "https://map.barikoi.com/styles/osm_barikoi_v1/style.json", // Map style
  center: [90.3994, 23.7638], // Bangladesh center
  zoom: 6, // Country-level zoom
  accessToken: "YOUR_BARIKOI_API_KEY", // Your API key
});

This creates the base map. Controls are added after the map finishes loading.

---

2. Wait for Map to Load

map.on("load", () => {
  // Add controls here...
});

Why wait for load? The map needs to fully initialize its style, tiles, and sources before you can reliably add controls and layers. Adding controls before load may cause issues.

---

3. Adding Controls with addControl()

map.addControl(new bkoigl.FullscreenControl());
map.addControl(new bkoigl.NavigationControl());
map.addControl(new bkoigl.ScaleControl());

The addControl() method takes a control instance and optionally a position string.

---

Positioning Controls

By default, controls are added to the top-right corner. You can specify a different position:

// Syntax: map.addControl(control, position)

map.addControl(new bkoigl.NavigationControl(), "top-left");
map.addControl(new bkoigl.FullscreenControl(), "top-right");
map.addControl(new bkoigl.ScaleControl(), "bottom-left");

Available Positions

Position	Location
"top-left"	Top-left corner
"top-right"	Top-right corner (default)
"bottom-left"	Bottom-left corner
"bottom-right"	Bottom-right corner

---

Control Options

Navigation Control Options

map.addControl(
  new bkoigl.NavigationControl({
    showCompass: true, // Show compass (default: true)
    showZoom: true, // Show zoom buttons (default: true)
    visualizePitch: false, // Show pitch control (default: false)
  }),
  "top-right",
);

Scale Control Options

map.addControl(
  new bkoigl.ScaleControl({
    maxWidth: 100, // Maximum width in pixels (default: 100)
    unit: "metric", // 'metric', 'imperial', or 'nautical'
  }),
  "bottom-left",
);

---

Removing Controls

You can remove a control by keeping a reference to it:

const navControl = new bkoigl.NavigationControl();
map.addControl(navControl);

// Later, remove it
map.removeControl(navControl);

---