Show and Tell - Dash Leaflet

To enable greater flexibility and a more interactive map experience, a college and I have developed a Dash Leaflet map component. It is a light wrapper around React-Leaflet, with syntax similar to other Dash components and naming conventions following the React-Leaflet API. Not all React-Leaflet component have been implemented, but the most common are in place:

  • Polygon (draw arbitrary polygons on the map)
  • Polyline (draw arbitrary lines on the map)
  • Rectangle (draw rectangles on the map)
  • Circle (draw circles on the map, size in physical units)
  • CircleMarker (draw circles on the map, size in pixels)
  • Marker (draw markers with default or custom icons on the map)
  • Tooltip (show tooltips for any of the objects above)
  • Popup (show popups on click for any of the objects above)
  • TileLayer (show tiles from arbitrary tile providers)
  • WMSTileLayer (similar to tile layers, but more generic)
  • ImageOverlay (draw images on the map)
  • VideoOverlay (play videos on the map)

Dash callbacks can be attached to events emitted by the map, e.g. the on-click event. It is thus easy to achieve an interactive experience. Dash Leaflet is available on pypi,

pip install dash-leaflet

After installing it, you should be able to run the mwe,

import dash
import dash_leaflet as dl
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    dl.Map(style={'width': '1000px', 'height': '500px'}, center=[56.05, 10.25], zoom=10, children=dl.TileLayer())
])

if __name__ == '__main__':
    app.run_server(debug=False)

More advanced examples can be found in the usage gallery,

4 Likes

Awesome! Would love to see some screenshots from whoever ends up using this!