Display Custom Map Style

Pick your vibe. One line of code changes everything.

Official & Community Styles

Style Name	Preview Mood	Style URL	Best For
Barikoi Light	Clean, professional	`https://map.barikoi.com/styles/barikoi-light/style.json`	Default, dashboards, web apps
Barikoi Dark Mode	Sleek, modern, night-friendly	`https://map.barikoi.com/styles/barikoi-dark-mode/style.json`	Admin panels, logistics, dark UIs
Barikoi Green	Fresh, nature-inspired	`https://map.barikoi.com/styles/barkoi_green/style.json`	Eco apps, agriculture, tourism
Planet Map	Common, realistic	`https://map.barikoi.com/styles/planet_map/style.json`	Real estate, urban planning
OSM Liberty	OpenStreetMap elegant fork	`https://map.barikoi.com/styles/osm-liberty/style.json`	Open-data lovers, clean minimalism

Authentication

All styles require your API key via ?key=YOUR_KEY in production (or pass accessToken in JS).

Full Working Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Display custom map style</title>
    <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,
      html,
      #map {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      const map = new bkoigl.Map({
        container: "map",
        center: [90.4071, 23.7925], // Dhaka
        zoom: 10,
        accessToken: "YOUR_BARIKOI_API_KEY",

        // Pick any style below — just replace!
        style: "https://map.barikoi.com/styles/barikoi-dark-mode/style.json",
      });
    </script>
  </body>
</html>

Code Breakdown

1. Required Dependencies

<!-- CSS for map controls, popups, markers styling -->
<link
  rel="stylesheet"
  href="https://unpkg.com/bkoi-gl@latest/dist/style/bkoi-gl.css"
/>

<!-- Core Barikoi GL mapping library -->
<script src="https://unpkg.com/bkoi-gl@latest/dist/iife/bkoi-gl.js"></script>

These are the same dependencies used in every Barikoi map. The CSS ensures UI elements render correctly regardless of which style you choose.

2. Full-Screen Map Container

body,
html,
#map {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

This makes the map fill the entire browser window. You can also use fixed dimensions:

#map {
  width: 800px;
  height: 500px;
}

3. Map Initialization with Custom Style

const map = new bkoigl.Map({
  container: "map", // HTML element ID to render the map
  center: [90.4071, 23.7925], // Starting position [longitude, latitude]
  zoom: 10, // Initial zoom level
  accessToken: "YOUR_BARIKOI_API_KEY", // Required for authentication

  // 👇 THIS IS THE KEY LINE — change the style URL to switch themes!
  style: "https://map.barikoi.com/styles/barikoi-dark-mode/style.json",
});

The `style` Property Explained

Property	Description
What it is	A URL pointing to a JSON file that defines every visual aspect of the map
What it controls	Colors, fonts, layer visibility, road widths, label placement, icons
How to change	Simply swap the URL to a different style

Switching Styles Dynamically

You can change the map style after initialization using the setStyle() method:

// Switch to dark mode on button click
document.getElementById("darkBtn").addEventListener("click", () => {
  map.setStyle(
    "https://map.barikoi.com/styles/barikoi-dark-mode/style.json?key=YOUR_BARIKOI_API_KEY"
  );
});

document.getElementById("lightBtn").addEventListener("click", () => {
  map.setStyle(
    "https://map.barikoi.com/styles/barikoi-light/style.json?key=YOUR_BARIKOI_API_KEY"
  );
});

Note

Calling setStyle() will remove any custom layers, markers, or sources you've added. You'll need to re-add them after the style loads using the style.load event.

Style Comparison

When to Use Each Style

Style	✅ Best For
Barikoi Light	General purpose, public-facing apps
Barikoi Dark Mode	Night mode, dashboards, admin panels
Barikoi Green	Environmental apps, parks, tourism
Planet Map	Detailed city exploration
OSM Liberty	Open-source projects, minimal look

Display Custom Map Style

Official & Community Styles​

Full Working Example​

Code Breakdown​

1. Required Dependencies​

2. Full-Screen Map Container​

3. Map Initialization with Custom Style​

The style Property Explained​

Switching Styles Dynamically​

Style Comparison​

When to Use Each Style​