index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Leaflet rotated marker example</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
* { margin: 0; padding: 0; }
html, body { height: 100%; }
#map { width:100%; height:100%; }
</style>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="leaflet.rotatedMarker.js"></script>
<script>
window.onload = function() {
map = L.map('map', {
center: [36.73420679717254, -4.419465065002442],
zoom: 15,
layers: [
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="//osm.org/copyright">OpenStreetMap</a> contributors'
})
]
});
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Track of bus 699",
"times": [
"2019-11-23 10:51:06",
"2019-11-23 10:52:05",
"2019-11-23 10:53:05",
"2019-11-23 10:54:04",
"2019-11-23 10:55:05",
"2019-11-23 10:56:05",
"2019-11-23 10:57:05",
"2019-11-23 10:58:05",
"2019-11-23 10:59:05",
"2019-11-23 11:00:06"
],
"rotation": [
0,
0,
15,
15,
20,
25,
35,
45,
55,
60
]
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-4.4214296,
36.73835
],
[
-4.422104,
36.737865
],
[
-4.4229302,
36.73773
],
[
-4.4235334,
36.735817
],
[
-4.4222927,
36.73413
],
[
-4.4218254,
36.732475
],
[
-4.4213734,
36.72983
],
[
-4.420156,
36.73
],
[
-4.419239,
36.730686
],
[
-4.417272,
36.732136
]
]
}
}]
};
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon({iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-orange.png'});
L.geoJSON(data).addTo(map);
data.features.forEach((feature) => {
feature.geometry.coordinates.forEach((coord, index) => {
console.log(index, coord);
new L.marker([coord[1], coord[0]], {
icon: redIcon,
rotationAngle: feature.properties.rotation[index]
}).addTo(map)
})
})
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
leaflet.rotatedMarker.js
(function() {
var proto_initIcon = L.Marker.prototype._initIcon;
var proto_setPos = L.Marker.prototype._setPos;
var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');
L.Marker.addInitHook(function () {
var iconOptions = this.options.icon && this.options.icon.options;
var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
if (iconAnchor) {
iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
}
this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom' ;
this.options.rotationAngle = this.options.rotationAngle || 0;
this.on('drag', function(e) { e.target._applyRotation(); });
});
L.Marker.include({
_initIcon: function() {
proto_initIcon.call(this);
},
_setPos: function (pos) {
proto_setPos.call(this, pos);
this._applyRotation();
},
_applyRotation: function () {
if(this.options.rotationAngle) {
this._icon.style[L.DomUtil.TRANSFORM+'Origin'] = this.options.rotationOrigin;
if(oldIE) {
this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
} else {
this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)';
}
}
},
setRotationAngle: function(angle) {
this.options.rotationAngle = angle;
this.update();
return this;
},
setRotationOrigin: function(origin) {
this.options.rotationOrigin = origin;
this.update();
return this;
}
});
})();