Skip to main content

Add GeoJSON Line

Draw beautiful, smooth lines using GeoJSON LineString — ideal for showing routes, roads, walking paths, delivery tracks, or administrative boundaries.

Quick Usage​

map.addSource("route", {
  type: "geojson",
  data: yourLineGeoJSON,
});

map.addLayer({
  id: "route-line",
  type: "line",
  source: "route",
  paint: {
    "line-color": "#0066ff",
    "line-width": 6,
  },
  layout: {
    "line-cap": "round",
    "line-join": "round",
  },
});

Full Working Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add GeoJSON Line - Barikoi GL</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Barikoi GL -->
    <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>
      const map = new bkoigl.Map({
        container: "map",
        style: "https://map.barikoi.com/styles/barikoi-light/style.json",
        center: [90.394, 23.7925],
        zoom: 13,
        accessToken: "YOUR_BARIKOI_API_KEY",
      });

      // Sample route through Dhaka
      const route = {
        type: "Feature",
        properties: { name: "Dhaka City Route" },
        geometry: {
          type: "LineString",
          coordinates: [
            [90.39749, 23.77838],
            [90.39319, 23.77583],
            [90.38993, 23.7753],
            [90.39004, 23.77328],
            [90.38925, 23.7678],
            [90.38899, 23.76434],
            [90.38337, 23.7653],
            [90.38074, 23.77669],
            [90.37843, 23.78429],
            [90.37623, 23.78938],
            [90.37292, 23.79702],
            [90.36861, 23.80716],
            [90.36719, 23.8122],
            [90.36478, 23.82047],
            [90.3642, 23.8234],
          ],
        },
      };

      map.on("load", () => {
        map.addSource("route", {
          type: "geojson",
          data: route,
        });

        // Main route line
        map.addLayer({
          id: "route-line",
          type: "line",
          source: "route",
          layout: {
            "line-cap": "round",
            "line-join": "round",
          },
          paint: {
            "line-color": "#0066ff",
            "line-width": 7,
            "line-opacity": 0.9,
          },
        });

        // Glowing edge effect (optional)
        map.addLayer(
          {
            id: "route-glow",
            type: "line",
            source: "route",
            layout: {
              "line-cap": "round",
              "line-join": "round",
            },
            paint: {
              "line-color": "#60a5fa",
              "line-width": 12,
              "line-opacity": 0.4,
            },
          },
          "route-line"
        ); // Render below main line
      });
    </script>
  </body>
</html>

Line Paint Properties​

PropertyRecommended ValuesEffect
"line-color"#0066ff, #ef4444Line color
"line-width"4–12Thickness in pixels
"line-opacity"0.7–1.0Transparency
"line-dasharray"[2, 2], [4, 2]Dashed line
"line-blur"2–8Soft glow effect

Pro Tip: Add a wider, semi-transparent line underneath for a glowing effect!

Line Layout Properties​

PropertyValuePurpose
"line-cap""round"Smooth ends
"line-join""round"Smooth corners

Always use "round" for natural-looking routes.

Advanced: Animated Dashed Line​

let step = 0;
setInterval(() => {
  step += 0.5;
  map.setPaintProperty("route-line", "line-dasharray", [0, step, 4, step]);
}, 100);

Creates a "marching ants" animation — great for live tracking!

Advanced: Gradient Line​

map.on("load", () => {
  map.addSource("route", {
    type: "geojson",
    data: route,
    lineMetrics: true, // Add this line
  });

  // Main route line
  map.addLayer({
    id: "route-line",
    type: "line",
    source: "route",
    layout: {
      "line-cap": "round",
      "line-join": "round",
    },
    paint: {
      "line-color": [
        "interpolate",
        ["linear"],
        ["line-progress"],
        0,
        "#ef4444",
        0.5,
        "#f59e0b",
        1,
        "#10b981",
      ],
      "line-width": 8,
      "line-opacity": 1,
      "line-gradient": [
        // Add this property
        "interpolate",
        ["linear"],
        ["line-progress"],
        0,
        "#ef4444",
        0.5,
        "#f59e0b",
        1,
        "#10b981",
      ],
    },
  });
});

Requires line-gradient and data with line-progress (advanced).

Draw routes that look professional — instantly.