Skip to main content

Icon Layer

Use symbol layers with custom icons to display thousands of branded markers efficiently — far more performant than individual Marker objects.

Ideal for store locators, vehicle tracking, custom POIs, or any branded point data.

Quick Usage​

map.loadImage("https://your-icon.png").then((image) => {
  map.addImage("my-icon", image.data);

  map.addLayer({
    id: "stores",
    type: "symbol",
    source: "stores-source",
    layout: {
      "icon-image": "my-icon",
      "icon-size": 0.12,
    },
  });
});

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add a icon layer</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/barikoi-light/style.json",
        center: [90.36402004477634, 23.823730671721],
        zoom: 10,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });
      map.on("load", async () => {
        image = await map.loadImage(
          "https://cdn-icons-png.flaticon.com/512/1998/1998592.png"
        );
        map.addImage("cat", image.data);
        map.addSource("point", {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [90.36402004477634, 23.823730671721],
                },
              },
            ],
          },
        });
        map.addLayer({
          id: "points",
          type: "symbol",
          source: "point",
          layout: {
            "icon-image": "cat",
            "icon-size": 0.15,
          },
        });
      });
    </script>
  </body>
</html>

Key Layout Properties​

PropertyValue ExamplePurpose
"icon-image""my-icon" or ["get", "icon"]Static or dynamic icon
"icon-size"0.08 – 0.15Scale factor (0.1 = normal)
"icon-allow-overlap"true / falseShow even when overlapping
"icon-anchor""bottom"Align icon tip to coordinate

Performance Comparison​

MethodMax MarkersBest For
new bkoigl.Marker()~100Few interactive markers
Symbol Layer (this)10,000+Large datasets, clustering, filtering

Symbol layers are 50x+ faster than DOM markers.

Advanced: Dynamic Icon from Property​

"icon-image": ["concat", ["get", "category"], "-icon"]

Works perfectly with data like { category: "restaurant" }