Show and Tell - Dash Leaflet

rodglover · August 10, 2021, 3:56pm

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.

Emil · August 10, 2021, 4:37pm

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.

rodglover · August 10, 2021, 4:38pm

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

frogzop · August 16, 2021, 7:02pm

any update on my question ? . .

Emil · August 16, 2021, 8:33pm

For what object do you mean?

juhis · September 20, 2021, 11:42am

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)

Emil · September 20, 2021, 11:56am

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.

github.com

thedirtyfew/dash-leaflet/blob/9eb3672afb0575e9bb12921b0c2a8dcc4d335294/src/lib/components/EditControl.react.js#L221

    
      
           */
          editToolbar: PropTypes.shape({
              mode: PropTypes.oneOf(["edit", "remove"]),
              action: PropTypes.oneOf(["save", "cancel", "clear all"]),  // Optionally, invoke an action
              n_clicks: PropTypes.number,
          }),
          
          
/**
           * Geojson representing the current features.
           */
          geojson: PropTypes.object,
          
          
// Raw events.
          
          
/**
           * Hook to leaflet-draw's draw:mounted event.
           */
          onMounted: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
          
          
/**
           * Hook to leaflet-draw's draw:drawvertex event.

juhis · September 20, 2021, 1:41pm

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!!!

BHiggs1 · October 2, 2021, 1:50am

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()

Emil · October 2, 2021, 7:20am

Hi @BHiggs1

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

ilpepe4 · October 6, 2021, 9:16am

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?

Emil · October 6, 2021, 10:59am

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.

ilpepe4 · October 6, 2021, 11:16am

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?

Emil · October 6, 2021, 12:33pm

Yes, you basically have two options,

Generate raster tiles; or
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.

ilpepe4 · October 6, 2021, 2:28pm

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.

Emil · October 6, 2021, 3:36pm

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,

github.com

thedirtyfew/dash-leaflet/blob/VectorGrid/src/lib/components/VectorGrid.react.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import LeafletVectorGrid from '../LeafletVectorGrid';

/**
 * VectorGrid is a wrapper of https://github.com/mhasbie/react-leaflet-vectorgrid
 */
export default class VectorGrid extends Component {
    render() {
        console.log(this.props)
        return <LeafletVectorGrid {...this.props} />
    }
}

VectorGrid.defaultProps = {
    type: 'slicer',
    subdomains: '',
};

VectorGrid.propTypes = {

This file has been truncated. show original

ilpepe4 · October 12, 2021, 5:14pm

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.

Emil · October 12, 2021, 7:42pm

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.

Taliebram · October 15, 2021, 11:55am

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

Emil · October 15, 2021, 3:16pm

Hi @Taliebram ,

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

github.com

thedirtyfew/dash-leaflet/blob/9eb3672afb0575e9bb12921b0c2a8dcc4d335294/src/lib/components/LayersControl.react.js#L84-L92

    
      
          /**
           * Name of the currently selected base layer.
           */
          baseLayer: PropTypes.string,
          
          
/**
           * Names of the currently selected overlays.
           */
          overlays: PropTypes.arrayOf(PropTypes.string),

\emher

Topic		Replies	Views
Show and Tell - Leaflet Component for Dash Dash Python show-and-tell	3	3462	March 22, 2019
Dash Leaflet Minicharts Dash Python show-and-tell	2	1810	April 24, 2023
Show and Tell - Dash ECharts Components Dash Python show-and-tell	5	5195	May 29, 2021
Show and tell: Dash react table component Dash Python show-and-tell	1	2065	October 17, 2019
Dash Tour Component Dash Python show-and-tell	10	3990	May 17, 2023

Show and Tell - Dash Leaflet

Related Topics