Show and Tell - Dash Leaflet

Dash Python
,
392

Yes, you should be able to do it by calling the bindPopup function from within onEachFeature. You’d have to pass the html data somehow, e.g. via the feature properties.

393

thanks, I’ll play around with it. I tried to preload the graph html into the tooltip property (when loading the geojson) and that didn’t work. Is there something different about using the bindpopup?

394

Hi @Emil,

Thanks for your example triggering a callback when dragging a marker to a new position.
I have noticed some odd behavior between versions:

dash-leaflet==0.0.20: Works as ok per your example.
dash-leaflet>=1.0.0: Callback does not trigger when dragging the marker.

Is this a bug or has there been perhaps a change of how you interface with the markers??
Kind regards

Slightly updated code below:

import json

import dash_leaflet as dl
from dash import Dash, Input, Output, html

app = Dash(__name__)
app.layout = html.Div(
    [
        dl.Map(
            [dl.TileLayer(), dl.Marker(id="marker", draggable=True, position=(56, 10))],
            id="map",
            style={
                "width": "100%",
                "height": "50vh",
                "margin": "auto",
                "display": "block",
            },
            center=[56, 10],
            zoom=6,
        ),
        html.Div(id="output"),
    ]
)


@app.callback(Output("output", "children"), [Input("marker", "position")])
def print_position(position):
    return json.dumps(position)


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

Related question: If you set up a dl.GeoJSON and then you assign in your js function for the points to be displayed as L.marker{draggable: true}. - The geojson data similarly doesn’t get updated when you drag the markers around. What is the intended / expected behavior here? EDIT / UPDATE - Now resolved by setting the data prop via javascript :slight_smile:

395

Following up on this a full year later :slight_smile: I was able to implement this behavior using turf.js and dash-leaflet-extensions.

I created the function responsible for generating the polygons:, loaded the Turf.JS library via the external_scripts parameter of the main Dash app, then referenced my Python function (which is really just a variable holding a giant JS string) in the clusterToLayer parameter.

image
image1329×748 173 KB

I hope this helps someone.

397

Hi - I wonder if gurus here can help me with this. I posted my question on the github page already but that seemed like a wrong place for questions. I’m trying to use the new VectorTileLayer feature for my project:

https://github.com/emilhe/dash-leaflet/issues/84

I tried the example on the github page and it works well but couldn’t get my own data shown up on the map. My vector tiles show up fine on a javascript-only leaflet map:

https://cw3e.ucsd.edu/wrf_hydro/merit_rivers/merit_rivers.html

I suspect the MVT/PBF file I have isn’t in the right format and you can find the examples like:

https://cw3e.ucsd.edu/wrf_hydro/merit_rivers/0/0/0.pbf

Does anyone know if my tile data is created properly? If not, what tool should I use to generate the correct data? If yes, what could the problem be or how I can debug this?

I’m using basically the same code from the example except for the tile url and zoom level:

import dash_leaflet as dl
from dash import Dash

app = Dash()
app.layout = dl.Map(
    [
        dl.TileLayer(),
        dl.VectorTileLayer(url="https://cw3e.ucsd.edu/wrf_hydro/merit_rivers/{z}/{x}/{y}.pbf", maxDetailZoom=11, style={}),
    ],
    center=[30, 0],
    zoom=2,
    style={"height": "50vh"},
)

if __name__ == "__main__":
    app.run_server(debug=True)

I tried both dash-leaflet==1.0.17rc1 and dash-leaflet==1.0.17rc2 but neither works. Thanks so much!