Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Show and Tell - Dash Leaflet

I suspected as much from looking at the code. But you had commented that

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

and I hoped there was something I had missed. Thank you.

Ah, yes. Prior to the update this note was added as a part of, only one CRS was supported. After, a number of CRS (the ones defined by leaflet itself) are supported. I don’t believe it should be too complicated to add support for more though.

Thank you for the prompt and helpful replies @Emil , and for the excellent work you’ve done on this package.

1 Like

any update on my question ? . .

For what object do you mean?

Hello,

Thanks for the integration with python, dash and leaflet, much appreciated!

I’ve got a quick question about MeasureControl. I’m trying to bring back the coordinates of the area plotted on the map with MeasureControl, using a dash callback. Haven’t gotten it to work, and now I’m not sure, whether it’s actually intended/supported functionality or not?

Below is a code snip of how I thought things would work:


import dash_leaflet as dl
 
measure = dl.MeasureControl(
    id = 'measure-id',
    position = 'topright',
    activeColor = 'orange',
    primaryLengthUnit = 'kilometers',
    completedColor = 'red',
)

m =  dl.Map(id=MAP_ID, center=[62, 24], zoom=6, children=[
        dl.TileLayer(),
        measure
    ], style={'width': '1000px', 'height': '500px'})

@app.callback([Output("output", "children")],
              [Input(MAP_ID, 'click_lat_lng')])
def update_area(area_cord):
    print(area_cord)

As I read your code, you are just printing the coordinate of the mouse location to the python console when you click the map? Is that your intention?

If you need to draw on the map and “bring back” the coordinates do Dash, you can use the EditControl, which exposes the geometries via its geojson prop.

My intention is to do calculation with all of the coordinates drawn on the map, and indeed, EditControl might be a better fit to achieve that, so thanks for the pointer! And thanks for the swift answer!!!

Hi,

Really liking Dash Leaflet!

I’ve been using the EditControl to draw shapes and I was wondering if its possible to get the coordinates of those shapes using a Callback. Ideally it would be good to get the bounds of a rectangle, but not sure how to write a callback without knowing the ID of the rectangle.

My current code is below, thank you for any help that you can provide!

import dash_html_components as html
import dash_leaflet as dl
from dash import Dash

MAP_ID = “map-id”

app = Dash()
app.layout = html.Div([
# Setup a map with the edit control.
dl.Map(id=MAP_ID, children=[
dl.TileLayer(), dl.FeatureGroup([
dl.EditControl(id=“edit_control”)]),
], style={‘width’: ‘100%’, ‘height’: ‘100vh’, ‘margin’: “auto”, “display”: “inline-block”}),
])

if name == ‘main’:
app.run_server()

Hi @BHiggs1

Thanks! Yes, you can access the shapes via the geojson property. It holds all current shapes in GeoJSON format.

Hi, question.
I’ve created Tiles using ogr2ogr (but also with tippecanoe, does it make any difference)?

I would like to avoid setting up a server and have found a small tutorial on hosting it from a Google cloud bucket.

Anyway, things seem to be fine, as I can see tiles when I’m inspecting my dash (with leaflet) webpage.
However, I don’t see the contents on the map.

I think the layer is transparent and that I should style it, however, I don’t seem to find any docs on it.

dl.Map(
    children=[
        dl.TileLayer(url=tile_layer_url, attribution=attribution),
        # dl.TileLayer(),
    ],
    id="matches_map",
    center=(50.5039, 4.4699),
    zoom=8,
    style={'width': '1180px', 'height': '780px',
           'margin': "auto", "display": "block"}
)

Any help on this?

The TileLayer component expects raster tiles (e.g. .png images), but the file endings of you requests “.pbf” indicates that you are serving vector tiles.

Hi,
That is correct.
a directory of pbf files can thus not be used? in TileLayer?
I now see indeed that the javascript examples use VectorGrid.
Is there another way to use pbf?

Of should I find a way to generate png?

The start of the issue is the following: I have a shapefile and want to use dash leaflet to show the data.
The shapefile is too large (~1gb) for streaming.
How should I proceed?

Yes, you basically have two options,

  1. Generate raster tiles; or
  2. Use a vector tile component

Here is an example of (1),

If you want to follow (2), you will need to implement a new component in dash leaflet.

Hi,
Super thanks for the swift reply.

I’ll have a look at whether I can make the new component, albeit this is a long shot.

For future reference:
I was actually able to rasterize using geoserver. This means a lot of overhead, but it was for me the easiest way tot get this done.
I followed geoserver - Generate GeoJSON tile layers from Shapefile - Geographic Information Systems Stack Exchange
using a docker image, to keep things more or less clean.

If you already got it work, I guess you might just stay with rasters. But if you decide to work along the vector tile route, you might draw some inspiration from an early implementation I made some time ago,

So the rasterized tile thing works. For now i making them with geoserver and serve them from a google cloud bucket.

The tiles contain polygons. I would like to show some extra info on the polygons.
The chloropleth map does exactly that, however, starting from a geojson does not seem to be an option (rather big).

Are there suggestions on how to fix this?

Tiled geojson would be nice, but not in dash leaflet (yet) as far as i understand.
I was thinking to dump everything into a db, and the a callback + query on click.
But it would be nice to allow the click event only when certain layers are used.

Tips and tricks to approach this?
I probably should invest some time helping build.this thing further.

That sounds like a pretty neat setup! But yes, if you need to show extra info on the polygons, I believe vector tiles is the right way to go. You can achieve it using raster tiles also by doing some index lookups, but that’s a hacky solution which will require you to do lots of book keeping,

The code snippet I linked to was an initial implementation I played around with. I believe it actually worked, but I didn’t have any real use case at the time, so I decided to prioritize other features. Hence I haven’t worked with vector tiles myself, but my impression is that they will be a perfect fit for your use case.

Hello guys,

This is a copy of a separate post I made in the plotly forum, but this might be a better place for it Dash Leaflet checked=True/False callback not working for Overlay.

First of all thank you for writing this plugin, it is very intuitive and has helped me a lot.

I have one question regarding the callback w.r.t. checked attribute of the dl.Overlay. When I chek/uncheck the overlay in the layerselector the callback is not called, this I want to do, to turn the colorbar on/off. I have tried a bunch of different things, but I am out of ideas. Do you guys have any input/ideas?

dl.LayersControl([
dl.Overlay(dl.LayerGroup(dl.TileLayer(url=url,
maxNativeZoom=16)),
id=‘optics-overlay’,
name=“Optical overlay”,
checked=True)])

with the callback looking like this:

self.app.callback(dash.dependencies.Output(‘divtemp’, ‘children’), [
dash.dependencies.Input(‘optics-overlay’, ‘checked’)],
prevent_initial_call=True)(test_print)

where divtemp is just a hidden html.div, and the test_print function, should print the value for checked, however checking or unchecking does nothing. For all the other leaflet callbacks, it has been working perfectly, so I have no clue what is going wrong. I have also tried it without the dl.Layergroup, but that did not make a difference.

Thanks in advance

Hi @Taliebram ,

in callbacks, you should use the baseLayer and overlays properties of the LayersControl component, not the checked property of the Overlay component.

\emher