CODEWITHSUNDEEP
javascriptleafletopenstreetmapleaflet.markercluster
user22536823
user22536823

Reputation: 1

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

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

Upvotes: 0

Views: 427

Answers (1)

a_deeee
a_deeee

Reputation: 26

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>

Upvotes: 0

Related Questions