Show and Tell - Dash Leaflet

thanks a lot for the dash leaflet, i have a question is it possible to display a raster image in dash leaflet not as an image overlay. is there another way to do it ?

Could you be more specific on why ImageOverlay doesn’t work for you?

it works fine. I just want to display the tiff i created with rasterio into the dash leaflet directly.
is it possible ?
matplotlib result is this,i’m struggling with how to use the tiff in dash, without using a static image.

1 Like

hey, I started using dash leaflet in my work and it’s awesome. Thank you.
I would like to see if the getFeaturInfo can be displayed with dash and how?.

Hey manelalayet I think you have a use case that would not work well with image overly indeed. a better sollution can be to use terracotta (which creates a server that creates and serves cloudoptimized geotiff as wms) and dash leaflet which renders the geotiff wms.

Please take a look at a great example here

1 Like

For this example, say I zoom in or click-drag move the map so only one marker is visible.
How would I output the coordinates of only the marker that is visible?

So we have a slider that is moving based on one second per unit of measure using app.clientside_callbacks. That is working properly but if the button is pushed to stop and then the slider is dragged to a new position then when the play button is pressed again it reverts back to the original position it was in when the stop button was pushed. I know I have to somehow update the time value. Any help would be appreciated.

app.clientside_callback(“function(n_intervals, max){return (n_intervals % max);}”,
Output(“time”, “value”), Input(“trigger”, “n_intervals”), Input(“time”, “max”))

app.clientside_callback(“function(n_clicks){return (n_clicks % 2 == 0)? ‘Play’ : ‘Stop’;}”,
Output(“play”, “children”), Input(“play”, “n_clicks”))

app.clientside_callback(“function(n_clicks){return (n_clicks % 2 == 0)? 0 : -1;}”,
Output(“trigger”, “max_intervals”), Input(“play”, “n_clicks”))

The slider code

dcc.Slider(min = 0, max = length_time, step=1, 
               marks={
                        20: 'Engagement 1',
                        352: 'Engagement 2',
                        859: 'Engagement 3',
                        1139: 'Engagement 4',
                        1516: 'Engagement 5'
                        },
               value=0, id="time"),  # time slider
dcc.Interval(id="trigger", max_intervals = length_time, n_intervals=0),  # animation trigger
html.Button("Play", id="play", n_clicks=0)  # animation start/stop button

Thanks
Ralph

Hi Emil, thank you very much for your investigations and work!
You mentioned, that it’s possible to change the markers colors independently with dl.Marker().
Could you please provide example?
It would be wery helpful, cos I have almost same situation as with GeoJSON file, but dataframe with custom coordinates (they should change marker based on condition)

For that kind of usecase, you might want to look at the GeoJSON scatterplot example,

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

I tried this way, but I need custom icons also

In that case, you can do as in the custom icons example,

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

Thanks for such a quick response!

@Emil, Any suggestions on my slider?

Do you mean feature info on GeoJSON or?

As I read you code, your question is not related to dash-leaflet? Or maybe I am wrong? :slight_smile:

Emil,

Sorry I did not give all the code. The slider updates the dash-leaflet layers on the map.

dl.Map(children=[
        dl.TileLayer(url=mapbox_url.format(id="satellite-streets-v9", access_token=mapbox_access_token)),  # background map

        dl.LayerGroup(id="layerTargets"),
        dl.LayerGroup(dl.PolylineDecorator(positions=positions, patterns=patterns), id="layerFOV"),
        dl.LayerGroup(dl.PolylineDecorator(positions=positions, patterns=patterns), id="layer2") # container with data
    ], center=(positions[1][0], positions[1][1]), zoom=40, style={'height': '50vh'}),
    html.P("Time"),
    dcc.Slider(min = 0, max = length_time, step=1, 
               marks={
                        20: 'Engagement 1',
                        352: 'Engagement 2',
                        859: 'Engagement 3',
                        1139: 'Engagement 4',
                        1516: 'Engagement 5'
                        },
               value=0, id="time"),  # time slider
   
    dcc.Interval(id="trigger", max_intervals = length_time, n_intervals=0),  # animation trigger
    html.Div(
        html.Button("Play", id="play", n_clicks=0), 
        style={"display": "inline-block"},
        ), 

is it possible to use fitBounds with this?

For what kind of object?

How are custom CRSs supported? As far as I can tell, there is a fixed set of 6 allowed values for Map crs. I haven’t been able to find either documentation or discussion here on custom CRS.

Context: I have written several apps using React Leaflet. We use some unusual CRSs. To define them we use Proj4Leaflet, which creates an instance of Leaflet.CRS which can be passed to the React Leaflet Map component’s crs prop. Is it possible to do anything like that in Dash Leaflet? Using dash_extensions.javascript.assign, I tried passing in a value created client-side using Proj4Leaflet , but it does not accept it. In fact, it seems not to accept anything that is not a plain Python string.

Currently, dash-leaflet expects a string indicating one of the standard CRS, i.e. the implementation would need adjustment to support custom CRS objects.