Show and Tell - Dash Leaflet

Dash Python
,
268

Hi, this is amazing.

I have tried to use Multipolyline with no success, can you provide an example?
Thanks!

269

You should just use the Polyline component, see e.g. this example

http://dash-leaflet.herokuapp.com/#polyline_decorator

270

Hi @Emil - the work you have done here is super cool and I guess I am only scratching the top of it at the moment.
I am trying to use hover_feature in tandem with LayersControl but it is possible to have multiple overlays on with overlapping features and still get the properties for the highlighted feature?
I guess the layers are ordered and only the top feature of overlapping features would get picked up?
Would you have an example of this working please? Do all layers still need a unique id and corresponding callback or is there a more elegant way to do this, possibly using the LayersControl id?

Any help would be very much appreciated.

272

Hey, just so you know, this example doesn’t run as-is for me.

image
image1339×867 144 KB

273

Dear All,

I was looking through the documentation and did not see anything for saving svg/png/eps images from leaflet maps. Embedding the leaflet object as the figure property of a dcc.Graph component as I have done previously for mapbox maps does not appear to be supported unless it is a pilot erorr on my part. Ideally, I’d like to have the figure toolbar available and treat the leaflet map like anything else, but I would settle for just being able to save it. Any suggestions would be appreciated. Thanks - Marie

274

@troynh I believe that only the most top layer would be picked up, but it is some time since I have worked with a such example, so I don’t have one at hand. If you need a different behavior, I would recommend looking into the Leaflet docs to get a sense of how a solution would look.

@fedderw What example are you referring to? What version of dash-leaflet are you running?

@marie The Map component is completely separate from the Graph component, so you can’t combine them in that way. Rather, you would need a leaflet plugin, I guess something like easyPrint would do?

275

Thank you @Emil. It looks like easyPrint is too restrictive for my use case, but now that I know what to look for I should be able to figure out a workaround. All my best - Marie

276

Hi @Emil ,
I really need your help.
I created map tiles in a folder and saved them on my desktop, and I would like to display them as the base map using Dash leaflet.
I wrote my file directory in the url attribute but it didn’t work. Is there a way to make it works?

app.layout = html.Div([
    dl.Map(children=[dl.TileLayer(url="mytiles/{z}/{x}/{y}.png"), 
], style={'width': '1000px', 'height': '500px'})

Thanks.

277

@Abdullah1 Yes, that is possible. However, you need a tile server to serve the tiles. A popular Python solution is Terracotta, but you could use any tile server.

2 Likes
278

Thanks a lot @Emil . I tried to use Terracotta but it was too complicated for me :sweat_smile:.
I used Maptiler instead. The problem it is paid service.

Thanks again.

279

Hi @Emil ,
I am trying to display information for each marker on my map. My goal is to have a popup box once the user clicks on the marker.
Is there a way to do so? I am using a pandas data frame, not a geojson file.
I used the title, but it didn’t give me a great result.

markers = [dl.Marker(position=[row["Center Latitude"], row["Center Longitude"]], 
                     title="{name} ({lon}, {lat})".format(name=row["Feature Name"], lon=row["Center Longitude"], lat=row["Center Latitude"])) for i, row in dff.iterrows()]

Any help would be appreciated.
Thanks.

280

@Abdullah1 Did you try the Popup object?

281

Thanks for reply.
I just managed to do it.

markers = [dl.Marker(children=[dl.Popup(children=["{name} ({lon}, {lat})".format(name=row["Feature Name"], lon=row["Center Longitude"], lat=row["Center Latitude"])])], 
position=[row["Center Latitude"], row["Center Longitude"]]) for i, row in df.iterrows()]
282

Jep, that looks correct :+1:

283

Hi @Emil,
Is there a way to have a hoverStyle for the rectangle objects?
I found an example but with geojson object, and I am wondering if there is a simple way to do it for rectangles too.

Here is my code:

rectangles=[dl.Rectangle(fillOpacity=0, weight=0.7, color='#888', dashArray='4, 1, 2, 1',
 bounds=[[df2['LatMin'][i], df2['LonMin'][i]], [df2['LatMax'][i], df2['LonMax'][i]]]) for i, row in df2.iterrows()]

From the documentation:

type or paste code heredl.GeoJSON(url="/assets/us-states.pbf", format="geobuf", id="states",
                   hoverStyle=arrow_function(dict(weight=5, color='#666', dashArray='')))

Thanks.

284

I am also new to dash-leaflet. This is my second day working with it.

I read the documentation that you made and it is very beneficial. However, it doesn’t include everything. So, could you please recommend another way or resource to learn more about this library?
I don’t want to take a lot of your time by asking many questions.

Thanks.

285

I think the best resources are the documentation that I made, the forum here, and posts on SO. If you need anything beyond that, the next step would be to take a look at the source code and/or the underlying components (i.e. react-leaflet and/or leaflet itself, and relevant plugins).

With respect to the Rectangle component, hover events are not captured in the current implementation, so it is not possible to change style on hover (or trigger callbacks). Hence, you would need to add that functionality to the library to do so - or use the GeoJSON component instead.

1 Like
288

Hi @Emil,

I am really sorry for asking so many questions.

I did a long research last week on the Dash Leaflet library, but I couldn’t find a way to add JavaScript code to customize the zoom control, popup, and layer control.

I know it is possible using leaflet js, so I tried adding the js code in the assign function.

I wrote this desperately to change the zoom control position, and it didn’t work. :smiling_face_with_tear:

assign('''map.zoomControl.setPosition('bottomright');''')

Could you please help me with this?
I would be grateful if you could give me one example to learn the pattern. :pray:

Thanks.

289

You can customize components in the same way as other Dash component, i.e. via properties. So, for example, to change the position of the LayersControl to the bottom right corner, you would set its position property to bottomright,

It should be noted, however, that for functionality to be available, a thin Dash wrapper code is needed. And since the Leaflet eco system is huge, I haven’t wrapped all features. If you need anything beyond what is already wrapped (e.g. changing the position of the zoom control; I didn’t include that option), I would be happy to look at a PR :slight_smile:

290

Hi,

I didn’t really understand what I have to do now.
So… is it possible to do the customizations by myself? I mean writing the Dash wrapper code.

Thanks.