Show and Tell - Dash Leaflet

Thanks! The LayersControl has been on my TODO list for a long time, but I haven’t been able to figure out how to implement it yet. If anyone with React experience could help, i would be happy for inputs and/or a pull request :slight_smile:

Hello

I played around with the Scatter plot example on your heroko. Is there a way, to draw normal markers (those inversed water drops) instead of these small circle markers? And still to be able to color them?

Edit: or can at least the circle diameter be changed?

It is possible, but it would require some custom javascript (e.g. in you assets folder) that defines how the markers should be drawn, i.e. in you case how to draw the colored inversed water drops :slight_smile:

With the new (0.1.4) release of Dash Leaflet, the single most requested feature [@edsonmedina @luckymichael @elGuayaco] has now (finally) been implemented - the LayersControl component.

While seemingly simple, this control turned out to require a few hacks to port to Dash :slightly_smiling_face: . Try it out here,

On another note, custom CRS are now also supported @farry.

1 Like

I experienced some problems with the drawing polygons with circle markers example. Quite often the mouseclick on the marker is seen as a mouseclick on the map, which then does not lead to a polygon. Is it possible to change this behaviour?

I’m working on a project, using dash-leaflet, and I created custom markers. But I’m still using the old Markers layers, didn’t convert to geojson yet.

Great news! I tried to implement it here, but as I have no knowledge of React, I failed. And, because of that, I decided to learn this library.

Hope to contribute to the project as soon as possible.

Very nice. So the CRS can be a projected CRS like (UTM)?

The CRS can be any of the CRS supported by leaflet,

Hi! Awesome work! =)

Is possible to get map corners on first load?
I mean, when page load, draw the map, and use the corners of the visible map to another callback? something like the getBoundaries() ?

I changed the circle marker with a custom icon marker. Now it works like a charm.

Might it be possible to use the overlay ID in a callback, something like Input(“overlay”, “checked”)?
Is there some documentation about the callback options of components like Overlay, Pane and Layergroup?

Thanks Emil, it works perfectly.
I understood that perhaps in the future it is possible to change the cluster icon from a circle to something else.
is it already possible to have a custom icon for the individual markers when zoomed in?
Now my different markers from different layers are all the same (the upsidedown blue water drop), so I cannot distinguish them

Thanks! The map bounds are currently not accessable, but i have just added the functionality in a new test build,

pip install dash-leaflet==0.1.5rc2

Here is a small example,

import json
import dash
import dash_html_components as html
import dash_leaflet as dl

from dash.dependencies import Input, Output, State

app = dash.Dash()
app.layout = html.Div([
    dl.Map(dl.TileLayer(), id="map", style={"height": "80%"}), html.Div(id="log")
], style={'width': '100%', 'height': '100vh', 'margin': "auto", "display": "block"})


@app.callback(Output("log", "children"), [Input("map", "bounds")])
def log(bounds):
    return json.dumps(bounds)


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

I expect to merge this functionality into the 0.1.5 release :slight_smile:

The property documentation should be available via your IDE (e.g. Pycharm), as it’s part of the source code. What properties are you looking for?

Yes, it’s possible to customize both the marker icon as well as the clustering icon itself. In this example, a custom clustering icon is used.

Thanks Emil! I can’t see the solution in the example you mentioned. I now used dash_transcrypt and made a py script for the custom marker as pointed out in teh documentation. That seems to be a fine solution. But I guess there is something wrong with my script. I keep getting plain waterdrops or blue circle markers.

def point_to_layer(feature, latlng, context):
myicon = L.icon({
iconUrl: ‘assets/busstop.gif’,
iconSize: [15, 15],
iconAnchor: [7, 15]
});
return L.marker(latlng, {icon: myicon})
Any idea what I do wrong?

And is there something like Input (“overlay”, “checked”)?
I can’t find the property documentation, but I will try.

I did not manage to get it working. So I changed strategy. Now I use a javascript in the asset folder like:
window.dash_props = Object.assign({}, window.dash_props, {
module: {
point_to_layer_bus: function(feature, latlng) {
var smallIcon = new L.icon({
iconSize: [15, 15],
iconAnchor: [7, 15],
iconUrl: ‘assets/busstop.gif’
});
return L.marker(latlng, {icon: smallIcon});
},
point_to_layer_seats: function(feature, latlng) {
var smallIcon = new L.icon({
iconSize: [15, 15],
iconAnchor: [7, 15],
iconUrl: ‘assets/seats.gif’
});
return L.marker(latlng, {icon: smallIcon});
},

    },
}

);

This approach can be found in the documentation

Emil,

awesome work! Also, your replies helped me a lot.
Are there any plans to implement heatmaps?
I could make a heatmap with Folium and then use an i-frame in Dash to show it, but I would like to see the heatmap as just another layer in your Layercontrol.
I know you showed the scatter example with geobuffer. Same type of information, but the good thing about heatmaps is that you could plot other things (like markers) on top of it.

Great that you got it working with the markers :slight_smile: . I have previously though about implementing heat maps, but as i remember, i had trouble finding a library of sufficient quality (i kept running into bugs) to wrap. However, it’s not on my immediate todo-list.

While i do understand why you would like heat maps (it’s a nice visualization), i don’t understand your point about markers. You could also plot a marker on top of a scatter plot?

Thanks, than I know what to do.
Plotting markers on top of a map with cluster circles/markers might become a bit messy.
I could try to give the cluster circles a custom icon, but the problem remains.
Keep up the good work!