✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Show and Tell - Dash Leaflet

I had code like this for making a scatter plot that worked well in dash-leaflet 0.1.4:

geobuf = dl.GeoJSON(data=data_taxi, id=“taxi”, format=“geobuf”,
zoomToBounds=True, # when true, zooms to bounds when data changes
cluster=True, # when true, data are clustered
clusterToLayer=dlx.scatter.cluster_to_layer, # how to draw clusters
zoomToBoundsOnClick=True, # when true, zooms to bounds of feature (e.g. cluster) on click
options = dict(pointToLayer = “window.dash_props.module.point_to_layer_accessible”),
superClusterOptions=dict(radius=150)) # adjust cluster size

With the latest dash-leaflet I does not work that way anymore.
So now I use code from the example on the Heroku side:

ns = Namespace(“dlx”, “scatter”)

geojson = dl.GeoJSON(data=data_taxi, id=“taxi”, format=“geobuf”,
zoomToBounds=True, # when true, zooms to bounds when data changes
cluster=True, # when true, data are clustered
clusterToLayer=ns(“clusterToLayer”), # how to draw clusters
zoomToBoundsOnClick=True, # when true, zooms to bounds of feature (e.g. cluster) on click
#options=dict(pointToLayer=ns(“pointToLayer”)), # how to draw points
superClusterOptions=dict(radius=150)

I get error:
Invalid argument clusterToLayer passed into GeoJSON with ID “taxi”.
Expected string.
Was supplied type object.
Value provided:
{
“variable”: “dlx.scatter.clusterToLayer”
}

Does anybody know what to do to make it working again. The options line will surely give another error.
Many thanks!

@Emil , this product is great and I’m trying to implement it into a Dash project I’ve been building for a while. I have trouble when I try to put a Leaflet map into a dcc.Tab or dbc.Tab. The map doesn’t render normally, it appears small and fully zoomed in. I know others have mentioned this, but I can’t find an answer to the issue. Is it possible to put a map in a tab? Thanks for your work on Leaflet.

Is there a DrawControl similar to ipyleaflet (Draw Control — ipyleaflet documentation) available/ implemented in Dash-leaflet? I am trying to see if there is anything that’ll allow me to select an area either using circle/polygon drawcontrol and use that area to do analysis and show results back in the map in a different layer. New to React/Leaftlet/Dash, any help is appreciated.

I haven’t implemented any drawing components yet, but I have been considering leaflet draw if I find the time,

https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html

Please let me know if you find better alternatives :slight_smile:

Currently I am trying to change colors and categories of a dash leaflet express categorical colorbar with a callback.
What I finally did was making the colorbars in the layout like:
dlx.categorical_colorbar(id = “Lcolorbar”, categories = [’’,’’,’’,’’,’’,’’], colorscale = [’#00000000’, ‘#00000000’,’#00000000’,’#00000000’, ‘#00000000’,’#00000000’], width=60, height=200, position=“topright”, style = stylecolorbar)], This way the colorbar is not visible at first.

An alternative would be to set their display to none (in the style). But for style the callback is not responding the way I would expect. It is not changing the display to inline. Wrapping the colorbar in a Div and using the Div style option does not help either.

In a callback I chose for the colors and text fields with the properties colorscale and tickText as output.
It seems you cannot change the number of discrete colors in the callback.
So lets say you want to make colorbars with 3, 4 and 5 colors. Then you seem to need 3 different colorbars in the layout instead of 1. A workaround would be to make just 1 colorbar with the maximum number of colors you need and then in the callback make colors transparent and textvalues empty for the entries you don’t need. Is there a more elegant way?

Hello @Emil,
you did a great job with this package!
I have a question about bounds: is it possible to get coordinates of the map bounds? I am trying to make a map that diplays points which are in the map bounds according to the zoom level. And if I could get the bounds coord I could request the inside points in a postgis database.
thanks in advance!

hey I want to use dash leaflet to display a choropleth map from a Geojson file and i happen to create the code but it doesnt run only the base map shows Help

Hi, im trying to setup an app with django dash and it has worked so far.

Now im trying to make an integration with leaflet using this component. It works fine on a stand alone dash app, using normal import dash but it simply doesnt show up when I use the django dash as from django_plotly_dash import DjangoDash. Using the dash leaflet it this import makes the whole app area blank.

The exact same code works with regular dash but no with django dash.

Can anyone help me?

Thanks in advance!

@bifrost Yes, you can use the bounds property of the map object,

@manelalayet I don’t see your code, so I am not sure what is going on.

@ViniciusBrown I haven’t worked with django, so I can’t help with that part :confused:

This is really beautiful work! Truly love it!

I’m using vector tiles a lot and it’ll be superb if any one of the vector tile plugins (Plugins - Leaflet - a JavaScript library for interactive maps) can be ported to dash-leaflet. Any plan to port any vector tile functions? Otherwise, any workaround or anything a non-professional like me may be able help?

Thanks! Could you give an examples of the tile source? :slight_smile:

Hi Emil, the tile source is here: http://hydrology.princeton.edu/data/mpan/googlemaps/tiles_global/{z}/{x}/{y}.json

I have a very old google map page to load the tiles, which shows how they look but there will be complaints from googe map api:

http://hydrology.princeton.edu/data/mpan/googlemaps/sample_tiles_global.html

I haven’t implemented any vector tile features so far. So the only way to plot the geojson at the moment would be to add a GeoJSON object. But i suspect that the geojson data might be too large for this approach to be feasible?

Yes, the tiles add up to a huge size, especially at higher zoom levels. How hard is it to port a leaflet plugin to dash? Any template to follow? I’m happy to help and I’m studying the dash-leaflet source code but still don’t know how to proceed.

Can you please describe this workflow in detail?

I run into the same issue recently. Opened an issue here: clusterToLayer causing trouble in debug mode · Issue #82 · thedirtyfew/dash-leaflet · GitHub