Leaflet popup on each marker using Leaflet playback

user_3884439 0
Viewed 1303

I have a GEOJson such as

  {
    "type": "Feature",
     "geometry": {
       "type": "MultiPoint",
       "coordinates": [
          [
            -123.77252789,
             44.37857221
          ],
          [
            -123.77317087,
            44.37864694
         ],
         [
          -123.77383407,
          44.37875853
        ],
        [
         -123.7744676,
         44.37886305
       ]
    ]
   },
    "properties": {
      "time": [
       1369786338000,
       1369786340000,
       1369786342000,
       1369786344000
     ],
     "Temp":[70F,60F,72F,80F],
     "Title": "Car1"
    }
  }

Using Leaflet Playback, I am able to make the marker moving, but I want each marker has there own popup showing Time and Temp while it is moving. I have tried to do something like :

  var playbackOptions = {
    marker: function (featureData) {
                return {
                    getPopup: function (feature) {
                        return "Temp: " + feature.properties.Temp + "at " +  feature.properties.time;
                    }
                };
            }
   };

 var playback = new L.Playback(map, demoTracks, null, playbackOptions);

but it keeps giving me the all the time and temp array for each marker instead of different time and temp for each marker. I am wondering how can I make each popup shows its information.

leaflet javascript
1 Answers

Short answer: you can't.

The problem with this library is that each feature is the MultiPoint feature. Every reference to featureData/feature/whatever in one of the functions in the options object is the exact same WHOLE MULTIPOINT FEATURE, not the particular "feature" at a current index in the array ... https://github.com/hallahan/LeafletPlayback#options

Another issue is that the coordinates in the popup are hardcoded.

if (this._popup) {
    this._popup.setContent(
      this.getPopupContent() + this._latlng.toString()
    );
  }

I have a friend who's struggling with this as well, I suggested to him that he's better off writing his own implementation using FeatureCollection GeoJSON data, however he's inexperienced and is looking for something ready to use OOTB.

UPDATE: I fiddled with the code a bit, exposed the current index so you can get whatever from the source GeoJSON. In the example I set the popup content to contain the altitude at current index and to change the color base on it as well.

Here's a GIST: https://gist.github.com/danikane/f8490e62529f3cf64eb672d2e737b982

I agree, my modifications are very poorly written, but nevertheless you'll get my point :)

user_107902330
Related