From 17e6406683c909f0c89970346dc14ad263e01b08 Mon Sep 17 00:00:00 2001 From: Igor Vladyka Date: Wed, 16 Feb 2022 15:49:30 +0200 Subject: [PATCH] Improved line rendering to prevent simplification. --- dist/leaflet.motion.js | 6 +++--- dist/leaflet.motion.min.js | 4 ++-- index.html | 10 +++++----- package.json | 2 +- src/leaflet.motion.js | 34 +++++++++++++++++++--------------- src/leaflet.motion.utils.js | 16 ++++++++++------ 6 files changed, 40 insertions(+), 32 deletions(-) diff --git a/dist/leaflet.motion.js b/dist/leaflet.motion.js index 5b217a0..ea610de 100644 --- a/dist/leaflet.motion.js +++ b/dist/leaflet.motion.js @@ -1,6 +1,6 @@ /*! * - * leaflet.motion - v0.3.1 (https://github.com/Igor-Vladyka/leaflet.motion#readme) + * leaflet.motion - v0.3.2 (https://github.com/Igor-Vladyka/leaflet.motion#readme) * Animation plugin for Leaflet.js * * MIT (http://www.opensource.org/licenses/mit-license.php) @@ -157,7 +157,7 @@ eval("/**\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tA /*! no static exports found */ /***/ (function(module, exports) { -eval("/**\r\n\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\tAuthor Igor Vladyka (https://github.com/Igor-Vladyka/leaflet.motion)\r\n**/\r\n\r\nL.Motion = L.Motion || {\r\n\tEvent: {\r\n\t\t\tStarted:\"motion-started\",\r\n\t\t\tPaused: \"motion-paused\",\r\n\t\t\tResumed: \"motion-resumed\",\r\n\t\t\tSection: \"motion-section\",\r\n\t\t\tEnded: \"motion-ended\"\r\n\t\t}\r\n\t};\r\n\r\nL.motion = L.motion || {};\r\nL.Motion.Animate = {\r\n\toptions: {\r\n\t\tpane: \"polymotionPane\",\r\n\t\tattribution: \"Leaflet.Motion © \" + (new Date()).getFullYear() + \" Igor Vladyka\"\r\n\t},\r\n\r\n\tmotionOptions: {\r\n\t\tauto: false,\r\n\t\teasing: function(x){ return x; }, // linear\r\n\t\tspeed: 0, // KM/H\r\n\t\tduration: 0 // ms\r\n\t},\r\n\r\n\tmarkerOptions: undefined,\r\n\r\n\tinitialize: function (latlngs, options, motionOptions, markerOptions) {\r\n\t\tL.Util.setOptions(this, options);\r\n\t\tif (motionOptions) {\r\n\t\t\tthis.motionOptions = L.Util.extend({}, this.motionOptions, motionOptions);\r\n\t\t}\r\n\r\n\t\tif (markerOptions) {\r\n\t\t\tthis.markerOptions = L.Util.extend({}, markerOptions);\r\n\t\t}\r\n\r\n\t\tthis._bounds = L.latLngBounds();\r\n\t\tthis._linePoints = this._convertLatLngs(latlngs);\r\n\t\tif (!L.Motion.Utils.isFlat(this._linePoints)) {\r\n\t\t\tthis._linePoints = this._linePoints[0];\r\n\t\t}\r\n\r\n\t\tthis._initializeMarker();\r\n\t\tthis._latlngs = [];\r\n\t\tL.Util.stamp(this); // Enforce proper animation order;\r\n\t},\r\n\r\n\taddLatLng: function(latLng, ring) {\r\n\t\tlatLng = L.Motion.Utils.toLatLng(latLng);\r\n\t\tthis._linePoints.push(latLng);\r\n\t\tif (this._latlngs.length) {\r\n\t\t\tthis._latlngs.push(latLng);\r\n\t\t}\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n @param {Map} map the Leaflet Map\r\n */\r\n\tbeforeAdd: function (map) {\r\n\t\tif (!map.getPane(this.options.pane)) {\r\n\t\t\tmap.createPane(this.options.pane).style.zIndex = 599;\r\n\t\t}\r\n\r\n\t\tthis._renderer = map.getRenderer(this);\r\n\t},\r\n\r\n\t/**\r\n @param {Map} map the Leaflet Map\r\n\t\t@return {MotionObject} this\r\n */\r\n onAdd: function (map) {\r\n\t\tthis._renderer._initPath(this);\r\n\t\tthis._reset();\r\n\t\tthis._renderer._addPath(this);\r\n\t\tif (this.__marker && this.markerOptions.showMarker) {\r\n\t\t\tthis.__marker.addTo(map);\r\n\r\n\t\t\tif(this.__marker._icon && this.__marker._icon.children.length){\r\n\t\t\t\tvar baseRotationAngle = this.__marker._icon.children[0].getAttribute(\"motion-base\");\r\n\t\t\t\tif(baseRotationAngle){\r\n\t\t\t\t\tthis.__marker._icon.children[0].style.transform = \"rotate(\" + baseRotationAngle + \"deg)\";\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (this.motionOptions.auto) {\r\n\t\t\tthis.motionStart();\r\n\t\t}\r\n\r\n return this;\r\n },\r\n\r\n\t/**\r\n @param {Map} map the Leaflet Map\r\n */\r\n\tonRemove: function (map) {\r\n\t\tthis.motionStop();\r\n\t\tif (this.__marker) {\r\n\t\t\tmap.removeLayer(this.__marker);\r\n\t\t}\r\n\r\n\t\tthis._renderer._removePath(this);\r\n\t},\r\n\r\n\t/**\r\n @param {DateTime} startTime time from start animation\r\n */\r\n _motion: function (startTime) {\r\n\t\tvar ellapsedTime = (new Date()).getTime() - startTime;\r\n var durationRatio = 1; // 0 - 1\r\n\t\tif (this.motionOptions.duration) {\r\n\t\t\tdurationRatio = ellapsedTime / this.motionOptions.duration;\r\n\t\t}\r\n\r\n\t\tif (durationRatio < 1) {\r\n\t\t\tdurationRatio = this.motionOptions.easing(durationRatio, ellapsedTime, 0, 1, this.motionOptions.duration);\r\n\t\t\tvar nextPoint = L.Motion.Utils.interpolateOnLine(this._map, this._linePoints, durationRatio);\r\n\r\n\t\t\tL.Polyline.prototype.addLatLng.call(this, nextPoint.latLng);\r\n\t\t\tthis._drawMarker(nextPoint.latLng);\r\n\r\n\t\t\tthis.__ellapsedTime = ellapsedTime;\r\n\t\t\tthis.animation = L.Util.requestAnimFrame(function(){\r\n\t\t\t\tthis._motion(startTime);\r\n\t\t\t}, this);\r\n\t\t} else {\r\n\t\t\tthis.motionStop(true);\r\n\t\t}\r\n },\r\n\r\n\t/**\r\n\t\tDraws marker according to line position\r\n @param {LatLng} nextPoint next animation point\r\n */\r\n\t_drawMarker: function (nextPoint) {\r\n\t\tvar marker = this.getMarker();\r\n\t\tif (marker) {\r\n\t\t\tvar prevPoint = marker.getLatLng();\r\n\r\n\t\t\t// [0, 0] Means that marker is not added yet to the map\r\n\t\t\tvar initialPoints = this._linePoints[0];\r\n\t\t\tif (prevPoint.lat === initialPoints.lat && prevPoint.lng === initialPoints.lng) {\r\n\t\t\t\tmarker.addTo(this._map);\r\n\t\t\t\tmarker.addEventParent(this);\r\n\t\t\t} else {\r\n\t\t\t\tif (marker._icon && marker._icon.children.length) {\r\n\t\t\t\t\tvar needToRotateMarker = marker._icon.children[0].getAttribute(\"motion-base\");\r\n\r\n\t\t\t\t\tif (needToRotateMarker) {\r\n\t\t\t\t\t\tvar motionMarkerOnLine = 0;\r\n\t\t\t\t\t\tif (needToRotateMarker && !isNaN(+needToRotateMarker)) {\r\n\t\t\t\t\t\t\tmotionMarkerOnLine = +needToRotateMarker;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tmarker._icon.children[0].style.transform = \"rotate(-\" + Math.round(L.Motion.Utils.getAngle(prevPoint, nextPoint) + motionMarkerOnLine) +\"deg)\";\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tmarker.setLatLng(nextPoint);\r\n\t\t}\r\n\t},\r\n\r\n\t/**\r\n Removes marker from the map\r\n */\r\n\t_removeMarker: function (animEnded) {\r\n\t\tif (this.markerOptions && this.__marker) {\r\n\t\t\tif (!animEnded || this.markerOptions.removeOnEnd) {\r\n\t\t\t\tthis._map.removeLayer(this.__marker);\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\r\n\t/**\r\n Initialize marker from marker options and add it to the map if needed\r\n */\r\n\t_initializeMarker: function () {\r\n\t\tif (this.markerOptions) {\r\n\t\t\tthis.__marker = L.marker(this._linePoints[0], this.markerOptions);\r\n\t\t}\r\n\t},\r\n\r\n\t/**\r\n Starts animation of current object\r\n */\r\n\tmotionStart: function () {\r\n\t\tif (this._map && !this.animation) {\r\n\t\t\tif (!this.motionOptions.duration) {\r\n\t\t\t\tif (this.motionOptions.speed) {\r\n\t\t\t\t\tthis.motionOptions.duration = L.Motion.Utils.getDuration(this._map, this._linePoints, this.motionOptions.speed);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.motionOptions.duration = 0;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tthis.setLatLngs([]);\r\n\t this._motion((new Date).getTime());\r\n\t\t\tthis.fire(L.Motion.Event.Started, {layer: this}, false);\r\n\t\t}\r\n\r\n\t\treturn this;\r\n },\r\n\r\n\t/**\r\n Stops animation of current object\r\n @param {LatLng[]} points full object points collection or empty collection for cleanup\r\n */\r\n motionStop: function (animEnded) {\r\n\t\tthis.motionPause();\r\n\t\tthis.setLatLngs(this._linePoints);\r\n\t\tthis.__ellapsedTime = null;\r\n\t\tthis._removeMarker(animEnded);\r\n\t\tthis.fire(L.Motion.Event.Ended, {layer: this}, false);\r\n\r\n\t\treturn this;\r\n },\r\n\r\n\t/**\r\n Pauses animation of current object\r\n */\r\n\tmotionPause: function () {\r\n\t\tif (this.animation) {\r\n\t\t\tL.Util.cancelAnimFrame(this.animation);\r\n\t\t\tthis.animation = null;\r\n\t\t\tthis.fire(L.Motion.Event.Paused, {layer: this}, false);\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n Resume animation of current object\r\n */\r\n\tmotionResume: function () {\r\n\t\tif (!this.animation && this.__ellapsedTime) {\r\n\t\t\tif (!this.motionOptions.duration) {\r\n\t\t\t\tif (this.motionOptions.speed) {\r\n\t\t\t\t\tthis.motionOptions.duration = L.Motion.Utils.getDuration(this._map, this._linePoints, this.motionOptions.speed);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.motionOptions.duration = 0;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tthis._motion((new Date).getTime() - (this.__ellapsedTime));\r\n\t\t\tthis.fire(L.Motion.Event.Resumed, {layer: this}, false);\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n Toggles animation of current object; Start/Pause/Resume;\r\n */\r\n\tmotionToggle: function () {\r\n\t\tif (this.animation) {\r\n\t\t\tif (this.__ellapsedTime) {\r\n\t\t\t\tthis.motionPause();\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (this.__ellapsedTime) {\r\n\t\t\t\tthis.motionResume();\r\n\t\t\t} else {\r\n\t\t\t\tthis.motionStart();\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n\t\tSetup motion duration at any time\r\n\t*/\r\n\tmotionDuration: function (duration) {\r\n\t\tvar prevDuration = this.motionSpeed.duration;\r\n\t\tthis.motionOptions.duration = duration || 0;\r\n\r\n\t\tif (this.animation && prevDuration) {\r\n\t\t\tthis.motionPause();\r\n\t\t this.__ellapsedTime = this.__ellapsedTime * (prevDuration / duration);\r\n\t\t this.motionOptions.duration = duration;\r\n\t\t\tthis.motionResume();\r\n\t\t}\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n\t\tSetup motion speed at any time\r\n\t*/\r\n\tmotionSpeed: function (speed) {\r\n\t\tvar prevSpeed = this.motionOptions.speed;\r\n\t\tthis.motionOptions.speed = speed || 0;\r\n\r\n\t\tif (this.animation && prevSpeed) {\r\n\t\t\tthis.motionPause();\r\n\t\t this.__ellapsedTime = this.__ellapsedTime * (prevSpeed / speed);\r\n\t\t this.motionOptions.duration = L.Motion.Utils.getDuration(this._map, this._linePoints, this.motionOptions.speed);\r\n\t\t\tthis.motionResume();\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n\t\tReturns current constructed marker\r\n\t*/\r\n\tgetMarker: function () {\r\n\t\treturn this.__marker;\r\n\t},\r\n\r\n\t/**\r\n\t\tReturns markers array from all inner layers without flattering.\r\n\t*/\r\n\tgetMarkers: function () {\r\n\t\treturn [this.getMarker()];\r\n\t}\r\n}\r\n\n\n//# sourceURL=webpack:///./src/leaflet.motion.js?"); +eval("/**\r\n\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\tAuthor Igor Vladyka (https://github.com/Igor-Vladyka/leaflet.motion)\r\n**/\r\n\r\nL.Motion = L.Motion || {\r\n\tEvent: {\r\n\t\t\tStarted:\"motion-started\",\r\n\t\t\tPaused: \"motion-paused\",\r\n\t\t\tResumed: \"motion-resumed\",\r\n\t\t\tSection: \"motion-section\",\r\n\t\t\tEnded: \"motion-ended\"\r\n\t\t}\r\n\t};\r\n\r\nL.motion = L.motion || {};\r\nL.Motion.Animate = {\r\n\toptions: {\r\n\t\tpane: \"polymotionPane\",\r\n\t\tattribution: \"Leaflet.Motion © \" + (new Date()).getFullYear() + \" Igor Vladyka\"\r\n\t},\r\n\r\n\tmotionOptions: {\r\n\t\tauto: false,\r\n\t\teasing: function(x){ return x; }, // linear\r\n\t\tspeed: 0, // KM/H\r\n\t\tduration: 0 // ms\r\n\t},\r\n\r\n\tmarkerOptions: undefined,\r\n\r\n\tinitialize: function (latlngs, options, motionOptions, markerOptions) {\r\n\t\tL.Util.setOptions(this, options);\r\n\t\tif (motionOptions) {\r\n\t\t\tthis.motionOptions = L.Util.extend({}, this.motionOptions, motionOptions);\r\n\t\t}\r\n\r\n\t\tif (markerOptions) {\r\n\t\t\tthis.markerOptions = L.Util.extend({}, markerOptions);\r\n\t\t}\r\n\r\n\t\tthis._bounds = L.latLngBounds();\r\n\t\tthis._linePoints = this._convertLatLngs(latlngs);\r\n\t\tif (!L.Motion.Utils.isFlat(this._linePoints)) {\r\n\t\t\tthis._linePoints = this._linePoints[0];\r\n\t\t}\r\n\r\n\t\tthis._initializeMarker();\r\n\t\tthis._latlngs = [];\r\n\t\tL.Util.stamp(this); // Enforce proper animation order;\r\n\t},\r\n\r\n\taddLatLng: function(latLng, ring) {\r\n\t\tlatLng = L.Motion.Utils.toLatLng(latLng);\r\n\t\tthis._linePoints.push(latLng);\r\n\t\tif (this._latlngs.length) {\r\n\t\t\tthis._latlngs.push(latLng);\r\n\t\t}\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n @param {Map} map the Leaflet Map\r\n */\r\n\tbeforeAdd: function (map) {\r\n\t\tif (!map.getPane(this.options.pane)) {\r\n\t\t\tmap.createPane(this.options.pane).style.zIndex = 599;\r\n\t\t}\r\n\r\n\t\tthis._renderer = map.getRenderer(this);\r\n\t},\r\n\r\n\t/**\r\n @param {Map} map the Leaflet Map\r\n\t\t@return {MotionObject} this\r\n */\r\n onAdd: function (map) {\r\n\t\tthis._renderer._initPath(this);\r\n\t\tthis._reset();\r\n\t\tthis._renderer._addPath(this);\r\n\t\tif (this.__marker && this.markerOptions.showMarker) {\r\n\t\t\tthis.__marker.addTo(map);\r\n\r\n\t\t\tif(this.__marker._icon && this.__marker._icon.children.length){\r\n\t\t\t\tArray.from(this.__marker._icon.children).forEach(function(icon) {\r\n\t\t\t\t\tvar baseRotationAngle = icon.getAttribute(\"motion-base\");\r\n\t\t\t\t\tif (baseRotationAngle) {\r\n\t\t\t\t\t\ticon.style.transform = \"rotate(\" + baseRotationAngle + \"deg)\";\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (this.motionOptions.auto) {\r\n\t\t\tthis.motionStart();\r\n\t\t}\r\n\r\n return this;\r\n },\r\n\r\n\t/**\r\n @param {Map} map the Leaflet Map\r\n */\r\n\tonRemove: function (map) {\r\n\t\tthis.motionStop();\r\n\t\tif (this.__marker) {\r\n\t\t\tmap.removeLayer(this.__marker);\r\n\t\t}\r\n\r\n\t\tthis._renderer._removePath(this);\r\n\t},\r\n\r\n\t/**\r\n @param {DateTime} startTime time from start animation\r\n */\r\n _motion: function (startTime) {\r\n\t\tvar ellapsedTime = (new Date()).getTime() - startTime;\r\n var durationRatio = 1; // 0 - 1\r\n\t\tif (this.motionOptions.duration) {\r\n\t\t\tdurationRatio = ellapsedTime / this.motionOptions.duration;\r\n\t\t}\r\n\r\n\t\tif (durationRatio < 1) {\r\n\t\t\tdurationRatio = this.motionOptions.easing(durationRatio, ellapsedTime, 0, 1, this.motionOptions.duration);\r\n\t\t\tvar interpolatedLine = L.Motion.Utils.interpolateOnLine(this._map, this._linePoints, durationRatio);\r\n\r\n\t\t\tthis.setLatLngs(interpolatedLine.traveledPath);\r\n\t\t\tthis._drawMarker(interpolatedLine.latLng);\r\n\r\n\t\t\tthis.__ellapsedTime = ellapsedTime;\r\n\t\t\tthis.animation = L.Util.requestAnimFrame(function(){\r\n\t\t\t\tthis._motion(startTime);\r\n\t\t\t}, this);\r\n\t\t} else {\r\n\t\t\tthis.motionStop(true);\r\n\t\t}\r\n },\r\n\r\n\t/**\r\n\t\tDraws marker according to line position\r\n @param {LatLng} nextPoint next animation point\r\n */\r\n\t_drawMarker: function (nextPoint) {\r\n\t\tvar marker = this.getMarker();\r\n\t\tif (marker) {\r\n\t\t\tvar prevPoint = marker.getLatLng();\r\n\r\n\t\t\t// [0, 0] Means that marker is not added yet to the map\r\n\t\t\tvar initialPoints = this._linePoints[0];\r\n\t\t\tif (prevPoint.lat === initialPoints.lat && prevPoint.lng === initialPoints.lng) {\r\n\t\t\t\tmarker.addTo(this._map);\r\n\t\t\t\tmarker.addEventParent(this);\r\n\t\t\t} else {\r\n\t\t\t\tif (marker._icon && marker._icon.children.length) {\r\n\t\t\t\t\tArray.from(marker._icon.children).forEach(function(icon) {\r\n\t\t\t\t\t\tvar needToRotateMarker = icon.getAttribute(\"motion-base\");\r\n\r\n\t\t\t\t\t\tif (needToRotateMarker) {\r\n\t\t\t\t\t\t\tvar motionMarkerOnLine = 0;\r\n\t\t\t\t\t\t\tif (needToRotateMarker && !isNaN(+needToRotateMarker)) {\r\n\t\t\t\t\t\t\t\tmotionMarkerOnLine = +needToRotateMarker;\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\ticon.style.transform = \"rotate(-\" + Math.round(L.Motion.Utils.getAngle(prevPoint, nextPoint) + motionMarkerOnLine) +\"deg)\";\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tmarker.setLatLng(nextPoint);\r\n\t\t}\r\n\t},\r\n\r\n\t/**\r\n Removes marker from the map\r\n */\r\n\t_removeMarker: function (animEnded) {\r\n\t\tif (this.markerOptions && this.__marker) {\r\n\t\t\tif (!animEnded || this.markerOptions.removeOnEnd) {\r\n\t\t\t\tthis._map.removeLayer(this.__marker);\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\r\n\t/**\r\n Initialize marker from marker options and add it to the map if needed\r\n */\r\n\t_initializeMarker: function () {\r\n\t\tif (this.markerOptions) {\r\n\t\t\tthis.__marker = L.marker(this._linePoints[0], this.markerOptions);\r\n\t\t}\r\n\t},\r\n\r\n\t/**\r\n Starts animation of current object\r\n */\r\n\tmotionStart: function () {\r\n\t\tif (this._map && !this.animation) {\r\n\t\t\tif (!this.motionOptions.duration) {\r\n\t\t\t\tif (this.motionOptions.speed) {\r\n\t\t\t\t\tthis.motionOptions.duration = L.Motion.Utils.getDuration(this._map, this._linePoints, this.motionOptions.speed);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.motionOptions.duration = 0;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tthis.setLatLngs([]);\r\n\t this._motion((new Date).getTime());\r\n\t\t\tthis.fire(L.Motion.Event.Started, {layer: this}, false);\r\n\t\t}\r\n\r\n\t\treturn this;\r\n },\r\n\r\n\t/**\r\n Stops animation of current object\r\n @param {LatLng[]} points full object points collection or empty collection for cleanup\r\n */\r\n motionStop: function (animEnded) {\r\n\t\tthis.motionPause();\r\n\t\tthis.setLatLngs(this._linePoints);\r\n\t\tthis.__ellapsedTime = null;\r\n\t\tthis._removeMarker(animEnded);\r\n\t\tthis.fire(L.Motion.Event.Ended, {layer: this}, false);\r\n\r\n\t\treturn this;\r\n },\r\n\r\n\t/**\r\n Pauses animation of current object\r\n */\r\n\tmotionPause: function () {\r\n\t\tif (this.animation) {\r\n\t\t\tL.Util.cancelAnimFrame(this.animation);\r\n\t\t\tthis.animation = null;\r\n\t\t\tthis.fire(L.Motion.Event.Paused, {layer: this}, false);\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n Resume animation of current object\r\n */\r\n\tmotionResume: function () {\r\n\t\tif (!this.animation && this.__ellapsedTime) {\r\n\t\t\tif (!this.motionOptions.duration) {\r\n\t\t\t\tif (this.motionOptions.speed) {\r\n\t\t\t\t\tthis.motionOptions.duration = L.Motion.Utils.getDuration(this._map, this._linePoints, this.motionOptions.speed);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.motionOptions.duration = 0;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tthis._motion((new Date).getTime() - (this.__ellapsedTime));\r\n\t\t\tthis.fire(L.Motion.Event.Resumed, {layer: this}, false);\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n Toggles animation of current object; Start/Pause/Resume;\r\n */\r\n\tmotionToggle: function () {\r\n\t\tif (this.animation) {\r\n\t\t\tif (this.__ellapsedTime) {\r\n\t\t\t\tthis.motionPause();\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (this.__ellapsedTime) {\r\n\t\t\t\tthis.motionResume();\r\n\t\t\t} else {\r\n\t\t\t\tthis.motionStart();\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n\t\tSetup motion duration at any time\r\n\t*/\r\n\tmotionDuration: function (duration) {\r\n\t\tvar prevDuration = this.motionSpeed.duration;\r\n\t\tthis.motionOptions.duration = duration || 0;\r\n\r\n\t\tif (this.animation && prevDuration) {\r\n\t\t\tthis.motionPause();\r\n\t\t this.__ellapsedTime = this.__ellapsedTime * (prevDuration / duration);\r\n\t\t this.motionOptions.duration = duration;\r\n\t\t\tthis.motionResume();\r\n\t\t}\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n\t\tSetup motion speed at any time\r\n\t*/\r\n\tmotionSpeed: function (speed) {\r\n\t\tvar prevSpeed = this.motionOptions.speed;\r\n\t\tthis.motionOptions.speed = speed || 0;\r\n\r\n\t\tif (this.animation && prevSpeed) {\r\n\t\t\tthis.motionPause();\r\n\t\t this.__ellapsedTime = this.__ellapsedTime * (prevSpeed / speed);\r\n\t\t this.motionOptions.duration = L.Motion.Utils.getDuration(this._map, this._linePoints, this.motionOptions.speed);\r\n\t\t\tthis.motionResume();\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/**\r\n\t\tReturns current constructed marker\r\n\t*/\r\n\tgetMarker: function () {\r\n\t\treturn this.__marker;\r\n\t},\r\n\r\n\t/**\r\n\t\tReturns markers array from all inner layers without flattering.\r\n\t*/\r\n\tgetMarkers: function () {\r\n\t\treturn [this.getMarker()];\r\n\t}\r\n}\r\n\n\n//# sourceURL=webpack:///./src/leaflet.motion.js?"); /***/ }), @@ -168,7 +168,7 @@ eval("/**\r\n\tMIT License http://www.opensource.org/licenses/mit-license.php\r\ /*! no static exports found */ /***/ (function(module, exports) { -eval("/**\r\n\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\tAuthor Igor Vladyka (https://github.com/Igor-Vladyka/leaflet.motion)\r\n**/\r\n\r\nL.Motion.Utils = {\r\n\t/**\r\n\t\tAttaches distances precalculated to current set of LatLng\r\n\t\t@param {L.Map} map Leaflet map to be calculate distances\r\n\t\t@param {Array|L.PolyLine} latlngs Set of geographical points\r\n\t\t@returns {Array|L.PolyLine} latlngs Set of geographical points with attached distances\r\n\t*/\r\n\tattachDistances: function(map, latLngs) {\r\n\t\tif (latLngs.length > 1) {\r\n\t\t\tfor (var i = 1; i < latLngs.length; i++) {\r\n\t\t\t\tlatLngs[i - 1].distanceToNextPoint = map.distance(latLngs[i - 1], latLngs[i]);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn latLngs;\r\n\t},\r\n\r\n\t/**\r\n\t\tReturns the coordinate of the point located on a line at the specified ratio of the line length.\r\n\t\t@param {L.Map} map Leaflet map to be used for this method\r\n\t\t@param {Array|L.PolyLine} latlngs Set of geographical points\r\n\t\t@param {Number} ratio the length ratio, expressed as a decimal between 0 and 1, inclusive\r\n\t\t@returns {Object} an object with latLng ({LatLng}) and predecessor ({Number}), the index of the preceding vertex in the Polyline\r\n\t\t(-1 if the interpolated point is the first vertex)\r\n\t*/\r\n\tinterpolateOnLine: function (map, latLngs, ratio) {\r\n\t\tlatLngs = (latLngs instanceof L.Polyline) ? latLngs.getLatLngs() : latLngs;\r\n\t\tif (latLngs.length < 2) {\r\n\t\t\treturn null;\r\n\t\t}\r\n\r\n\t\tvar allDistancesCalculated = true;\r\n\t\tfor (var d = 0; d < latLngs.length - 1; d++) {\r\n\t\t\tif (!latLngs[d].distanceToNextPoint) {\r\n\t\t\t\tallDistancesCalculated = false;\r\n\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (!allDistancesCalculated) {\r\n\t\t\tthis.attachDistances(map, latLngs);\r\n\t\t}\r\n\r\n\t\t// ensure the ratio is between 0 and 1;\r\n\t\tratio = Math.max(Math.min(ratio, 1), 0);\r\n\r\n\t\tif (ratio === 0) {\r\n\t\t\treturn {\r\n\t\t\t\tlatLng: latLngs[0] instanceof L.LatLng ? latLngs[0] : L.latLng(latLngs[0]),\r\n\t\t\t\tpredecessor: -1\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\tif (ratio == 1) {\r\n\t\t\treturn {\r\n\t\t\t\tlatLng: latLngs[latLngs.length -1] instanceof L.LatLng ? latLngs[latLngs.length -1] : L.latLng(latLngs[latLngs.length -1]),\r\n\t\t\t\tpredecessor: latLngs.length - 2\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\t// get full line length between points\r\n\t\tvar fullLength = 0;\r\n\t\tfor (var dIndex = 0; dIndex < latLngs.length - 1; dIndex++) {\r\n\t\t\tfullLength += latLngs[dIndex].distanceToNextPoint;\r\n\t\t}\r\n\r\n\t\t// Calculate expected ratio\r\n\t\tvar ratioDist = fullLength * ratio;\r\n\r\n\t\t// follow the line segments [ab], adding lengths,\r\n\t\t// until we find the segment where the points should lie on\r\n\t\tvar cumulativeDistanceToA = 0, cumulativeDistanceToB = 0;\r\n\t\tfor (var i = 0; cumulativeDistanceToB < ratioDist; i++) {\r\n\t\t\tvar pointA = latLngs[i], pointB = latLngs[i+1];\r\n\r\n\t\t\tcumulativeDistanceToA = cumulativeDistanceToB;\r\n\t\t\tcumulativeDistanceToB += pointA.distanceToNextPoint;\r\n\t\t}\r\n\r\n\t\tif (pointA == undefined && pointB == undefined) { // Happens when line has no length\r\n\t\t\tvar pointA = latLngs[0], pointB = latLngs[1], i = 1;\r\n\t\t}\r\n\r\n\t\t// compute the ratio relative to the segment [ab]\r\n\t\tvar segmentRatio = ((cumulativeDistanceToB - cumulativeDistanceToA) !== 0) ? ((ratioDist - cumulativeDistanceToA) / (cumulativeDistanceToB - cumulativeDistanceToA)) : 0;\r\n\t\treturn {\r\n\t\t\tlatLng: this.interpolateOnLatLngSegment(pointA, pointB, segmentRatio),\r\n\t\t\tpredecessor: i-1\r\n\t\t};\r\n\t},\r\n\r\n /**\r\n Returns the Point located on a segment at the specified ratio of the segment length.\r\n @param {L.Point} pA coordinates of point A\r\n @param {L.Point} pB coordinates of point B\r\n @param {Number} the length ratio, expressed as a decimal between 0 and 1, inclusive.\r\n @returns {L.Point} the interpolated point.\r\n */\r\n interpolateOnPointSegment: function (pA, pB, ratio) {\r\n return L.point(\r\n (pA.x * (1 - ratio)) + (ratio * pB.x),\r\n (pA.y * (1 - ratio)) + (ratio * pB.y)\r\n );\r\n },\r\n\r\n /**\r\n Returns the LatLng located on a segment at the specified ratio of the segment length.\r\n @param {L.LatLng} pA coordinates of LatLng A\r\n @param {L.LatLng} pB coordinates of LatLng B\r\n @param {Number} the length ratio, expressed as a decimal between 0 and 1, inclusive.\r\n @returns {L.LatLng} the interpolated LatLng.\r\n */\r\n interpolateOnLatLngSegment: function (pA, pB, ratio) {\r\n return L.latLng(\r\n (pA.lat * (1 - ratio)) + (ratio * pB.lat),\r\n (pA.lng * (1 - ratio)) + (ratio * pB.lng)\r\n );\r\n },\r\n\r\n\t/**\r\n\t\t@param {L.Map} map Leaflet map to be calculate distances\r\n @param {LatLng[]} linePoints of coordinates\r\n @return {Number} distance in meter\r\n */\r\n\tdistance: function(map, linePoints){\r\n\t\tvar distanceInMeter = 0;\r\n for (var i = 1; i < linePoints.length; i++) {\r\n distanceInMeter += map.distance(linePoints[i], linePoints[i - 1]);\r\n }\r\n\r\n return distanceInMeter;\r\n\t},\r\n\r\n\t/**\r\n\t\t@param {L.Map} map Leaflet map to be calculate distances\r\n @param {LatLng[]} collection of coordinates\r\n @param {Number} speed in KM/H\r\n @return {Number} duration in ms\r\n */\r\n\tgetDuration: function (map, collection, speed) {\r\n\t\tvar distance = L.Motion.Utils.distance(map, collection.map(function(m){ return L.Motion.Utils.toLatLng(m); })); // in meters;\r\n\t\treturn distance/(speed/3600); // m / (km/h * 1000 => m/h / (60 * 60)) => m / k/s (m/s * 1000) => 1000 * m / m/s => ms;\r\n\t},\r\n\r\n\ttoLatLng: function(a, b, c) {\r\n\t\tif (a instanceof L.LatLng) {\r\n\t\t\treturn a;\r\n\t\t}\r\n\t\tif (L.Util.isArray(a) && typeof a[0] !== 'object') {\r\n\t\t\tif (a.length === 3) {\r\n\t\t\t\treturn L.latLng(a[0], a[1], a[2]);\r\n\t\t\t}\r\n\t\t\tif (a.length === 2) {\r\n\t\t\t\treturn L.latLng(a[0], a[1]);\r\n\t\t\t}\r\n\t\t\treturn null;\r\n\t\t}\r\n\t\tif (a === undefined || a === null) {\r\n\t\t\treturn a;\r\n\t\t}\r\n\t\tif (typeof a === 'object' && 'lat' in a) {\r\n\t\t\treturn L.latLng(a.lat, 'lng' in a ? a.lng : a.lon, a.alt);\r\n\t\t}\r\n\t\tif (b === undefined) {\r\n\t\t\treturn null;\r\n\t\t}\r\n\t\treturn L.latLng(a, b, c);\r\n\t},\r\n\r\n\tgetAngle: function(prevPoint, nextPoint) {\r\n\t\tvar angle = Math.atan2(nextPoint.lat - prevPoint.lat, nextPoint.lng - prevPoint.lng) * 180 / Math.PI;\r\n\t\tif (angle < 0) {\r\n\t\t\tangle += 360;\r\n\t\t}\r\n\r\n\t\treturn angle;\r\n\t},\r\n\r\n\t// Leaflet -> geometries -> LineUtil\r\n\tisFlat: function (latlngs) {\r\n\t\treturn !L.Util.isArray(latlngs[0]) || (typeof latlngs[0][0] !== 'object' && typeof latlngs[0][0] !== 'undefined');\r\n\t}\r\n};\r\n\n\n//# sourceURL=webpack:///./src/leaflet.motion.utils.js?"); +eval("/**\r\n\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\tAuthor Igor Vladyka (https://github.com/Igor-Vladyka/leaflet.motion)\r\n**/\r\n\r\nL.Motion.Utils = {\r\n\t/**\r\n\t\tAttaches distances precalculated to current set of LatLng\r\n\t\t@param {L.Map} map Leaflet map to be calculate distances\r\n\t\t@param {Array|L.PolyLine} latlngs Set of geographical points\r\n\t\t@returns {Array|L.PolyLine} latlngs Set of geographical points with attached distances\r\n\t*/\r\n\tattachDistances: function(map, latLngs) {\r\n\t\tif (latLngs.length > 1) {\r\n\t\t\tfor (var i = 1; i < latLngs.length; i++) {\r\n\t\t\t\tlatLngs[i - 1].distanceToNextPoint = map.distance(latLngs[i - 1], latLngs[i]);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn latLngs;\r\n\t},\r\n\r\n\t/**\r\n\t\tReturns the coordinate of the point located on a line at the specified ratio of the line length.\r\n\t\t@param {L.Map} map Leaflet map to be used for this method\r\n\t\t@param {Array|L.PolyLine} latlngs Set of geographical points\r\n\t\t@param {Number} ratio the length ratio, expressed as a decimal between 0 and 1, inclusive\r\n\t\t@returns {Object} an object with latLng ({LatLng}) and predecessor ({Number}), the index of the preceding vertex in the Polyline\r\n\t\t(-1 if the interpolated point is the first vertex)\r\n\t*/\r\n\tinterpolateOnLine: function (map, latLngs, ratio) {\r\n\t\tlatLngs = (latLngs instanceof L.Polyline) ? latLngs.getLatLngs() : latLngs;\r\n\t\tif (latLngs.length < 2) {\r\n\t\t\treturn null;\r\n\t\t}\r\n\r\n\t\tvar allDistancesCalculated = true;\r\n\t\tfor (var d = 0; d < latLngs.length - 1; d++) {\r\n\t\t\tif (!latLngs[d].distanceToNextPoint) {\r\n\t\t\t\tallDistancesCalculated = false;\r\n\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (!allDistancesCalculated) {\r\n\t\t\tthis.attachDistances(map, latLngs);\r\n\t\t}\r\n\r\n\t\t// ensure the ratio is between 0 and 1;\r\n\t\tratio = Math.max(Math.min(ratio, 1), 0);\r\n\r\n\t\tif (ratio === 0) {\r\n\t\t\tvar singlePoint = latLngs[0] instanceof L.LatLng ? latLngs[0] : L.latLng(latLngs[0]);\r\n\t\t\treturn {\r\n\t\t\t\ttraveledPath: [singlePoint],\r\n\t\t\t\tlatLng: singlePoint\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\tif (ratio == 1) {\r\n\t\t\treturn {\r\n\t\t\t\ttraveledPath: latLngs,\r\n\t\t\t\tlatLng: latLngs[latLngs.length -1] instanceof L.LatLng ? latLngs[latLngs.length -1] : L.latLng(latLngs[latLngs.length -1])\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\t// get full line length between points\r\n\t\tvar fullLength = 0;\r\n\t\tfor (var dIndex = 0; dIndex < latLngs.length - 1; dIndex++) {\r\n\t\t\tfullLength += latLngs[dIndex].distanceToNextPoint;\r\n\t\t}\r\n\r\n\t\t// Calculate expected ratio\r\n\t\tvar ratioDist = fullLength * ratio;\r\n\r\n\t\t// follow the line segments [ab], adding lengths,\r\n\t\t// until we find the segment where the points should lie on\r\n\t\tvar cumulativeDistanceToA = 0, cumulativeDistanceToB = 0;\r\n\t\tfor (var i = 0; cumulativeDistanceToB < ratioDist; i++) {\r\n\t\t\tvar pointA = latLngs[i], pointB = latLngs[i+1];\r\n\r\n\t\t\tcumulativeDistanceToA = cumulativeDistanceToB;\r\n\t\t\tcumulativeDistanceToB += pointA.distanceToNextPoint;\r\n\t\t}\r\n\r\n\t\tif (pointA == undefined && pointB == undefined) { // Happens when line has no length\r\n\t\t\tvar pointA = latLngs[0], pointB = latLngs[1], i = 1;\r\n\t\t}\r\n\r\n\t\t// compute the ratio relative to the segment [ab]\r\n\t\tvar segmentRatio = ((cumulativeDistanceToB - cumulativeDistanceToA) !== 0) ? ((ratioDist - cumulativeDistanceToA) / (cumulativeDistanceToB - cumulativeDistanceToA)) : 0;\r\n\t\tvar interpolatedPoint = this.interpolateOnLatLngSegment(pointA, pointB, segmentRatio);\r\n\t\tvar traveledPath = latLngs.slice(0, i);\r\n\t\ttraveledPath.push(interpolatedPoint);\r\n\t\treturn {\r\n\t\t\ttraveledPath: traveledPath,\r\n\t\t\tlatLng: interpolatedPoint\r\n\t\t};\r\n\t},\r\n\r\n /**\r\n Returns the Point located on a segment at the specified ratio of the segment length.\r\n @param {L.Point} pA coordinates of point A\r\n @param {L.Point} pB coordinates of point B\r\n @param {Number} the length ratio, expressed as a decimal between 0 and 1, inclusive.\r\n @returns {L.Point} the interpolated point.\r\n */\r\n interpolateOnPointSegment: function (pA, pB, ratio) {\r\n return L.point(\r\n (pA.x * (1 - ratio)) + (ratio * pB.x),\r\n (pA.y * (1 - ratio)) + (ratio * pB.y)\r\n );\r\n },\r\n\r\n /**\r\n Returns the LatLng located on a segment at the specified ratio of the segment length.\r\n @param {L.LatLng} pA coordinates of LatLng A\r\n @param {L.LatLng} pB coordinates of LatLng B\r\n @param {Number} the length ratio, expressed as a decimal between 0 and 1, inclusive.\r\n @returns {L.LatLng} the interpolated LatLng.\r\n */\r\n interpolateOnLatLngSegment: function (pA, pB, ratio) {\r\n return L.latLng(\r\n (pA.lat * (1 - ratio)) + (ratio * pB.lat),\r\n (pA.lng * (1 - ratio)) + (ratio * pB.lng)\r\n );\r\n },\r\n\r\n\t/**\r\n\t\t@param {L.Map} map Leaflet map to be calculate distances\r\n @param {LatLng[]} linePoints of coordinates\r\n @return {Number} distance in meter\r\n */\r\n\tdistance: function(map, linePoints){\r\n\t\tvar distanceInMeter = 0;\r\n for (var i = 1; i < linePoints.length; i++) {\r\n distanceInMeter += map.distance(linePoints[i], linePoints[i - 1]);\r\n }\r\n\r\n return distanceInMeter;\r\n\t},\r\n\r\n\t/**\r\n\t\t@param {L.Map} map Leaflet map to be calculate distances\r\n @param {LatLng[]} collection of coordinates\r\n @param {Number} speed in KM/H\r\n @return {Number} duration in ms\r\n */\r\n\tgetDuration: function (map, collection, speed) {\r\n\t\tvar distance = L.Motion.Utils.distance(map, collection.map(function(m){ return L.Motion.Utils.toLatLng(m); })); // in meters;\r\n\t\treturn distance/(speed/3600); // m / (km/h * 1000 => m/h / (60 * 60)) => m / k/s (m/s * 1000) => 1000 * m / m/s => ms;\r\n\t},\r\n\r\n\ttoLatLng: function(a, b, c) {\r\n\t\tif (a instanceof L.LatLng) {\r\n\t\t\treturn a;\r\n\t\t}\r\n\t\tif (L.Util.isArray(a) && typeof a[0] !== 'object') {\r\n\t\t\tif (a.length === 3) {\r\n\t\t\t\treturn L.latLng(a[0], a[1], a[2]);\r\n\t\t\t}\r\n\t\t\tif (a.length === 2) {\r\n\t\t\t\treturn L.latLng(a[0], a[1]);\r\n\t\t\t}\r\n\t\t\treturn null;\r\n\t\t}\r\n\t\tif (a === undefined || a === null) {\r\n\t\t\treturn a;\r\n\t\t}\r\n\t\tif (typeof a === 'object' && 'lat' in a) {\r\n\t\t\treturn L.latLng(a.lat, 'lng' in a ? a.lng : a.lon, a.alt);\r\n\t\t}\r\n\t\tif (b === undefined) {\r\n\t\t\treturn null;\r\n\t\t}\r\n\t\treturn L.latLng(a, b, c);\r\n\t},\r\n\r\n\tgetAngle: function(prevPoint, nextPoint) {\r\n\t\tvar angle = Math.atan2(nextPoint.lat - prevPoint.lat, nextPoint.lng - prevPoint.lng) * 180 / Math.PI;\r\n\t\tif (angle < 0) {\r\n\t\t\tangle += 360;\r\n\t\t}\r\n\r\n\t\treturn angle;\r\n\t},\r\n\r\n\t// Leaflet -> geometries -> LineUtil\r\n\tisFlat: function (latlngs) {\r\n\t\treturn !L.Util.isArray(latlngs[0]) || (typeof latlngs[0][0] !== 'object' && typeof latlngs[0][0] !== 'undefined');\r\n\t}\r\n};\r\n\n\n//# sourceURL=webpack:///./src/leaflet.motion.utils.js?"); /***/ }), diff --git a/dist/leaflet.motion.min.js b/dist/leaflet.motion.min.js index e8a272b..22777bb 100644 --- a/dist/leaflet.motion.min.js +++ b/dist/leaflet.motion.min.js @@ -1,9 +1,9 @@ /*! * - * leaflet.motion - v0.3.1 (https://github.com/Igor-Vladyka/leaflet.motion#readme) + * leaflet.motion - v0.3.2 (https://github.com/Igor-Vladyka/leaflet.motion#readme) * Animation plugin for Leaflet.js * * MIT (http://www.opensource.org/licenses/mit-license.php) * (c) 2022 Igor Vladyka (https://github.com/Igor-Vladyka/) * - */!function(t){var n={};function i(e){if(n[e])return n[e].exports;var o=n[e]={i:e,l:!1,exports:{}};return t[e].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=t,i.c=n,i.d=function(t,n,e){i.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:e})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,n){if(1&n&&(t=i(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(i.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var o in t)i.d(e,o,function(n){return t[n]}.bind(null,o));return e},i.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(n,"a",n),n},i.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},i.p="",i(i.s=0)}([function(t,n,i){i(1),i(2),i(3),i(4),i(5),i(6),t.exports=i(7)},function(t,n){L.Motion=L.Motion||{Event:{Started:"motion-started",Paused:"motion-paused",Resumed:"motion-resumed",Section:"motion-section",Ended:"motion-ended"}},L.motion=L.motion||{},L.Motion.Animate={options:{pane:"polymotionPane",attribution:"Leaflet.Motion © "+(new Date).getFullYear()+" Igor Vladyka"},motionOptions:{auto:!1,easing:function(t){return t},speed:0,duration:0},markerOptions:void 0,initialize:function(t,n,i,e){L.Util.setOptions(this,n),i&&(this.motionOptions=L.Util.extend({},this.motionOptions,i)),e&&(this.markerOptions=L.Util.extend({},e)),this._bounds=L.latLngBounds(),this._linePoints=this._convertLatLngs(t),L.Motion.Utils.isFlat(this._linePoints)||(this._linePoints=this._linePoints[0]),this._initializeMarker(),this._latlngs=[],L.Util.stamp(this)},addLatLng:function(t,n){return t=L.Motion.Utils.toLatLng(t),this._linePoints.push(t),this._latlngs.length&&this._latlngs.push(t),this},beforeAdd:function(t){t.getPane(this.options.pane)||(t.createPane(this.options.pane).style.zIndex=599),this._renderer=t.getRenderer(this)},onAdd:function(t){if(this._renderer._initPath(this),this._reset(),this._renderer._addPath(this),this.__marker&&this.markerOptions.showMarker&&(this.__marker.addTo(t),this.__marker._icon&&this.__marker._icon.children.length)){var n=this.__marker._icon.children[0].getAttribute("motion-base");n&&(this.__marker._icon.children[0].style.transform="rotate("+n+"deg)")}return this.motionOptions.auto&&this.motionStart(),this},onRemove:function(t){this.motionStop(),this.__marker&&t.removeLayer(this.__marker),this._renderer._removePath(this)},_motion:function(t){var n=(new Date).getTime()-t,i=1;if(this.motionOptions.duration&&(i=n/this.motionOptions.duration),i<1){i=this.motionOptions.easing(i,n,0,1,this.motionOptions.duration);var e=L.Motion.Utils.interpolateOnLine(this._map,this._linePoints,i);L.Polyline.prototype.addLatLng.call(this,e.latLng),this._drawMarker(e.latLng),this.__ellapsedTime=n,this.animation=L.Util.requestAnimFrame((function(){this._motion(t)}),this)}else this.motionStop(!0)},_drawMarker:function(t){var n=this.getMarker();if(n){var i=n.getLatLng(),e=this._linePoints[0];if(i.lat===e.lat&&i.lng===e.lng)n.addTo(this._map),n.addEventParent(this);else if(n._icon&&n._icon.children.length){var o=n._icon.children[0].getAttribute("motion-base");if(o){var r=0;o&&!isNaN(+o)&&(r=+o),n._icon.children[0].style.transform="rotate(-"+Math.round(L.Motion.Utils.getAngle(i,t)+r)+"deg)"}}n.setLatLng(t)}},_removeMarker:function(t){this.markerOptions&&this.__marker&&(t&&!this.markerOptions.removeOnEnd||this._map.removeLayer(this.__marker))},_initializeMarker:function(){this.markerOptions&&(this.__marker=L.marker(this._linePoints[0],this.markerOptions))},motionStart:function(){return this._map&&!this.animation&&(this.motionOptions.duration||(this.motionOptions.speed?this.motionOptions.duration=L.Motion.Utils.getDuration(this._map,this._linePoints,this.motionOptions.speed):this.motionOptions.duration=0),this.setLatLngs([]),this._motion((new Date).getTime()),this.fire(L.Motion.Event.Started,{layer:this},!1)),this},motionStop:function(t){return this.motionPause(),this.setLatLngs(this._linePoints),this.__ellapsedTime=null,this._removeMarker(t),this.fire(L.Motion.Event.Ended,{layer:this},!1),this},motionPause:function(){return this.animation&&(L.Util.cancelAnimFrame(this.animation),this.animation=null,this.fire(L.Motion.Event.Paused,{layer:this},!1)),this},motionResume:function(){return!this.animation&&this.__ellapsedTime&&(this.motionOptions.duration||(this.motionOptions.speed?this.motionOptions.duration=L.Motion.Utils.getDuration(this._map,this._linePoints,this.motionOptions.speed):this.motionOptions.duration=0),this._motion((new Date).getTime()-this.__ellapsedTime),this.fire(L.Motion.Event.Resumed,{layer:this},!1)),this},motionToggle:function(){return this.animation?this.__ellapsedTime&&this.motionPause():this.__ellapsedTime?this.motionResume():this.motionStart(),this},motionDuration:function(t){var n=this.motionSpeed.duration;return this.motionOptions.duration=t||0,this.animation&&n&&(this.motionPause(),this.__ellapsedTime=this.__ellapsedTime*(n/t),this.motionOptions.duration=t,this.motionResume()),this},motionSpeed:function(t){var n=this.motionOptions.speed;return this.motionOptions.speed=t||0,this.animation&&n&&(this.motionPause(),this.__ellapsedTime=this.__ellapsedTime*(n/t),this.motionOptions.duration=L.Motion.Utils.getDuration(this._map,this._linePoints,this.motionOptions.speed),this.motionResume()),this},getMarker:function(){return this.__marker},getMarkers:function(){return[this.getMarker()]}}},function(t,n){L.Motion.Utils={attachDistances:function(t,n){if(n.length>1)for(var i=1;io?n[o].motionStart():this.motionStop(!0)},__putActiveLayer__:function(t){this._activeLayer=t.layer,this.fire(L.Motion.Event.Section,{layer:this._activeLayer},!1)}}),L.motion.seq=function(t,n){return new L.Motion.Seq(t,n)}}]); \ No newline at end of file + */!function(t){var n={};function i(e){if(n[e])return n[e].exports;var o=n[e]={i:e,l:!1,exports:{}};return t[e].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=t,i.c=n,i.d=function(t,n,e){i.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:e})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,n){if(1&n&&(t=i(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(i.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var o in t)i.d(e,o,function(n){return t[n]}.bind(null,o));return e},i.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(n,"a",n),n},i.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},i.p="",i(i.s=0)}([function(t,n,i){i(1),i(2),i(3),i(4),i(5),i(6),t.exports=i(7)},function(t,n){L.Motion=L.Motion||{Event:{Started:"motion-started",Paused:"motion-paused",Resumed:"motion-resumed",Section:"motion-section",Ended:"motion-ended"}},L.motion=L.motion||{},L.Motion.Animate={options:{pane:"polymotionPane",attribution:"Leaflet.Motion © "+(new Date).getFullYear()+" Igor Vladyka"},motionOptions:{auto:!1,easing:function(t){return t},speed:0,duration:0},markerOptions:void 0,initialize:function(t,n,i,e){L.Util.setOptions(this,n),i&&(this.motionOptions=L.Util.extend({},this.motionOptions,i)),e&&(this.markerOptions=L.Util.extend({},e)),this._bounds=L.latLngBounds(),this._linePoints=this._convertLatLngs(t),L.Motion.Utils.isFlat(this._linePoints)||(this._linePoints=this._linePoints[0]),this._initializeMarker(),this._latlngs=[],L.Util.stamp(this)},addLatLng:function(t,n){return t=L.Motion.Utils.toLatLng(t),this._linePoints.push(t),this._latlngs.length&&this._latlngs.push(t),this},beforeAdd:function(t){t.getPane(this.options.pane)||(t.createPane(this.options.pane).style.zIndex=599),this._renderer=t.getRenderer(this)},onAdd:function(t){return this._renderer._initPath(this),this._reset(),this._renderer._addPath(this),this.__marker&&this.markerOptions.showMarker&&(this.__marker.addTo(t),this.__marker._icon&&this.__marker._icon.children.length&&Array.from(this.__marker._icon.children).forEach((function(t){var n=t.getAttribute("motion-base");n&&(t.style.transform="rotate("+n+"deg)")}))),this.motionOptions.auto&&this.motionStart(),this},onRemove:function(t){this.motionStop(),this.__marker&&t.removeLayer(this.__marker),this._renderer._removePath(this)},_motion:function(t){var n=(new Date).getTime()-t,i=1;if(this.motionOptions.duration&&(i=n/this.motionOptions.duration),i<1){i=this.motionOptions.easing(i,n,0,1,this.motionOptions.duration);var e=L.Motion.Utils.interpolateOnLine(this._map,this._linePoints,i);this.setLatLngs(e.traveledPath),this._drawMarker(e.latLng),this.__ellapsedTime=n,this.animation=L.Util.requestAnimFrame((function(){this._motion(t)}),this)}else this.motionStop(!0)},_drawMarker:function(t){var n=this.getMarker();if(n){var i=n.getLatLng(),e=this._linePoints[0];i.lat===e.lat&&i.lng===e.lng?(n.addTo(this._map),n.addEventParent(this)):n._icon&&n._icon.children.length&&Array.from(n._icon.children).forEach((function(n){var e=n.getAttribute("motion-base");if(e){var o=0;e&&!isNaN(+e)&&(o=+e),n.style.transform="rotate(-"+Math.round(L.Motion.Utils.getAngle(i,t)+o)+"deg)"}})),n.setLatLng(t)}},_removeMarker:function(t){this.markerOptions&&this.__marker&&(t&&!this.markerOptions.removeOnEnd||this._map.removeLayer(this.__marker))},_initializeMarker:function(){this.markerOptions&&(this.__marker=L.marker(this._linePoints[0],this.markerOptions))},motionStart:function(){return this._map&&!this.animation&&(this.motionOptions.duration||(this.motionOptions.speed?this.motionOptions.duration=L.Motion.Utils.getDuration(this._map,this._linePoints,this.motionOptions.speed):this.motionOptions.duration=0),this.setLatLngs([]),this._motion((new Date).getTime()),this.fire(L.Motion.Event.Started,{layer:this},!1)),this},motionStop:function(t){return this.motionPause(),this.setLatLngs(this._linePoints),this.__ellapsedTime=null,this._removeMarker(t),this.fire(L.Motion.Event.Ended,{layer:this},!1),this},motionPause:function(){return this.animation&&(L.Util.cancelAnimFrame(this.animation),this.animation=null,this.fire(L.Motion.Event.Paused,{layer:this},!1)),this},motionResume:function(){return!this.animation&&this.__ellapsedTime&&(this.motionOptions.duration||(this.motionOptions.speed?this.motionOptions.duration=L.Motion.Utils.getDuration(this._map,this._linePoints,this.motionOptions.speed):this.motionOptions.duration=0),this._motion((new Date).getTime()-this.__ellapsedTime),this.fire(L.Motion.Event.Resumed,{layer:this},!1)),this},motionToggle:function(){return this.animation?this.__ellapsedTime&&this.motionPause():this.__ellapsedTime?this.motionResume():this.motionStart(),this},motionDuration:function(t){var n=this.motionSpeed.duration;return this.motionOptions.duration=t||0,this.animation&&n&&(this.motionPause(),this.__ellapsedTime=this.__ellapsedTime*(n/t),this.motionOptions.duration=t,this.motionResume()),this},motionSpeed:function(t){var n=this.motionOptions.speed;return this.motionOptions.speed=t||0,this.animation&&n&&(this.motionPause(),this.__ellapsedTime=this.__ellapsedTime*(n/t),this.motionOptions.duration=L.Motion.Utils.getDuration(this._map,this._linePoints,this.motionOptions.speed),this.motionResume()),this},getMarker:function(){return this.__marker},getMarkers:function(){return[this.getMarker()]}}},function(t,n){L.Motion.Utils={attachDistances:function(t,n){if(n.length>1)for(var i=1;io?n[o].motionStart():this.motionStop(!0)},__putActiveLayer__:function(t){this._activeLayer=t.layer,this.fire(L.Motion.Event.Section,{layer:this._activeLayer},!1)}}),L.motion.seq=function(t,n){return new L.Motion.Seq(t,n)}}]); \ No newline at end of file diff --git a/index.html b/index.html index 7009acc..0ddb227 100644 --- a/index.html +++ b/index.html @@ -12,14 +12,14 @@ - + +