Skip to main content

Add Popup to Marker

Combine custom markers with informative popups to create engaging, interactive map experiences.

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>Popup with Marker</title>

    <!-- Barikoi GL CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/bkoi-gl@latest/dist/style/bkoi-gl.css"
    />
    <!-- Barikoi GL JS -->
    <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%;
        width: 100%;
      }

      /* Custom marker styling */
      #marker {
        background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Bdparliament50000x31000.jpg/1200px-Bdparliament50000x31000.jpg");
        background-size: cover;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      }

      /* Popup styling */
      .bkoigl-popup {
        max-width: 200px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      const monument = [90.378554, 23.762607]; // Jatiya Sangsad Bhaban coordinates

      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/barikoi-light/style.json",
        center: monument,
        zoom: 14,
        accessToken: "YOUR_BARIKOI_API_KEY", // ← Replace this!
      });

      // Create the popup
      const popup = new bkoigl.Popup({ offset: 25 }).setText(
        "The Jatiya Sangsad Bhaban is the house of the Parliament of Bangladesh, located at Sher-e-Bangla Nagar besides Zia Udyan in Dhaka, the capital city of Bangladesh."
      );

      // Create DOM element for the custom marker
      const el = document.createElement("div");
      el.id = "marker";

      // Create the marker and attach popup
      new bkoigl.Marker({ element: el })
        .setLngLat(monument)
        .setPopup(popup) // Attach popup to marker
        .addTo(map);
    </script>
  </body>
</html>

Code Breakdown​

1. Custom Marker Styling​

#marker {
  background-image: url("..."); /* Your custom image */
  background-size: cover; /* Fill the entire marker area */
  width: 50px; /* Marker width */
  height: 50px; /* Marker height */
  border-radius: 50%; /* Make it circular */
  cursor: pointer; /* Show clickable cursor on hover */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Add subtle shadow */
}
Customize Your Marker

Replace the background-image URL with any image you want – your logo, a custom icon, or a photo. You can also adjust the size, shape, and styling to match your design.

2. Popup Styling​

.bkoigl-popup {
  max-width: 200px; /* Limit popup width for better readability */
}

The .bkoigl-popup class lets you customize the popup's appearance. You can override default styles to match your brand.

3. Create the Popup​

const popup = new bkoigl.Popup({ offset: 25 }).setText(
  "The Jatiya Sangsad Bhaban is the house of the Parliament of Bangladesh..."
);
OptionTypeDescription
offsetnumberDistance (in pixels) between popup and marker anchor point

Popup Content Methods​

MethodDescriptionExample
.setText()Set plain text contentpopup.setText("Hello World")
.setHTML()Set HTML content (images, links, formatting)popup.setHTML("<h3>Title</h3><p>...</p>")
Rich Content with HTML

Use .setHTML() instead of .setText() to add formatted text, images, links, and other HTML elements to your popup.

4. Create Custom Marker Element​

const el = document.createElement("div");
el.id = "marker";

This creates a <div> element that will be styled by the CSS #marker rule. You can add classes, data attributes, or event listeners to this element.

5. Attach Popup to Marker​

new bkoigl.Marker({ element: el })
  .setLngLat(monument) // Position the marker
  .setPopup(popup) // Attach the popup
  .addTo(map); // Add to map

Marker Methods Explained​

MethodDescription
.setLngLat()Set marker position [longitude, latitude]
.setPopup()Attach a popup that opens when the marker is clicked
.addTo()Add the marker to the map
Popup Behavior

By default, popups open when you click the marker. Use popup.options.closeButton = false to remove the close button, or popup.options.closeOnClick = false to prevent closing when clicking the map.

Advanced Popup Examples​

HTML Content with Formatting​

const popup = new bkoigl.Popup({ offset: 25 }).setHTML(`
  <div style="padding: 8px;">
    <h3 style="margin: 0 0 8px 0;">Jatiya Sangsad Bhaban</h3>
    <img src="your-image.jpg" style="width: 100%; border-radius: 4px;" />
    <p style="margin: 8px 0 0 0;">Designed by Louis Kahn</p>
    <a href="https://example.com" target="_blank">Learn More →</a>
  </div>
`);

Multiple Popups on Different Markers​

const locations = [
  { coords: [90.378554, 23.762607], name: "Parliament" },
  { coords: [90.406085, 23.810332], name: "Shaheed Minar" },
  { coords: [90.398575, 23.750874], name: "Lalbagh Fort" },
];

locations.forEach((loc) => {
  const popup = new bkoigl.Popup({ offset: 25 }).setText(loc.name);

  new bkoigl.Marker().setLngLat(loc.coords).setPopup(popup).addTo(map);
});
OptionTypeDefaultDescription
closeButtonbooleantrueShow/hide the close button
closeOnClickbooleantrueClose popup when clicking elsewhere on the map
closeOnMovebooleanfalseClose popup when the map moves
offsetnumber0Distance between popup and anchor point
anchorstringautoPosition relative to marker: top, bottom, etc.
maxWidthstring"240px"Maximum popup width

Example with custom options:

const popup = new bkoigl.Popup({
  offset: 30,
  closeButton: false,
  closeOnClick: true,
  maxWidth: "300px",
  anchor: "bottom",
});