Show and Tell - Dash Leaflet

Dash Python
,
64

Ah, okay. I am currently working on some improvements of the GeoJSON component, which would also improve the performance for the lots-of-markers case that you are facing. I can’t say exactly how much better it will be, but i suspect that ~ 15k markers might be possible. Stay tuned :slight_smile:

1 Like
65

Thanks so much for the prompt reply Emil! An unrelated question, can you share a small example of the crs option syntax in dl.Map? The resolution of image overlay is bad, and I was trying to improve it by setting CRS.Simple…

Thanks again for all the hard work you put in this!
Farry

66

I have just released Dash Leaflet 0.1.1! It contains a number of breaking changes (in particular the merge of the SuperCluster and GeoJSON components), but the new GeoJSON component is now more flexible than ever due the to adoption of functional properties.

@farry - Let me know how it goes with your 15k circles example :slight_smile:

@farry - I haven’t used the CRS options at all, so for this i can’t be of much help, sorry :confused:

@lecram84 - I would recommend creating the colormap in Python and passing it to the colorbar, simiar to the scatter plot example in the docs

3 Likes
67

Hi Emil

Thanks for your new release. I confirm that I am now able to load my 15k circles with 10X speed improvement (Kudos!)

One issue I faced along the way is an error saying dlx does not have scatter defined (eventhough I did everything as in the example including chroma). The way I got things to work is using the local js to define pointToLayer.

Thanks again Emil. Keep up the great work!
Farry

2 Likes
68

Thanks! Great to hear that it’s working! I just added scatter to dlx for convenience (after releasing 0.1.0), so you’ll need the latest 0.1.1 release for it to work. Maybe you are on 0.1.0? :upside_down_face:

1 Like
69

Hi, first of all awesome package!

The question has been asked very early but never really answered, is it possible to add several LayerGroups with markers and then toggle the visibility of each one of these LayerGroups from within a callback?
When looking at the HTML I see that all markers are than grouped into one pane, so I guess there is no straightforward solution. Setting the layerGroup children to an empty list doesn’t really work as I am using this Output already to load the markers into the layer (and update the data constantly per a dcc.Interval input).

70

Thanks! Yes, i don’t see why that shouldn’t be possible. I can think of a least a handful of different approaches. How many markers do you have? One option would be just to draw the Marker on different panes,

import dash
import dash_html_components as html
import dash_leaflet as dl
import dash_daq as daq
from dash.dependencies import Input, Output

app = dash.Dash()
app.layout = html.Div([
    dl.Map([
        dl.TileLayer(),
        dl.Pane(dl.LayerGroup([dl.CircleMarker(center=(56, 10))]), id="pane1"),
        dl.Pane(dl.LayerGroup([dl.CircleMarker(center=(56, 11))]), id="pane2"),
    ], style={'width': '1000px', 'height': '500px'}),
    daq.BooleanSwitch(on=True, id="toggle1"),
    daq.BooleanSwitch(on=True, id="toggle2")
])


@app.callback(Output("pane1", "style"), Input("toggle1", "on"))
def toggle1(on):
    return {"display": "block" if on else "none"}


@app.callback(Output("pane2", "style"), Input("toggle2", "on"))
def toggle2(on):
    return {"display": "block" if on else "none"}


if __name__ == '__main__':
    app.run_server()
2 Likes
71

Thanks a ton! Thats a great way of fully disconnecting the markers (not too many themselves). Didn’t know I could use Pane like that, was to focused on searching for a solution with the Layers themselves.

72

This work is amazing! Well done Emil. One question if I may: is it possible to use a map which is all in English? In the examples I have found and used so far (e.g. https://dash-leaflet.herokuapp.com/ ), each country’ s information is in local language and it makes it a bit tricky to search for Chinese cities for example.

73

Thanks! The language on the map is determined by the tile provider. As you note, the default tile layer shows names in the local language. To change to a particular language, you need to find an appropriate tile provider, a few are listed here. As an example, this code

import dash
import dash_html_components as html
import dash_leaflet as dl

tile_url = "https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png"  # German tiles
app = dash.Dash()
app.layout = html.Div(dl.Map([dl.TileLayer(url=tile_url)], zoom=3, center=(56, 10)),
                      style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"}, )

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

would yield German tiles. I didn’t find any free English tiles (i just did a quick google search), but they might be out there. Otherwise, i think Mapbox has some.

1 Like
74

Really nice work on this… going to try and incorporate it into a work project. Is there any way to add a legend for different color geo_jsons? It can be static, as well.

75

Thanks! I have only used colorbars for illustrating GeoJSON colors so far, but you could set up a legend control both via Dash or JavaScript depending on your preference. If you make something nice, please share :blush:

76

I definitely will…

Was thinking about how to do it in Dash, aside from hacking together a div with color boxes and captions, do you have any other suggestions on how to create a legend?

77

Hi @bgivens33

There is a nice example of how to create a legend here: https://dash.plotly.com/datatable/conditional-formatting
See the example called “Highlighting cells by value with a colorscale like a heatmap”

I’m using a legend based on that example on a Leaflet map.

I’m also using @Emil 's latest release with the scatter plot and the heatmap colors on the markers. Thanks to Emil for doing such great work on this component!

leaflet3
leaflet32907×1709 394 KB

78

Thanks @AnnMarieW, that’s exactly what I was looking for. A table is a real clever way to create the legend.

79

Actually, the legend – the horizontal bar on the map-- is a div. It’s created in a function which is included in the example I mentioned in my last post

def discrete_background_color_bins():
1 Like
80

Can anyone point me to an example which explains how to put the map on heroku? I tried so much… you may argue I am dumb, I also did, but even my friend with a data scientist background failed repeatedly lol

81

The map should work just like any other component, also on Heroku. The documentation itself is hosted there. What error(s) do you get?

82

Made it finally!! It turned out your IT super powers Emil are so strong that is not even necessary to explain you the error… As soon as you say hi, is all magically fixed! Lol thank you :hugs:

2 Likes
83

@Emil very nice, it would be great if you could add the layer control: https://leafletjs.com/examples/layers-control/

Thanks!

1 Like