Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Show and Tell - Dash Leaflet

Yes it works, Thank you very much for your help!!

Hi @Emil ,

sorry to bother you again, but I have a new question/bug, also related to this property. I have implemented the overlays property, which works great, but a new problem has arisen, and I have no idea how to fix it. I have a map that has some overlays, these overlays can be turned on and of, and the colorbar gets removed or added based on the added layers. At some point, I want to look at the map at another date, for which I need to refresh the whole map. However, when I do this the Map ‘loses’ the id of the LayersControl, which breaks the adding and removing of the layers. This is strange as other properties of the Map do get ‘remembered’. Do you have any clue how to fix this?


dl.Map(id='leaf-map',
                      zoom=12,
                      children=[
                          dl.TileLayer(),
                          dl.FeatureGroup([dl.EditControl(
                              id='edit-control',
                              draw=draw_style
                          ),
                              dl.Popup(dbc.Button(
                                  'Give Feedback',
                                  id='popup-feedback-button',
                                  n_clicks=0,
                                  color='info'))]),
                          dl.LayersControl(id='layer-control',
                                           children=[
                                               dl.Overlay(dl.LayerGroup(dl.TileLayer(url=url,
                                                                                     maxNativeZoom=16)),
                                                          id='optics-overlay',
                                                          name="Optical overlay",
                                                          checked=True),
                                               dl.Overlay(id='bag-overlay',
                                                          name='BAG data',
                                                          checked=False,
                                                          children=dl.LayerGroup(self.m_bag_layer.layer())
                                                          ),
                                               dl.Overlay(id='activity-overlay',
                                                          name='Activity',
                                                          checked=True,
                                                          children=self.m_act_layer.layer(
                                                              selection=self.m_selection,
                                                              zoomToBounds=True)
                                                          )
                                           ]),
                          dl.FeatureGroup(id='colorbar-map',
                                          children=self.give_colorbars())
                      ])

With the callback looking like this, where the self.change_activation function basically returns the self.give_colorbars() function after making some changes based on the layer selection/deselection.

 self.app.callback(dash.dependencies.Output('colorbar-map', 'children'),
                           dash.dependencies.Input('layer-control', 'overlays'),
                           prevent_initial_call=True)(self.change_activation)

It can be seen that if you look at the callback GUI that the overlays property is undefined, while it was before the refreshing of the whole Map.

image

I hope you can help me,

Taliebram

I am not sure I completely understand the problem. If you post a bug in github with a small example demonstrating the issue, I’ll take a look when I find the time.

I still don’t exactly know why it is not working, but I have redone it that changing the map just updates the dl.Layerscontrol, so now it works. Thanks for your help.

Hello guys,

I have another question, I hope it is not of too much inconvenience, but I have been trying to get some hovertext with my EasyButton (like in the image attached found here. However I have been unable to do it, I tried adding a custom CSS class and tried embedding the Easybutton in a dl.Tooltip, but none of these worked. Can anyone tell me if it is possible, and if yes how?

Many thanks,

Taliebram

image

I guess what you need is the title property. Unfortunately, it has not been implemented (yet).

Ah ok, thanks for your quick feedback.

It is not that important for my dashboard anyway, but I’ll make a feature request anyway.

@Emil Great work on the dash-leaflet edit control. I am working on a app and I would like to implement a back-end to save the edits. I am able to access the “geojson” property of the control to see the feature geometry, but am struggling to find a way to log/view the action property of the control. Does anyone know of a small standalone example that accesses or shows the “action” property out of the control?

just figured it out. Thanks.

Copy data from the edit control to the div component and log.

html.Div(id='editlog')

@app.callback(
    Output("editlog","children"),
    Input("edit_control", "action"))

def editlog(x):
    if not x:
        raise PreventUpdate
    return 'Output: {}'.format(x)

Thanks.
Brent

I have a question regarding the use of mapbox in dash leaflet. The maps should go to a zoom level of 22 but I cannot get the map to zoom in past level 18. Anyone know what I could be doing wrong?

html.Div(
                    className='map-div',
                    children=[
                        dl.Map([
                            dl.TileLayer(url=mapbox_url.format(id="satellite-streets-v10", access_token=mapbox_access_token)),  # background map
                            dl.LayerGroup(id="layerTargets"),
                            dl.LayerGroup(id="layerFOV"), 
                            dl.LayerGroup( id="robotPath"), # shows the path the robot took
                            # dl.LayerGroup(id="shotLine"),
                            # dl.LayerGroup(id="errorMarker"),
                            # dl.LayerGroup(id ="activeError"),
                            # dl.LayerGroup(id="errorLine"),
                            dl.MeasureControl(position="topleft", primaryLengthUnit="kilometers", primaryAreaUnit="hectares",
                                          activeColor="#214097", completedColor="#972158"), dl.FeatureGroup([
                                              dl.EditControl(id="edit_control"), dl.Marker(position=[56, 10])])
                        ], id='map', center=(positions[1][0], positions[1][1]), zoom=18
                        ),
                    ],
                ),

@mikegulf You can set the max zoom level of the TileLayer via the maxZoom property. It defaults to 18.

@Emil I tried that. It looks like the tileset only goes to 18. I am using mapbox with mapbox_url = “https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{{z}}/{{x}}/{{y}}{{r}}?access_token={access_token}”

Hey Emil - your work here is amazing! Thank you!

I am trying to apply your choropleth example to a geojson that is a circle within a circle. When I attempt to hover over the inner circle, the properties of the inner circle are not returned to the information pane, nor is the circle highlighted. Instead, only the outer circle is highlighted and its properties are returned to the information window. When I remove the arrow function from the hover_style argument, I am able to return the inner circle’s properties to the information window, but lose the effect of the arrow function highlighting any of the circles. Do you have any suggestions on how I can keep the arrow functionality and return properties from the inner circle?

This is what happens with the arrow function included and I hover over the inner circle:

This is what happens when I remove the arrow function and hover over the inner circle:

Thank you for your time!

Thanks! It looks like you need to enforce a specific layer ordering. To do that, you can use the Pane component.

Emil - Thank you for your guidance. It worked for me. I did have to adjust the callback by passing the ids from the pane wrapped geojsons using a loop to create a list of inputs and then modify the callback function parameter to *args to make it flexible enough to take the inputs of varying lengths to get there, but it was a fun nut to crack!

1 Like