Skip to main content

Add Map Controls

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

Available Controls at a Glance​

ControlWhat It DoesCode
FullscreenExpands map to fill entire screennew bkoigl.FullscreenControl()
NavigationZoom in/out buttons + compassnew bkoigl.NavigationControl()
ScaleShows distance scale barnew 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.

// 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/barikoi-light/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/barikoi-light/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​

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

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);