emilhe / dash-leaflet

MIT License
204 stars 33 forks source link

Improving edit_control with adding ID to marker, polygon, polyline, rectangle, circle, circlemarker #235

Open pip-install-python opened 1 month ago

pip-install-python commented 1 month ago

Suggestions I'd like to make with specifically edit_control, probably extremely nitche and petty but if we could receive a geojson_edit response from the edit specific tool in EditControl that would be amazing.

For reference, I designed Dash EmojiMart and am currently working on a map index app:

Screenshot 2024-05-26 at 3 07 09 PM

I have been able to set it up so EmojiMart and select an icon and add it to the map from a callback which references an input of clickData but haven't been able to set up the same functionality from the EditControl.

I'd like to use the EditControl to add marker's, I can add a blue base leaflet-marker-icon however their is no id for me to hit with a callback to replace it with a custom icon which I have setup. My suggestion would be to base id's on marker, polygon, polyline, rectangle, circle, circlemarker from EditControl id so adding a marker would return for example edit_control_marker_1 and iter from that. This would allow a developer to reference the individual marks created via EditControl and change them live.

emilhe commented 1 month ago

I like the concept of extending the flexibility. Other options could be to pass a (JS) render function, which will control the icon. I'll be happy to look at a PR, which ever route you find most appropriate.

pip-install-python commented 1 month ago

One suggestion that might work is using a dynamic id like: id={"type": "dynamic-input", "index": location["pk"]} Not entirely sure if its relevant but I needed to create markers with id's that can be called over and over again and what I came up with is:

dl.Marker(
            position=[location["lat"], location["lon"]],
            children=dl.Tooltip(
                children=html.Img(
                    src=location["image"],
                    style={
                        "width": "30vw",
                        "height": "20vh",
                        "max-width": "250px",
                        "max-height": "250px",
                    },
                ),
                direction="top",
            ),
            icon=custom_icon,
            id={"type": "dynamic-input", "index": location["pk"]},
        )

Also considering how much work you've put into dash leaflet I think you might enjoy checking out the app I've been building with it: https://dash.geomapindex.com . Just launched it this past weekend, still in active development but the main focus of development is around dash leaflet.

Big fan, thanks for the response actively following your work :)

qr-http___dashgeomapindexcom_AihBuSf