hallahan / LeafletPlayback

This is a Leaflet plug-in that plays back points that have a time stamp synchronized to a clock.
http://leafletplayback.theoutpost.io
Other
482 stars 165 forks source link

Different Markers #69

Open james04gr opened 5 years ago

james04gr commented 5 years ago

I am using the Example 2 but i dont understand where in the playbackOptions do we pass the different icons that we want to show in each route....

danikane commented 5 years ago

http://leafletplayback.theoutpost.io/examples/example_2.js

var _colorIdx = 0,
        _colors = [
          'orange',
          'green',
          'blue',
          'purple',
          'darkred',
          'cadetblue',
          'red',
          'darkgreen',
          'darkblue',
          'darkpurple'
        ];

    function _assignColor() {
        return _colors[_colorIdx++%10];
    }

and then:

        marker: function(){
            return {
                icon: L.AwesomeMarkers.icon({
                    prefix: 'fa',
                    icon: 'bullseye', 
                    markerColor: _assignColor()
                }) 
            };
        }

You can pass feature to the marker function and use the properties of the feature to style it as you want.

christhaxter commented 1 year ago

Hi, I am using the R version of this plugin through the addPlayback() function in leaflet.extras2. Apologies this is not directly a js question, but I don't suppose you could help with altering the moveable marker icon and colours as above? E.g. I was expecting something like the below using htmlwidgets::JS but it is not working, and I am probably doing something wrong:

leaflet() %>%
  addTiles() %>%
  addPlayback(data = data,
options = playbackOptions(
 marker =  htmlwidgets::JS(
                                              "
                                              function() {
                                              return L.AwesomeMarkers(
                                              {
                                              prefix: 'fa',
                                              icon: 'bullseye',
                                              markerColor: 'darkgreen'
                                              }
                                              );
                                              }
                                                  "
                                        )
))
danikane commented 1 year ago

Hi @christhaxter, I'm not familiar with R at all, but is the above syntax correct?

I saw this usage of the JS function: https://www.rdocumentation.org/packages/htmlwidgets/versions/1.6.1/topics/JS

Also there is a difference in the return of your stringified function (returns the L.AwesomeMarkers object) and the one in the example (which returns an object with an icon property = L.AwesomeMarkers.icon function, nothing more than instantiating an object from the Icon class) https://github.com/lennardv2/Leaflet.awesome-markers/blob/2.0/develop/dist/leaflet.awesome-markers.js#L118

Apart from that I can't really tell what the issue is, maybe start there ^.