Dash-Leaflet - "Whoah, Thats possible?"

Dash Python
,
1

I’ve been exploring dash-leaflet for the better part of winter break. I wanted to push the bounds of what is possible and see how far I could hack my way into extending the capabilities of what is an amazing project. Wanted to share some cool finds and projects I’ve created along this sprint.

Dash-Leaflet - Track Player:

This proof of concept project was based on a plugin I found called TrackPlayer - GitHub - weijun-lab/Leaflet.TrackPlayer: A Leaflet track playback plugin, enabling you to swiftly create stunning track replay functionality./ 一个leaflet轨迹回放插件，帮助你快速构建出精美的轨迹回放功能。

Initially I attempted to build it out as a new component entirely within dash-leaflet but wasn’t able to resolve many npm run build errors on what was a valiant attempt. So I instead decided to attempt to create this off of what was mostly already existing within dash-leaflet and dash. I did need a way to rotate the marker which currently wasn’t supported within dash-leaflet marker. So I ended up creating a new component named RotatedMarker which looks like:

dl.RotatedMarker(
            position=track_data[0],
            icon=car_icon,
            rotationOrigin='center',
            rotationAngle=0,
            id='moving-marker'
        )

and was based on this project: GitHub - abdulk1/Leaflet.RotatedMarker: Leaflet plugin to enable the rotation of map marker icons

I also included a new antpath component based on my previous post for mostly styling effect but I thought the end result looked nice and thought it was worth sharing.

Also was able to scale this into tracking a map view of multiple cars at the same time.

The next project I took upon myself was based on a really cool api I recently found openrouteservice.org

I focused on building out a Isochrones project based on the API so that you can click a location within the map and select a means of travel and a time increment of how long of a period of travel you would be committing to.

So in this example, you could select a Time Interval of 5-30min and see how far you should be able to travel by car, wlaking, e-bike or wheelchair.

Last show and tell I have was a fun wacky probably wouldn’t ever be a working component / project but interest concept based on combining dash-excalidraw and dash-leaflet

was able to get further than I thought with this on but wasn’t able to fully get it working in a way I felt was releasable.

Anyway, hope everyone is ready for the 2025 and is on track to build some really cool projects. If you found this interesting follow me on Github or subscribe to my youtube channel as you might find something cool and I might release a more in-depthe video on dash / leaflet development in the future.

Cheers!

Youtube - https://www.youtube.com/@pipinstallpython

Github - pip-install-python (Pip Install Python) · GitHub

5 Likes