emilhe / dash-leaflet Goto Github PK

I would like to suggest you a new feature to your application.

One thing I need to build using dash is a map where the markers are clustered, as described here and here.

If you could add this feature to your component would be amazing.

Thank you so much.

Is this possible? I've looked up the leaflet docus and it seems to be but I can't seem to get this working, can anyone point me in the right direction?

Hello, thanks for the package

I am a Data Scientist, trying to build dash app. Is there a way to add choropleth.

I want to recreate https://leafletjs.com/examples/choropleth/ with dash components.

Hi!

It would be an amazing feature to have a measuring tool (like the button for location service) to create a polyline attached with its distance.

There are some solutions for leaflet.js out there such as
https://github.com/NLTGit/Leaflet.LinearMeasurement
https://github.com/ppete2/Leaflet.PolylineMeasure

It's also possible to do this via a checkbox and dash callbacks (compute distance from the maps click_lat_lng to dbl_click_lat_lng). However, I think that an integrated widget would be very useful for many people. Can you think of a future support for this plugin?

Anyway, thanks for your great package!

At first I like your dash extension! Great repo!

I am working a lot with TimeDimension So I am asking If you are willing to support such a feature?
Maybe you know a work around with Interval Components ? One of my use cases is a weather radar loop.

Best regards and thanks a lot in advance for discussing with me about this issue.

At the moment, the built-in examples of pointToLayer/clusterToLayer/style functions support only discrete color scale for choropleth and continuous for scatter and used in the examples. In both cases, continuous and discrete should be supported.

I would like to be able to set the color of the geometries inside a GeoJSON layer from a callback
I have tried doing this by setting the output of a callback to be the options property on the layer but it doesn't update

Minimal reproducible example below, trying to change the colour of a triangle via radio buttons:

import dash
import dash_html_components as html
import dash_leaflet as dl
from dash.dependencies import Output, Input
from dash_bootstrap_components import RadioItems

triangle = dict(type='Polygon',
                coordinates=(((-104, 39),
                              (-104, 45),
                              (-90, 39),
                              (-104, 39)),))
geojson_layer = dl.GeoJSON(id='geojson_layer', data=dict(type='FeatureCollection', features=[triangle]))
map = dl.Map([dl.TileLayer(), geojson_layer], center=[39, -98], zoom=4, style=dict(height='50vh'), id="map")

geojson_colours = [dict(label='Green', value='#32a852'),
                   dict(label='Blue', value='#3268a8'),
                   dict(label='Red', value='#cf241b')]
colour_radio = RadioItems(id='colour-radio',
                          options=geojson_colours,
                          value=geojson_colours[0]['value'],
                          className='custom-radio')

app = dash.Dash()
app.layout = html.Div([map, colour_radio])


@app.callback(Output(geojson_layer.id, 'options'), [Input(colour_radio.id, 'value')])
def geojson_colour(colour):
    return dict(color=colour)


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

Hi - thanks for this amazing project! It's great to see and seems to work very well already.
I believe this is the accommodating PyPI package: https://pypi.org/project/dash-leaflet/

I noticed you are using versioning on PyPI, but not in your GitHub repo. For reproducibility - if you don't mind - would it be possible to add tags to the Git repo - so that we know which version of the code is released on PyPI?

I'm happy to contribute some GitHub Actions PR if that's something you would be interested in?

Something like

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_leaflet as dl

from dash.dependencies import Output, Input


# Create options.
keys = ["toner", "terrain", "watercolor"]
url_template = "http://{{s}}.tile.stamen.com/{}/{{z}}/{{x}}/{{y}}.png"
options = [{"label": key, "value": url_template.format(key)} for key in keys]
default_url = options[0]["value"]
# Create app.
app = dash.Dash(prevent_initial_callbacks=True)
app.layout = html.Div([dl.Map([dl.TileLayer(id="tiles", url=default_url)]),
                       dcc.Dropdown(options=options, id="dropdown", value=default_url)],
                      style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})
# Attach callback.
app.callback(Output("tiles", "url"), [Input("dropdown", "value")])(lambda x: x)


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

Hi
You did a really great job with your dash-leaflet project. Many thanks for that.

I'm wondering if there is a way having more event types for the cluster markers.
For example I need to have click callbacks for the clusters and the markers itself.
So the idea is to get a list of all markers which are inside the cluster which was clicked by the user. And I need a way to determine the marker which is clicked in the map when it is zoomed in.

Do you think there is a way to achieve this? I will be happy for some hints.

Thank you in advance
Sydney

I tried to access it using this url https://dash-leaflet.herokuapp.com/ and it says "Application Error".

Would appreciate it being fixed since I want to read about how to use the function properties feature.

Hi,

Great package! I want to use divIcon as my Icon. Is there support for that? Is that in the plans?

Also, I realize this isn't an issue, but wasn't sure where else to post. Is there a better place?

Thanks!

Great package largely extend the capability of Dash for spatial projects. Can you add 1) geosearch tool https://github.com/smeijer/leaflet-geosearch 2) show example of GeotiffOverlay? Especailly can we construct the tiff from ndarray and plot it?

Thanks!

Hi Emil,

I tried to import dash_leaflet.express. It complained about geobuf. I am curious if you can inform me on how to set up geobuf to use dash_leaflet.express?

As suggested in #51 I implemented a work around to loop over tile Layers.

""" openweatherradar.org app """
import os
import flask
from datetime import datetime, timedelta

import dash
from dash.dependencies import Output, Input
from dash.exceptions import PreventUpdate
import dash_core_components as dcc
import dash_html_components as html
import dash_leaflet as dl
from src.time_helper import round_time
server = flask.Flask(__name__)

N_TIMESTAMPS = 25


def round_time(dt=None, round_to=60):
    """Round a datetime object to any time lapse in seconds
    dt : datetime.datetime object, default now.
    roundTo : Closest number of seconds to round to, default 1 minute.
    Author: Thierry Husson 2012 - Use it as you want but don't blame me.
    """
    if dt == None: dt = datetime.now()
    seconds = (dt.replace(tzinfo=None) - dt.min).seconds
    rounding = (seconds + round_to / 2) // round_to * round_to
    return dt + timedelta(0, rounding - seconds, -dt.microsecond)


app = dash.Dash(
    __name__,
    server=server,
    meta_tags=[{"name": "viewport", "content": "width=device-width"}],
    title='openweatherradar',
    update_title=None,)

app.layout = html.Div([
    dl.Map([dl.TileLayer(url='https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', maxZoom=13),
            dl.TileLayer(url='https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lines/{z}/{x}/{y}{r}.png', minZoom=0, maxZoom=20),
            dl.TileLayer(url='https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png', maxZoom=19),
            dl.TileLayer(url="",
                         minNativeZoom=6,
                         maxNativeZoom=9,
                         id='radar_layer',
                         opacity=0.7,
                         crossOrigin=False,
                         updateWhenZooming=True,
                         tms=False)],
           center=[52.5, 10],
           zoom=5,
           style={'width': '100%', 'height': '98vh', 'margin': "auto", "display": "block"}),
    html.Div('2020/10/12/20/50', id='loop-timestamp', style={'display': 'None'}),
    dcc.Interval(id='loop-radar-layer',  interval=666),

],
)


@app.callback(Output('loop-timestamp', 'children'),
              [Input('loop-radar-layer', 'n_intervals')])
def update_loop_timestamp(intervals):
    if intervals is None:
        raise PreventUpdate
    now = datetime.utcnow()
    now = round_time(now-timedelta(minutes=3), round_to=60*5)
    return (now-timedelta(minutes=(N_TIMESTAMPS-int((intervals / N_TIMESTAMPS) % 1 * N_TIMESTAMPS))*5)).strftime('%Y/%m/%d/%H/%M')


@app.callback(Output('radar_layer', 'url'),
              [Input('loop-timestamp', 'children')])
def update_radar_layer(timestamp):
    time_url = f"https://api.meteointelligence.com/radar/data/{timestamp}"
    return time_url + "/{z}/{x}/{y}.png"


if __name__ == '__main__':
    port = int(os.environ.get('PORT', 8050))
    server.run(host='0.0.0.0',
            port=port)

This is my full code. Please note that I run this application within docker container.

My problem now is that the loading is not smooth as we know this from e.g. Leaflet TimeDimension extension. You can see a runnng example with smooth updates of the layers: openweatherradar.org .

Does anyone know of a way to change the basemap? In particular, I'm trying to figure out how to get the Stamen terrain basemap working (:http://maps.stamen.com/test/leaflet.html)

Hello!

A nice feature would be the ability to arrange the available layers on the map so that you have control over overlapping polylines and markers.
Especially when you create interactive Polylines/Markers on the map, you might want to place certain components in the foreground or background.

The corresponding Leaflet documentation is
https://leafletjs.com/reference-1.6.0.html#path-bringtofront and
https://leafletjs.com/reference-1.6.0.html#path-bringtoback

Or can you think of a quick solution? I have tried to achieve this by the order of the LayerGroups and marker creation but with no success.

I have recently upgraded the dash-leaflet library from v0.0.22 to v0.1.7. I was using two maps to show separately within tab sections. But after this upgrade, I cannot use them anymore. Because when I move the cursor from the first tab to the second and get back to the first tab, the map is disappeared. the following error message is logged in the browser console. In the older version of dash-leaflet v0.0.22, I would not run into this issue.

Error message: "TypeError: Cannot read property 'leafletElement' of null"

The sample code to describe this scenario is as follows:

import dash
import dash_leaflet as dl
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    dcc.Tabs([
        dcc.Tab(label='Tab one', children=[
            dl.Map(id="map1",children=[dl.TileLayer(id="tile1")], style={'width': '1000px', 'height': '500px'})
        ]),
        dcc.Tab(label='Tab two', children=[
            dl.Map(id="map2",children=[dl.TileLayer(id="tile2")],center=[40, -100], zoom=4, style={'width': '1000px', 'height': '500px'})
        ]),
    ])
])


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

In the initial loading of the page, we have the following result:

After the first round of switching between tabs, we have empty bodies which come up with error messages:

Please let me know what can be done to fix the issue. I prefer not to downgrade the dash-leaflet.

Hi!

Thank you for coming out with this really good package and all your swift responses.

I was trying to plot some routes via dash-leaflet.Polyline(). However, I was thinking if it is possible to also has directional indication like arrows along the path of the plotted route?

There is something similar, Polyline Decorator, but is a Js leaflet plug-in.
Thanks!

First of all, thanks for building this package. It's a great tool for building dashboards with interactive maps.

I've been trying to use custom makers with your package, and I can't manage to do it. I don't get any errors, but the markers are just not shown. Not sure if this is an issue with the package or with the code. This is an example:

import dash
import dash_leaflet as dl
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets =[dbc.themes.BOOTSTRAP])

marker = dl.Marker(
                position=[40, 0],
                id='marker',
                icon={'iconUrl': 'Blue.png', 'iconSize': [50, 50]}
            )

map = dl.Map([dl.TileLayer(),marker],
             id='map',
             center=(40, 0),
             zoom=6,
             style={'width': '800px', 'height': '300px'}
        )

app.layout = dbc.Container(map)

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', debug=True, port=5000)

The icon I'm trying to add is of course 'Blue.png', and the path is correct. Note that if I want to use the default marker the program works fine, as expected.
Sorry for asking this question here; couldn't find any other way to do it.

Thanks for this great package. When using geojson I got an error 'regeneratorRuntime is not defined'.
According to babel/babel#9849 (comment) it could be fixed by importing regeneratorRuntime from "regenerator-runtime".

@emilhe Thanks for your work on this package! It's incredibly useful

When instantiating a dash_leaflet.Map() object the scrollWheelZoom parameter isn't accepting boolean arguments.

Code to reproduce:

import dash  # 1.12.0
import dash_leaflet as dl  # 0.0.16

app = dash.Dash()
app.layout = dl.Map(
    dl.TileLayer(),
    style={'width': '1000px', 'height': '500px'},
    scrollWheelZoom=False)

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

Error message:

Hover info for the marker is not getting updated for second and subsequent clicks.
Instead of using 'title' for hover info, its better to use Tooltip

Is there an example of how to specify the crs parameter for non-geographic maps through the python interface?

The snippet of JS code I'm trying to recreate from leaflet is:

export class MapLayer extends Component {
  constructor (props) {
    super(props);
    this.crs = L.extend({}, L.CRS.Simple, {
      transformation: new L.Transformation(3.12, 0, 3.12, 0)
    });
   ...

Whatever you currently assign to the crs parameter appears to require a function for latLngToPoint

TypeError: "this.options.crs.latLngToPoint is not a function

Hi,

What a nice work you've done ! That's just what I was looking for since the current Plotly's Scattermapbox has no bounds argument / fitBounds method (and my function to get a zoom value from a given bounding box wasn't fancy enough since it didn't handle browser window resizing...).

I need to retrieve the id of the marker I clicked on and I didn't find a nice way to do it. With Plotly's Scattermapbox I used the clickData callback property but it works only on dcc.Graph objects, not dl.Map ones.
Would you consider implementing onClick event (and not only [dbl_]click_lat_lng) as a Dash callback property (either for the Map or the Marker object) ? Or maybe I missed an already implemented feature (or you got a better idea) 🤔

Thanks ;)

I am trying to migrate my code from 0.0.22 to v0.1 of dash-leaflet but I am having a trouble of enforcing zIndex between two GeoJSON layers. In the past, I wrapped the layers in Pane and set zIndex on Pane.style property. After playing around for a bit, I noticed that zIndex is ignored and the GeoJSON layers are stacked based loading time. I created a simple example to demonstrate. By simply changing the sleep in each of the function, I change the order of the layers.

In the example, I would expect the states_slow layer should end up bellow states. But because of the states_slow is slower to load, it ends on top and thus the focus.

I admit, I have no clue what I am doing here so forgive me if I am missing something obvious. :)
Is it a bug or am I doing something wrong?
Thanks for your help.

import dash
import dash_html_components as html
import dash_leaflet as dl
from dash.dependencies import Output, Input

app = dash.Dash()
app.layout = html.Div([
    dl.Map(center=[39, -98], zoom=4, children=[
        dl.TileLayer(),
        dl.Pane(id="states_slow", style={"zIndex": 400}),
        dl.Pane(id="states", style={"zIndex": 500}),
    ], style={'width': '100%', 'height': '98vh', 'margin': "auto", "display": "block"}, id="map"),
])


@app.callback(Output("states_slow", "children"), [Input("map", "children")])
def plot_states_slow(map):
    import time
    time.sleep(1)
    return dl.GeoJSON(url="assets/us-states.pbf", format="geobuf", hoverStyle=dict(weight=10, color='black', dashArray=''))

@app.callback(Output("states", "children"), [Input("map", "children")])
def plot_states(map):
    import time
    time.sleep(0)
    return dl.GeoJSON(url="assets/us-states.pbf", format="geobuf", id="states", hoverStyle=dict(weight=5, color='#666', dashArray=''))

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

the map element in my application is inside a div. It looks like Dash-leaflet is unable to detect the container size. I am curious if there is a way to use invalidateSize() from the JS library

Hi there.

Currently I'm working with tooltips to show pictures on hover. Now I run into the problem, that the tooltips have opacity = 0.9 by default (see https://github.com/Leaflet/Leaflet/blob/5b30f7d34461a5bca7927ff368547abe516a8de8/src/layer/Tooltip.js#L66). Is there a way to control the tooltip default options?
Thanks in advance.

Hi!
Thank you for coming out with this package!
Would like to ask if it is possible to incorporate geolocation on mobile? Or acquire the user's current lat/long using this mean?

https://leafletjs.com/examples/mobile/

Hi, I want to do something very simple: use HTML within the popup text. For example:

dl.Marker(id='QQ', position=[56, 9.8], children=[
                dl.Tooltip("Marker tooltip"),
                dl.Popup([
                    html.H1("Marker popup"),
                    html.P("with <b>inline</b> html")
                ])
            ])

Notice the use of in html.P above. Yet this doesnt work and just prints the html markup along with the string. How do I actually get it to interpret it as html?

Thanks!

Hi,

First of all: Awesome package and amazing work you have done! That's really what I was locking for.

Second: I coudn't find a dash-leaflet component for a leaflet Legend.
I am visualizing different grouped Layers (e.g. a Polyline and some Markers).
I want to create a Legend showing the Color (or Icon) of the group and a description.
Is this possible with this package? Thanks in advance for any help.

Best,
Simon

Hi,

I wonder how I can create a scale bar on the map to get a visual indication of the distances between the markers. I'm referring to the post

https://gis.stackexchange.com/questions/54644/leaflet-show-miles-kilometers .

I couldn't find a corresponding feature in react-leaflet.

Is there a (quick and dirty) solution for such a scale bar?

Hi,

great package, I love leaflet for its versatility and having it available in dash is great! One of the layers currently not supported is GeoJSON. Any plans to implement? I know time is limited ...

Thanks!

I would love to be able to enable free-hand drawing of polygons / selection of regions
Examples are the closed freeform annotation tool in plotly images and plotly's lasso selection

The FreeDraw plugin looks pretty light-weight and triggers an event when the drawing has completed

If its events could be connected to a Dash callback, the Dash app could then draw a suitable Polygon without making this an explicit feature in Dash-Leaflet, or use the region for geospatial queries such as counting the number of markers inside the selected region (without overlaying a visual polygon on the map)

Here's an example in JavaScript where the event is captured to draw a Polygon (though in this example editing creates new polygons instead of replacing the previous one)

const LAT_LNG = [51.505, -0.09];
const TILE_URL = 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png';

const map = new L.Map(document.querySelector('section.map'), { doubleClickZoom: false }).setView(LAT_LNG, 14);
L.tileLayer(TILE_URL).addTo(map);
const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
freeDraw.on('markers', event => {
    L.polygon(event.latLngs, {color: 'red'}).addTo(map);
});
map.addLayer(freeDraw);

And on JS-Fiddle with the CSS
https://jsfiddle.net/5oacexuf/1/

Hello!

I am looking for a way to create an event when a marker on a map is clicked. Is there an "onclick" - event for leaflet marker? I'm referring to this post

https://stackoverflow.com/questions/16927793/marker-in-leaflet-click-event

My goal is to create a click reaction for a certain LayerGroup (except the popup window).
This callback should then generate further outputs (e.g. a plot) depending on the clicked marker. How could I achieve this? I am thankful for any help!

Hi
First of all I did the update to geoJSON and the improvement of performance is really nice 👍 .

Now I stared having popups on my map like it is described in #37 .

In fact it works like a charm, but I have some issues together with the supercluster.
Now I get a popup on both, clicking on a cluster and a GPS tag. Unfortunately this leads into some problems.
To fix this I have two ideas:
First:
Is there a way to control the popups? So that I'm able to prevent them when clicking on a cluster.
Second:
Is there a way to get the GPS points a cluster includes? In the supercluster documentation are methods like
getLeaves(clusterId, limit = 10, offset = 0)
In fact I have the cluster_id from the click_feature callback. But I have currently no idea how to access the points which are included in the cluster.
With this possibility I would be able to display all images which are inside the cluster when the popup is displayed.

The more I think about this two ideas I highly appreciate the second idea ;)

I will be happy getting some ideas to solve that.

If you click on a marker in a GeoJSON the click_feature does not trigger on Desktop Safari. However, if you click for longer than >1s (longclick?) the Input will trigger.

On mobile Safari (Iphone and Ipad) it works....

\rant whats wrong with you apple? \rant

I tried to figure it out by myself but I am a bit blocked switching to dash-leaflet==0.1.0.

I had a markergroup as:

group = dl.MarkerClusterGroup(id="markers",
                                         children=markers,
                                          options={"polygonOptions": {"color": "red"}}
                                          ),

and used it

 dl.Map(preferCanvas=True,
                   attributionControl=False,
                   children=[ group, ...

However the MarkerClusterGroup seems deprecated in favor of the SuperCluster / GeoJSON.

I managed to get markers on the SuperCluster, but how do I pass the popup with it?

Hello Emher,

I've been learning dash and some Js along the lines recently and stumbled upon this awesome project while looking for some leaflet magic inside the dash ecosystem.

I was wondering how the Icon definition that leaflet has could be passed to dl.Marker .

As an initial reference, I was sticking to a really nice example coded by you

#This is the part that somehow wanted to add
# https://github.com/pointhi/leaflet-color-markers

icons ={ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    }

# Create app.
#(.....)

#The callback with an icon dictionary?
@app.callback(Output("markers", "children"), [Input("dd", "value")])
def update_markers(value):
    if value is None:
        return []
    data = data_source[value]
    return [dl.Marker(id={'type': 'marker', 'index': key}, position=data[key],icon=icons) for key in data] #I tried to pass the icon definition here

Thank you!

Hi Guys,
Earlier this week I found an Example for the Marker cluster on Heroku and I copied parts to use it in a Project. Unfortunately my server crashed before I pushed this Part of Code and I have No backup. Furthemore it seemed that you changed the Marker Cluster Example on Heroku to an Example where the geoJSON Plugin is used.
Could you send/share the initial Marker Cluster Example please with me?

It was something Like:

marker_data = requests('...')

markers = [dl...(dl...(Item[...]), Position=Item['latlon'] for Item in marker_data]

cluster = dl.markerGroup(?)(id='...', children= markers,...)

Thanks in advance.

This would be very useful in order to store the last view of a user, so that when he comes back we can reset his last position and zoom.

If I zoom and pan the map, these props also do not seem to get the current value from the map (viewport too), seems to similar to #25

The section https://react-leaflet.js.org/docs/en/components: Manipulating the viewport states that

These changes can be tracked using the move and moveend events, so your component can store the current center and zoom values as the user interacts with the map, and render these updated values so that the state of your component matches the viewport of the map.

I believe all we have to do is to add something like this

 nProps.onViewportChanged = (e) => {
            nProps.setProps({ viewport: e.viewport });
        }

in the file the src/lib/components/Map.react.js (render method):

export default class Map extends Component {
    render() {
        const nProps = Object.assign({}, this.props);
        // Bind events.
        nProps.onclick = (e) => {
            nProps.setProps({ click_lat_lng: [e.latlng.lat, e.latlng.lng] });
        }
        nProps.onlocationfound = (e) => {
            nProps.setProps({ location_lat_lon_acc: [e.latlng.lat, e.latlng.lng, e.accuracy] });
        }
        nProps.ondblclick = (e) => {
            nProps.setProps({ dbl_click_lat_lng: [e.latlng.lat, e.latlng.lng] });
        }
        // Render the leaflet component.
        return <LeafletMap {...nProps} />
    }

}




I wanted to try this out myself, but I cannot get dash-leaflet running on my machine?

My steps here were:

1. git clone this repo
2. python3 -m venv venv
3. .venv/activate
4. git install -r requirements.txt
5. npm install -> this fails with ```> [email protected] validate-init /Users/christian/src/dash-leaflet
> python _validate_init.py

Traceback (most recent call last):
  File "_validate_init.py", line 14, in <module>
    components_lib = importlib.import_module(components_package)
  File "/usr/local/Cellar/python/3.7.5/Frameworks/Python.framework/Versions/3.7/lib/python3.7/importlib/__init__.py", line 127, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
  File "<frozen importlib._bootstrap>", line 1006, in _gcd_import
  File "<frozen importlib._bootstrap>", line 983, in _find_and_load
  File "<frozen importlib._bootstrap>", line 967, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 677, in _load_unlocked
  File "<frozen importlib._bootstrap_external>", line 728, in exec_module
  File "<frozen importlib._bootstrap>", line 219, in _call_with_frames_removed
  File "/Users/christian/src/dash-leaflet/dash_leaflet/__init__.py", line 10, in <module>
    from ._imports_ import *
ModuleNotFoundError: No module named 'dash_leaflet._imports_'```

Hi, thanks a lot for this awesome component ! Great work !

I have few questions:

• First thing is that the "click_lat_lng" on Marker seems to be absent of 0.0.17. You mention this addition in multiple issues, referencing 0.0.4. Have those 2 tags diverged somewhere ?
• Since click_lat_lng is present on Circle, we used this instead of Marker. So that part works... but we have huge performance problems with > 1000 Circles... clicking on one item takes few seconds before the callback is called and update a "log" with clicked marker id... did you experience this as well ?

I don't have exeperience with react so I may not be able to help a lot here.

Anyway keep up the good work on this !

Hi, thanks for awesome package.
I have several questions.

1. is it possible to get the marker label in callbacks not the coordinates?
2. is it possible to change the colour of rectangle when hovering, and when the rectangle is clicked.
3. is it possible to create an area like html area, and do the point 2). ?

how the marker color could be changed in callbacks?
how we could disable leaflet link on the map (bottom right corner)

I have a callback to get zoom level:

@app.callback(
    Output("test_zoom_output", "children"),
    [Input("map","zoom")])
def zoom_event(zoom):
    print("Current Zoom Level", zoom)
    return zoom

I would like to be able to change the size of the map based on the zoom level (In the example above I am just outputting it to a div name test_zoom_output). The issue is, the above callback is never fired because the prop zoom is a setter and once it is initialized, the value isn't updated (this is what I gathered from the source code in Map.react.js ). Is there a way to expose the zoom event that is used in leafletjs? It can be found here https://leafletjs.com/reference-1.6.0.html#map-option under Map State Change Events
zoom | Event | Fired repeatedly during any change in zoom level, including zoom and fly animations.

Hi,

you have put together a great app here. I was wondering if you would be willing to add support for 2 plugins:

A plugin to control showing of layers and their opacity:
https://github.com/dayjournal/Leaflet.Control.Opacity

Also in your heroku example you show how you could draw polygons. Here is a plugin that takes this to the next level:

https://github.com/geoman-io/leaflet-geoman

Thanks!

Code to check:

import dash
import dash_html_components as html
import dash_leaflet as dl

# Polygon with inner ring.
polygon = dl.Polygon(color="#ff7800", weight=1, positions=[[[54, -6], [55, -7], [56, -2], [55, 1], [53, 0]],
                                                           [[54, -3], [54, -2], [55, -1], [55, -5]]])


polyline1 = dl.Polyline(positions=[[58.44773, -28.65234], [52.9354, -23.33496], [53.01478, -14.32617],
                                  [58.1707, -10.37109], [59.68993, -0.65918]], color='blue')

polyline2 = dl.Polyline(positions=[[58.5, -28.65234], [53, -23.33496], [53, -14.32617],
                                  [57.1707, -10.37109], [58.68993, -0.65918]], color='red')

# Create app.
app = dash.Dash()
app.layout = html.Div(dl.Map([dl.TileLayer(),
                              dl.LayerGroup([polyline1, polyline2]),
                              dl.LayerGroup([polygon])],
                             zoom=4, center=(52.0, -11.0)),
                      style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})

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

Result with Dash Leaflet 0.0.16:

Result with Dash Leaflet 0.0.17:

Result with Dash Leaflet 0.0.18rc2:
Same as 0.0.17 :(

Hi
I'm wondering if there is a way to set the map canter and zoom level inside callbacks.
For now I'm able to set the zoom level while creating the map, but not when I'm update the marker data. The idea is to reset the zoom level when markers are added.

Thanks in advance.

WMSTileLayer seems to be including extraneous properties in it's GetMap requests, even those that aren't relevant to the WMS server, including dash properties such as id, loading_state, setProps, children, etc.

In some cases, this is simply very insecure but the WMS server ignores the extra properties and still responds fine. In other cases, the WMS server will fail the request thanks to these extraneous properties. The worst culprit for this being the passing of setProps.