How to draw quiver on map?

[zxdawn]

Because my interested region is usually small, I realize that I don't need to plot the global wind velocity.

Instead, I come up with this idea, just using the mean u and v wind (one-point data with speed and direction) to plot a quiver at the bottom right of the map, like this figure. Is it possible to add it using leafmap?

If that's not possible, maybe I can just create a PNG image and plot it on map with rotation ...

[giswqs]

Create a png, then use m.add_image()

https://leafmap.org/leafmap/#leafmap.leafmap.Map.add_image

[giswqs]

Rotation should have been done in the png.

[giswqs]

Or use m.add_html(), should support rotation, but the image must be available through http

[zxdawn]

Thanks, add_html works well. I make it run with local file:

                # Read the arrow image file and encode it as Base64
                image_path = "./imgs/arrow.png"
                with open(image_path, "rb") as f:
                    image_data = f.read()
                    image_base64 = base64.b64encode(image_data).decode("utf-8")

                html = f"""
                <img src="data:image/png;base64,{image_base64}" style="transform:rotate({wdir+180}deg);">
                """

                # plot wind direction at the bottom right corner
                m.add_html(html, position='bottomright')

[zxdawn]

Example:

              html = f"""
                <img src="data:image/png;base64,{image_base64}" style="transform:rotate({wdir+180}deg);">
                <h5 style="color:white;">{wspd:.1f}m/s</h5>
                """

[giswqs]

Thanks for sharing the solution. I will improve the function to support adding a local image

[giswqs]

The feature has been implemented in #467. Update the package using leafmap.update_package().

m = leafmap.Map()
html = f"""
                <img src="image.png" style="transform:rotate({wdir+180}deg);">
                <h5 style="color:white;">{wspd:.1f}m/s</h5>
                """
m.add_html(html)