ThomasG77/index.html

## 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: '&copy; <a href="http://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() {
    // save these original methods before they are overwritten
    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;

        // Ensure marker keeps rotated during dragging
        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) {
                    // for IE 9, use the 2D rotation
                    this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
                } else {
                    // for modern browsers, prefer the 3D accelerated version
                    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;
        }
    });
})();
	<!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="http://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>
	(function() {
	// save these original methods before they are overwritten
	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;

	// Ensure marker keeps rotated during dragging
	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) {
	// for IE 9, use the 2D rotation
	this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
	} else {
	// for modern browsers, prefer the 3D accelerated version
	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;
	}
	});
	})();