/** Used rotation code from https://github.com/shramov/leaflet-plugins/blob/master/layer/Marker.Rotate.js
As its not availabel on CDN
*/
/*
* Based on comments by @runanet and @coomsie
* https://github.com/CloudMade/Leaflet/issues/386
*
* Wrapping function is needed to preserve L.Marker.update function
*/ (function () {
var _old__setPos = L.Marker.prototype._setPos;
L.Marker.include({
_updateImg: function (i, a, s) {
a = L.point(s).divideBy(2)._subtract(L.point(a));
var transform = '';
transform += ' translate(' + -a.x + 'px, ' + -a.y + 'px)';
transform += ' rotate(' + this.options.iconAngle + 'deg)';
transform += ' translate(' + a.x + 'px, ' + a.y + 'px)';
i.style[L.DomUtil.TRANSFORM] += transform;
},
setIconAngle: function (iconAngle) {
this.options.iconAngle = iconAngle;
if (this._map) this.update();
},
_setPos: function (pos) {
if (this._icon) this._icon.style[L.DomUtil.TRANSFORM] = '';
if (this._shadow) this._shadow.style[L.DomUtil.TRANSFORM] = '';
_old__setPos.apply(this, [pos]);
if (this.options.iconAngle) {
var defaultIcon = new L.Icon.Default;
var a = this.options.icon.options.iconAnchor || defaultIcon.options.iconAnchor;
var s = this.options.icon.options.iconSize || defaultIcon.options.iconSize;
var i;
if (this._icon) {
i = this._icon;
this._updateImg(i, a, s);
}
if (this._shadow) {
if (this.options.icon.options.shadowAnchor) a = this.options.icon.options.shadowAnchor;
s = this.options.icon.options.shadowSize;
i = this._shadow;
this._updateImg(i, a, s);
}
}
}
});
}());
//Rotation code ens here
//Arrow line code starts from here
var map = L.map('map').setView([21.1500, 79.0900], 5);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18
}).addTo(map);
var coordinates = [
[21.1500, 79.0900],
[18.948932, 72.776714],
[28.6139, 77.2090],
[25.6000, 85.1000],
[17.3700, 83.4800]
];
var arrowIcon = L.icon({
iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAdpJREFUOBGFVDtOA0EMnewGCS7ACeAYUIISEtpAxRGgRaLlFijiFkCAlgqJDokT0CAqJD7ZxLznsScT2GR35IzXnzdvbG9CWPZIKOhuS3u3lLKroWZbllbvyxIB9gB5TIGZL9kaFQltxoDdDsB8dTTPfI0YKUBCy3VA3SQ4Ke/cHrKYZFuoSFihD0AdBZtmv1L2NM9iFmIkR3YyYEYKJeUYO4XrPovVpqX3WmXGbs8ACDIx8Vrua24jy6x7APDa/UDnpSnUufJaLmFp3UNCzq5KcFJWBkjQvrHUafh/23p23wbgDAnktgaWM3bdjAVr52C+T9QSr+4d/8NyvrO3Buj1ciDfCeW+nGWa3YAh9bnrNbBzUDL35SwVowBYge9ibEU9sb1Se3wRbBMT6iTAzlaqhxBziKH2Gbt+OjN2kx3lMJOVL+q00Zd3PLHM2R3biV/KAV8edha7JUGeKNTNRh/ZfkL4xFy/KU7z2uW1oc4GHSJ1DbIK/QAyguTsfBLi/yXhEXAN8fWOD22Iv61t+uoe+LYQfQF5S1lSXmksDAMaCyleIGdgsjkHwhqz2FG0k8kvYQM5p5BnAx608HKOgNdpmF6iQh8aHOeS9atgi511lDofSlKE4ggh679ecGIXq+UAsgAAAABJRU5ErkJggg==',
iconSize: [20, 20],
iconAnchor: [10, 10],
popupAnchor: [-3, -76]
});
for (var i = 1; i < coordinates.length; i++) {
//Putting location marker
L.marker(coordinates[i]).addTo(map);
//Drawing simple line
L.polyline([coordinates[0], coordinates[i]], {
color: 'green'
}).addTo(map);
//Code for putting arrow with appropriate rotation
var firstPoint = coordinates[0].slice(),
secondPoint = coordinates[i].slice(),
slope = ((secondPoint[1] - firstPoint[1]) / (secondPoint[0] - firstPoint[0])),
angle = Math.atan(slope),
rotation;
//Shifting the graph Origin to point of start point
secondPoint[0] = secondPoint[0] - firstPoint[0];
secondPoint[1] = secondPoint[1] - firstPoint[1];
//Fourth quadrant
if (secondPoint[0] > 0 && secondPoint[1] < 0) {
rotation = (angle * 180/Math.PI)/2;
}
//Second quadrant
else if (secondPoint[0] < 0 && secondPoint[1] > 0) {
rotation = 180 + (angle * 180/Math.PI);
}
//Third quadrant
else if (secondPoint[0] < 0 && secondPoint[1] < 0) {
rotation = 180 + (angle * 180/Math.PI);
}
//First quadrant
else if (secondPoint[0] > 0 && secondPoint[1] > 0) {
rotation = (angle * 180/Math.PI);
}
L.marker(coordinates[i], {icon: arrowIcon,iconAngle: rotation}).addTo(map);
};
<div id="map" style="width:100%;height:500px"></div>
External resources loaded into this fiddle: