diff --git a/TeslaLogger/www/admin/index.php b/TeslaLogger/www/admin/index.php index d3e4f80a0..ce3dad30b 100644 --- a/TeslaLogger/www/admin/index.php +++ b/TeslaLogger/www/admin/index.php @@ -35,6 +35,7 @@ + @@ -337,7 +338,15 @@ function GetCurrentData() if (marker != null) map.removeLayer(marker) - marker = L.marker(p); + var icon = new L.Icon( + { + iconUrl: "static/images/arrow.png", + iconAnchor: [10, 10], + shadowSize: [0,0] + } + ); + + marker = L.marker(p, {icon : icon, rotationAngle: jsonData["heading"] }); marker.addTo(map); }); } diff --git a/TeslaLogger/www/admin/static/images/arrow.png b/TeslaLogger/www/admin/static/images/arrow.png new file mode 100644 index 000000000..78c3d67da Binary files /dev/null and b/TeslaLogger/www/admin/static/images/arrow.png differ diff --git a/TeslaLogger/www/admin/static/leaflet/1.4.0/leaflet.rotatedMarker.js b/TeslaLogger/www/admin/static/leaflet/1.4.0/leaflet.rotatedMarker.js new file mode 100644 index 000000000..cbc37666d --- /dev/null +++ b/TeslaLogger/www/admin/static/leaflet/1.4.0/leaflet.rotatedMarker.js @@ -0,0 +1,57 @@ +(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; + } + }); +})();