Dash Leaflet: How to rotate a marker?

Dash Python
1

Hello all,

Background

I am plotting vessels using dash leaflet and plotting the heading or direction the ship is pointing is very helpful and important with respect to visualising the ships. In an ideal world I would do this by rotating the marker by value set by a rotation angle parameter, but this does not exist.

A leaflet plug in that I believe to be of use, but have not used given my zero experience in JS, can be found here. A general question would also be how might we use the many leaflet plugins that are available within JS via dash leaflet?

Code:

I am iterating through a pandas dataframe and appending each row as a marker within the children propert of a layer group in dash leaflet:

tmp_children += [dl.Marker(id=f"{row['vessel_name']}",position=[row["latitude"], row["longitude"]],
                                                          #radius=radius,
                                                          #color=icon_color,
                                                          #fillColor=icon_color,
                                                          n_clicks=0,
                                                          children=[dl.Popup(children=[tanker_popup],pane='tooltipPane')])]

You’ll see I have commented out radius, color etc as I originally was plotting with CircleMarker but have retired its use as my only hope of using a rotated marker appears to lay in the custom flexibility of Marker.

Thanks in advance

2

Are you using marinetraffic.com? Attempted a few injections of getting rotation on icons but didn’t have much luck.

If all else fails, my suggestion would be to create a folder named ship_degrees in the assets folder. Then I would create as many icons as you need, basically go into photoshop, turn the icon 15degrees then save to that folder as ship_icon_15degree.png or something… then when you a return ship that falls within a specific rotation range you just load that image as the icon.

Not an ideal solution… but it would work.

1 Like
3

I’m actually using Kpler API data. They provide lat, long and heading. Lat and long is no issue but showing the direction is something which is surprisingly difficult to do.

I did think of that solution but naturally would like to avoid it at first, but would ultimately resort to it if necessary

4

The fastest way to get going would probably be the suggestion from @PipInstallPython . Another approach would be to create a route from the flask server that rotates the image(s). On the longer term, it may be an option to add this plugin,

1 Like