Draw Control ( circle)

[MuhammedM294]

Hi!

When I try to draw any circle, once I release the mouse, it automatically converts to a circle marker.

[afonit]

Adding a reproducible example to this.

from ipyleaflet import (
    Map,
    Circle,
    CircleMarker,
    DrawControl
)

center = [34.6252978589571, -77.34580993652344]
zoom = 10

m = Map(center=center, zoom=zoom)


dc = DrawControl(
    circle={"shapeOptions": {"color": "black", "radius": 50}},
)

def handle_draw(target, action, geo_json):
    print(action)
    print(geo_json)


dc.on_draw(handle_draw)
m.add_control(dc)


circle = Circle()
circle.location = center
circle.radius = 5000
circle.color = "green"
circle.fill_color = "green"

m.add_layer(circle)

m

Steps

1. Run the above code, a circle is already added
2. In the Control Toolbar click the 'Draw a circle'
3. Click and drag anywhere on the map.
4. On mouse release a Marker is added to the map instead of a Circle. The Marker is placed where the circle's origin was when drawing.

The action shows as created
the geo_json shows as:

{'type': 'Feature', 'properties': {'style': {'stroke': True, 'color': 'black', 'weight': 4, 'opacity': 0.5, 'fill': True, 'fillColor': None, 'fillOpacity': 0.2, 'clickable': True, 'radius': 15453.481992205347}}, 'geometry': {'type': 'Point', 'coordinates': [-78.095787, 34.62928]}}

The geometry is a type `Point``.

Here is a short screencast showing the above.

Possible Causes/Ideas

I am mainly a user, but I thought I would have a look at leaflet.py, in particular the class DrawControl hoping to find a miss-assignment, as far as I could tell nothing looked off. Loading this up into a dev environment, as per the instructions and playing around did not yield any results.

Any pointers or ideas as to where the root cause could be? Instantiating and adding Circle and CircleMarker themselves work fine, but when those two are created through the DrawControl toolbar they get converted to a point on a mouseup event.

[giswqs]

I can confirm that I have the issue with ipyleaflet v0.15.0. It seems working fine with ipyleaflet version <=0.13.3

[afonit]

@giswqs ,
thank you for confirming - I wanted to try it in raw leaflet without ipyleaflet but I could not find a leaflet site/playground anywhere.

Is that a site you created or one open up to the public for trying things?

[giswqs]

Sorry, I don't know much about JavaScript. I can only test the Python side of things

[afonit]

Thanks,
If I can cobble together an example in raw leaflet, I will post on their github.

@giswqs , you said your example was in python - how did you swap out your leaflet versions for testing that you noted above? v 15 vs 13.3

[giswqs]

Use one of the following to switch versions.

pip install ipyleaflet==0.15.0
pip install ipyleaflet==0.13.3

[afonit]

@giswqs - ah thanks, I thought you were speaking of the leaflet versions, not the ipyleaflet versions, my mistake.

I found their playground, here it is:
https://leaflet.github.io/Leaflet.draw/docs/examples/full.html

On their latest versions both the Circle and CircleMarker, when created from the toolbar, produced the expected shapes.

Here is a screen recording.