How to add arrow-marked lines in Leaflet map to indicate direction from one location to another?

Question

I'm working on a project involving Leaflet maps, and I'm trying to find a way to add arrow-marked lines to indicate direction from one location to another. Can someone please provide guidance or code examples on how to achieve this using Leaflet? Thank you.

Strategy for adding arrow lines pointing from multiple markers to indicate direction

Answer 1

You can try these two variations.

var map = L.map('map', {
  center: [22.610683, 75.680862],
  zoom: 8,
  layers: [
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    })
  ]
});

// --- Simple arrow ---
var arrow = L.polyline([
  [22.719568, 75.857727],
  [22.962267, 76.050797]
], {}).addTo(map);
var arrowHead = L.polylineDecorator(arrow, {
  patterns: [{
    offset: '100%',
    repeat: 0,
    symbol: L.Symbol.arrowHead({
      pixelSize: 15,
      polygon: false,
      pathOptions: {
        stroke: true
      }
    })
  }]
}).addTo(map);

// --- Example with an array of Polylines ---
var multiCoords1 = [
  [
  [22.610683, 75.680862],
  [22.062267, 76.050797],
  ],

];
var plArray = [];
for (var i = 0; i < multiCoords1.length; i++) {
  plArray.push(L.polyline(multiCoords1[i]).addTo(map));
}
L.polylineDecorator(multiCoords1, {
  patterns: [{
    offset: 25,
    repeat: 50,
    symbol: L.Symbol.arrowHead({
      pixelSize: 15,
      pathOptions: {
        fillOpacity: 1,
        weight: 0
      }
    })
  }]
}).addTo(map);

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

#map {
  height: 100%;
  width: 100%;
}

<div id="map"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-polylinedecorator/1.0.1/leaflet.polylineDecorator.min.js">
</script>