Skip to main content

Add a Marker

Drop a pin on any location to highlight points of interest, store locations, or user positions.

Quick Usage​

// Create a marker and add it to the map
const marker = new bkoigl.Marker()
  .setLngLat([90.364, 23.8237]) // [longitude, latitude]
  .addTo(map);

That's it! Three lines to place a marker on your map.

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add a marker</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.36402004477634, 23.823730671721],
        zoom: 6,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      // Step 2: Create and add a marker
      const marker = new bkoigl.Marker()
        .setLngLat([90.36402004477634, 23.823730671721])
        .addTo(map);
    </script>
  </body>
</html>

Code Breakdown​

1. Initialize the Map​

const map = new bkoigl.Map({
  container: "map", // Target HTML element
  style: "https://map.barikoi.com/styles/barikoi-light/style.json", // Map style
  center: [90.36402004477634, 23.823730671721], // Initial center point
  zoom: 6, // Zoom level
  accessToken: "YOUR_BARIKOI_API_KEY", // Your API key
});

This creates the base map. The center coordinates define where the map initially focuses.

2. Create and Position the Marker​

const marker = new bkoigl.Marker()
  .setLngLat([90.36402004477634, 23.823730671721])
  .addTo(map);
MethodWhat It Does
new bkoigl.Marker()Creates a new marker instance with default styling (blue pin)
.setLngLat([lng, lat])Sets the marker's position — longitude first!
.addTo(map)Attaches the marker to your map instance
Method Chaining

Barikoi GL supports method chaining, so you can create, position, and add a marker in one statement.

Marker Customization Options​

Change Marker Color​

const marker = new bkoigl.Marker({ color: "#FF5733" }) // Custom hex color
  .setLngLat([90.364, 23.8237])
  .addTo(map);

Use a Custom HTML Element​

// Create a custom marker element
const el = document.createElement("div");
el.className = "custom-marker";
el.style.backgroundImage = "url(https://example.com/pin.png)";
el.style.width = "32px";
el.style.height = "32px";

const marker = new bkoigl.Marker({ element: el })
  .setLngLat([90.364, 23.8237])
  .addTo(map);

Marker Options Reference​

OptionTypeDefaultDescription
colorstring"#3FB1CE"Marker color (hex, rgb, or color name)
elementHTMLElementnullCustom DOM element to use as marker
anchorstring"center"Position anchor: center, top, bottom, left, right
offset[x, y][0, 0]Pixel offset from the anchor position
draggablebooleanfalseWhether the marker can be dragged
scalenumber1Scale factor for the default marker

Adding Multiple Markers​

const locations = [
  { lng: 90.364, lat: 23.8237, name: "Location A" },
  { lng: 90.4125, lat: 23.8103, name: "Location B" },
  { lng: 90.389, lat: 23.75, name: "Location C" },
];

locations.forEach((loc) => {
  new bkoigl.Marker().setLngLat([loc.lng, loc.lat]).addTo(map);
});

Removing a Marker​

// Keep a reference to remove later
const marker = new bkoigl.Marker().setLngLat([90.364, 23.8237]).addTo(map);

// Remove the marker
marker.remove();