diff --git a/dist/LeafletPlayback.js b/dist/LeafletPlayback.js index 1d6b9ae..da58669 100644 --- a/dist/LeafletPlayback.js +++ b/dist/LeafletPlayback.js @@ -36,7 +36,7 @@ L.Playback.Util = L.Class.extend({ if (h > 11) { h %= 12; mer = 'PM'; - } + } if (h === 0) h = 12; if (m < 10) m = '0' + m; if (s < 10) s = '0' + s; @@ -44,40 +44,65 @@ L.Playback.Util = L.Class.extend({ }, ParseGPX: function(gpx) { - var geojson = { - type: 'Feature', - geometry: { - type: 'MultiPoint', - coordinates: [] - }, - properties: { - time: [], - speed: [], - altitude: [] - }, - bbox: [] + + var geojsonRoot = { + type: 'FeatureCollection', + features : [] }; + + + var xml = $.parseXML(gpx); - var pts = $(xml).find('trkpt'); - for (var i=0, len=pts.length; i' + this.popupContent + '
'; + // if (this.popupContent !== '') { + // return this.popupContent; + // } + + if (this.marker_options.getPopup) { + this.popupContent = this.marker_options.getPopup( + this.feature, + this.index + ); + return this.popupContent } - return ''; + return this._latlng.toString(); }, - move: function (latLng, transitionTime) { + move: function (latLng, transitionTime, index) { + if (index > -1) this.index = index; // Only if CSS3 transitions are supported if (L.DomUtil.TRANSITION) { if (this._icon) { @@ -141,12 +176,18 @@ L.Playback.MoveableMarker = L.Marker.extend({ } } this.setLatLng(latLng); + + if (this.marker_options.getIcon) { + icon = this.marker_options.getIcon(this.feature, this.index); + this.setIcon(icon); + } + if (this._popup) { - this._popup.setContent(this.getPopupContent() + this._latlng.toString()); + this._popup.setContent(this.getPopupContent()); } }, - // modify leaflet markers to add our roration code + // modify leaflet markers to add our rotation code /* * Based on comments by @runanet and @coomsie * https://github.com/CloudMade/Leaflet/issues/386 @@ -470,7 +511,12 @@ L.Playback.Track = L.Class.extend({ return this._marker; }, - moveMarker : function(latLng, transitionTime,timestamp) { + moveMarker : function(latLng, transitionTime, timestamp) { + var markerIndex = this._geoJSON.geometry.coordinates.findIndex((f, i) => { + var currLatLng = new L.LatLng(f[1], f[0]); + return currLatLng.equals(latLng); + }); + if (this._marker) { if(this._fadeMarkersWhenStale) { //show the marker if its now present @@ -489,7 +535,7 @@ L.Playback.Track = L.Class.extend({ this._marker.setIconAngle(this.courseAtTime(timestamp)); } - this._marker.move(latLng, transitionTime); + this._marker.move(latLng, transitionTime, markerIndex); } }, @@ -894,7 +940,7 @@ L.Playback = L.Playback.Clock.extend({ TrackController : L.Playback.TrackController, Clock : L.Playback.Clock, Util : L.Playback.Util, - + TracksLayer : L.Playback.TracksLayer, PlayControl : L.Playback.PlayControl, DateControl : L.Playback.DateControl, @@ -907,16 +953,16 @@ L.Playback = L.Playback.Clock.extend({ maxInterpolationTime: 5*60*1000, // 5 minutes tracksLayer : true, - + playControl: false, dateControl: false, sliderControl: false, - + // options layer: { // pointToLayer(featureData, latlng) }, - + marker : { // getPopup(feature) } @@ -924,17 +970,17 @@ L.Playback = L.Playback.Clock.extend({ initialize : function (map, geoJSON, callback, options) { L.setOptions(this, options); - + this._map = map; this._trackController = new L.Playback.TrackController(map, null, this.options); L.Playback.Clock.prototype.initialize.call(this, this._trackController, callback, this.options); - + if (this.options.tracksLayer) { this._tracksLayer = new L.Playback.TracksLayer(map, options); } - this.setData(geoJSON); - + this.setData(geoJSON); + if (this.options.playControl) { this.playControl = new L.Playback.PlayControl(this); @@ -952,20 +998,20 @@ L.Playback = L.Playback.Clock.extend({ } }, - + clearData : function(){ this._trackController.clearTracks(); - + if (this._tracksLayer) { this._tracksLayer.clearLayer(); } }, - + setData : function (geoJSON) { this.clearData(); - + this.addData(geoJSON, this.getTime()); - + this.setCursor(this.getStartTime()); }, @@ -975,20 +1021,26 @@ L.Playback = L.Playback.Clock.extend({ if (!geoJSON) { return; } - + if (geoJSON instanceof Array) { - for (var i = 0, len = geoJSON.length; i < len; i++) { - this._trackController.addTrack(new L.Playback.Track(geoJSON[i], this.options), ms); - } + for (var i = 0, len = geoJSON.length; i < len; i++) { + this._trackController.addTrack(new L.Playback.Track(geoJSON[i], this.options), ms); + } } else { + if (geoJSON.type == "FeatureCollection") { + for (var i = 0, len = geoJSON.features.length; i < len; i++) { + this._trackController.addTrack(new L.Playback.Track(geoJSON.features[i], this.options), ms); + } + } else { this._trackController.addTrack(new L.Playback.Track(geoJSON, this.options), ms); + } } this._map.fire('playback:set:data'); - + if (this.options.tracksLayer) { this._tracksLayer.addLayer(geoJSON); - } + } }, destroy: function() { @@ -1014,6 +1066,7 @@ L.Map.addInitHook(function () { L.playback = function (map, geoJSON, callback, options) { return new L.Playback(map, geoJSON, callback, options); }; + return L.Playback; })); diff --git a/examples/example_2.js b/examples/example_2.js index 1fbdf2d..e596f37 100644 --- a/examples/example_2.js +++ b/examples/example_2.js @@ -2,8 +2,10 @@ $(function() { // Setup leaflet map var map = new L.Map('map'); - var basemapLayer = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/github.map-xgq2svrz/{z}/{x}/{y}.png'); - + // var basemapLayer = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/github.map-xgq2svrz/{z}/{x}/{y}.png'); + var basemapLayer = L.tileLayer( + 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' + ); // Center map and default zoom level map.setView([44.61131534, -123.4726739], 9); @@ -56,9 +58,25 @@ $(function() { return { icon: L.AwesomeMarkers.icon({ prefix: 'fa', - icon: 'bullseye', + icon: 'bullseye', markerColor: _assignColor() - }) + }), + getIcon: function(data, index) { + return L.AwesomeMarkers.icon({ + prefix: 'fa', + icon: 'bullseye', + markerColor: _assignColor(index) + }); + }, + // Use either popups or getPopup; getPopup overrides popups + // popups: true, + getPopup: function(data, index) { + if (index > -1) { + return ` Index: ${index}
Altitude: ${ + data.properties.altitude[index] + }
`; + } + } }; } }; diff --git a/src/MoveableMarker.js b/src/MoveableMarker.js index f37c358..7f5022a 100644 --- a/src/MoveableMarker.js +++ b/src/MoveableMarker.js @@ -1,28 +1,29 @@ L.Playback = L.Playback || {}; L.Playback.MoveableMarker = L.Marker.extend({ - initialize: function (startLatLng, options, feature) { - var marker_options = options.marker || {}; + initialize: function (startLatLng, options, feature) { + this.index = 0; + this.feature = feature; + this.marker_options = options.marker || {}; - if (jQuery.isFunction(marker_options)){ - marker_options = marker_options(feature); + if (jQuery.isFunction(this.marker_options)){ + this.marker_options = this.marker_options(this.feature, this.index); } - L.Marker.prototype.initialize.call(this, startLatLng, marker_options); + L.Marker.prototype.initialize.call(this, startLatLng, this.marker_options); this.popupContent = ''; - this.feature = feature; - - if (marker_options.getPopup){ - this.popupContent = marker_options.getPopup(feature); - } - - if(options.popups) + + if(this.marker_options.popups) { this.bindPopup(this.getPopupContent() + startLatLng.toString()); } + + if (this.marker_options.getPopup) { + this.bindPopup(this.getPopupContent()); + } - if(options.labels) + if(this.marker_options.labels) { if(this.bindLabel) { @@ -36,14 +37,23 @@ L.Playback.MoveableMarker = L.Marker.extend({ }, getPopupContent: function() { - if (this.popupContent !== ''){ - return '' + this.popupContent + '
'; + // if (this.popupContent !== '') { + // return this.popupContent; + // } + + if (this.marker_options.getPopup) { + this.popupContent = this.marker_options.getPopup( + this.feature, + this.index + ); + return this.popupContent } - - return ''; + // If no getPopup function is found in the options a default popup content is set + return this._latlng.toString(); }, - move: function (latLng, transitionTime) { + move: function (latLng, transitionTime, index) { + if (index > -1) this.index = index; // Only if CSS3 transitions are supported if (L.DomUtil.TRANSITION) { if (this._icon) { @@ -56,12 +66,18 @@ L.Playback.MoveableMarker = L.Marker.extend({ } } this.setLatLng(latLng); + + if (this.marker_options.getIcon) { + icon = this.marker_options.getIcon(this.feature, this.index); + this.setIcon(icon); + } + if (this._popup) { - this._popup.setContent(this.getPopupContent() + this._latlng.toString()); + this._popup.setContent(this.getPopupContent()); } }, - // modify leaflet markers to add our roration code + // modify leaflet markers to add our rotation code /* * Based on comments by @runanet and @coomsie * https://github.com/CloudMade/Leaflet/issues/386 diff --git a/src/Track.js b/src/Track.js index 1af9e0f..3dabf59 100644 --- a/src/Track.js +++ b/src/Track.js @@ -271,7 +271,12 @@ L.Playback.Track = L.Class.extend({ return this._marker; }, - moveMarker : function(latLng, transitionTime,timestamp) { + moveMarker : function(latLng, transitionTime, timestamp) { + var markerIndex = this._geoJSON.geometry.coordinates.findIndex((f, i) => { + var currLatLng = new L.LatLng(f[1], f[0]); + return currLatLng.equals(latLng); + }); + if (this._marker) { if(this._fadeMarkersWhenStale) { //show the marker if its now present @@ -290,7 +295,7 @@ L.Playback.Track = L.Class.extend({ this._marker.setIconAngle(this.courseAtTime(timestamp)); } - this._marker.move(latLng, transitionTime); + this._marker.move(latLng, transitionTime, markerIndex); } },