Show and Tell - Dash Leaflet

Taliebram · October 15, 2021, 3:52pm

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

Taliebram · October 18, 2021, 3:25pm

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.

I hope you can help me,

Taliebram

Emil · October 18, 2021, 4:19pm

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.

Taliebram · October 19, 2021, 12:55pm

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.

Taliebram · November 9, 2021, 8:47am

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

Emil · November 9, 2021, 10:25am

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

Taliebram · November 9, 2021, 4:03pm

Ah ok, thanks for your quick feedback.

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

btucker · November 16, 2021, 6:44pm

@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

mikegulf · November 23, 2021, 1:49pm

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
                        ),
                    ],
                ),

Emil · November 24, 2021, 6:43am

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

github.com

thedirtyfew/dash-leaflet/blob/142beb293eb85a10785c9f67aeb30077c9128e90/src/lib/components/TileLayer.react.js#L53

    
      
          // Static parameters
          
          
/**
           * The minimum zoom level down to which this layer will be displayed (inclusive).
           */
          minZoom: PropTypes.number,
          
          
/**
           * The maximum zoom level up to which this layer will be displayed (inclusive).
           */
          maxZoom: PropTypes.number,
          
          
/**
           * Subdomains of the tile service. Can be passed in the form of one string 
           * (where each letter is a subdomain name) or an array of strings.
           */
          subdomains: PropTypes.string,
          
          
/**
           * URL to the tile image to show in place of the tile that failed to load.
           */

mikegulf · November 24, 2021, 2:18pm

@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}”

skye_hall · December 2, 2021, 2:19am

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!

Emil · December 2, 2021, 8:29am

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

github.com/thedirtyfew/dash-leaflet

Support for bringToFront/bringToBack Feature

opened 10:24AM - 20 May 20 UTC

closed 11:06AM - 22 May 20 UTC

SimonKnorke

Hello! A nice feature would be the ability to arrange the available layers on… the map so that you have control over overlapping polylines and markers. Especially when you create interactive Polylines/Markers on the map, you might want to place certain components in the foreground or background. The corresponding Leaflet documentation is https://leafletjs.com/reference-1.6.0.html#path-bringtofront and https://leafletjs.com/reference-1.6.0.html#path-bringtoback Or can you think of a quick solution? I have tried to achieve this by the order of the LayerGroups and marker creation but with no success.

skye_hall · December 2, 2021, 7:05pm

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!

dsmi90 · February 8, 2022, 9:30am

Hey guys, thanks for all the work on dash-leaflet!

I am wondering is there a way to draw a simple ‘line’ on the map rather than a ‘polyline’?
I realise you can draw a polyline and click on the second point again to end the line, but it is possible to create an implementation where the line is automatically completed as soon as you click the second point, thereby preventing the user from creating polylines with more than 2 points?

In other words, is it possible to force the ‘polyline’ tool to act as a ‘line’ tool such that when the second point of the line is defined, the line is automatically completed?

Thank you!

Emil · February 8, 2022, 9:42am

Thanks! Just to clarify, are you talking about the EditControl? Or are you creating PolyLine components in callbacks?

dsmi90 · February 8, 2022, 9:52am

Thanks for the quick reply. I was referring to creating a line within the EditControl.

Emil · February 8, 2022, 10:28am

In that case, I would suggest to take a look at the drawToolbar prop. It enables to you invoke actions without clicking the toolbar manually,

github.com

thedirtyfew/dash-leaflet/blob/master/src/lib/components/EditControl.react.js#L49

      
        
            // Custom properties.
            
            
/**
             * Fires on every action.
             */
            action: PropTypes.object,
            
            
/**
             * Change this prop to manipulate the drawing toolbar, i.e. to change modes and/or invoke actions.
            */
            drawToolbar: PropTypes.shape({
                mode: PropTypes.oneOf(["marker", "polygon", "polyline", "rectangle", "circle", "circlemarker"]),
                action: PropTypes.oneOf(["cancel", "finish", "delete last point"]),  // Optionally, invoke an action
                n_clicks: PropTypes.number,
            }),
            
            
/**
             * Change this prop to manipulate the edit toolbar, i.e. to change modes and/or invoke actions.
             */
            editToolbar: PropTypes.shape({
                mode: PropTypes.oneOf(["edit", "remove"]),

I guess what you need is a callback that invokes the finish action after when the line is completed.

jortuno · February 10, 2022, 2:06pm

Hello,

I would like to know if it is possible to open an URL when clicking on a marker in the the map, rather than opening a popup.

Thanks

Emil · February 10, 2022, 3:04pm

Sure, you could use the click event to trigger a callback that opens the URL.

Topic		Replies	Views
Show and Tell - Leaflet Component for Dash Dash Python show-and-tell	3	3564	March 22, 2019
Show and Tell: Dash Simple Maps Dash Python show-and-tell , community-components	7	182	September 26, 2024
Dash Leaflet Minicharts Dash Python show-and-tell	2	2061	April 24, 2023
New Dash-Leaflet Plugins & Improvements Dash Python show-and-tell , community-components	2	117	December 24, 2024
Show and Tell - Dash ECharts Components Dash Python show-and-tell	6	6160	May 15, 2024

Show and Tell - Dash Leaflet

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

Related topics