DrawControl: edit layers button not working (again)

This is very similar to #218, and happened after leaflet got updated to version 1.5.1 few days back. The error is in the leaflet-draw library, it’s passing undefined to setStyle function in leaflet and this breaks inside leaflet library.

Downgrading leaflet to 1.4.0 fixes this problem. Fixing it in leaflet-draw is probably not too hard, but there seems to be a backlog of 55 PRs in leaflet-draw library and no sign of activity for about 8 months, so not too sure on how quickly this will be addressed.

There is a different drawing plugin for leaflet https://github.com/codeofsumit/leaflet.pm it seems to provide same functionality, more in fact, and is more actively maintained, at least right now.

I’m willing to prototype a DrawControl based off leaflet.pm backend, I see three possible approaches:

1. Replace leaflet-draw with pm.leaflet
2. Add new control DrawControlPM to this extension
3. Separate extension designed to work with this one and a compatible interface on python side.

Error Log

[Error] TypeError: undefined is not an object (evaluating 'style.hasOwnProperty')
	setStyle (vendors~main.c7481366bd1204a26e11.js:27357)
	addHooks (vendors~main.c7481366bd1204a26e11.js:87593:25906)
	(anonymous function) (vendors~main.c7481366bd1204a26e11.js:87593:24345)
	_eachVertexHandler (vendors~main.c7481366bd1204a26e11.js:87593:24229)
	addHooks (vendors~main.c7481366bd1204a26e11.js:87593:24322)
	enable (vendors~main.c7481366bd1204a26e11.js:25238)
	_enableLayerEdit (vendors~main.c7481366bd1204a26e11.js:87594:31731)
	eachLayer (vendors~main.c7481366bd1204a26e11.js:26386)
	addHooks (vendors~main.c7481366bd1204a26e11.js:87594:28799)
	enable (vendors~main.c7481366bd1204a26e11.js:25238)
	enable (vendors~main.c7481366bd1204a26e11.js:87594:28305)

[Kirill888]

@martinRenou I have started a leaflet.pm version here: https://github.com/Kirill888/ipyleaflet/commit/b4078cb295bd3fe02db5dd1c63087b02c11db2a0

But there are few things that are different between leaflet-draw and leaflet-pm

• no circlemarker in leaflet-pm
• no cancel/save for edit/delete, things just happen immediately (no undo)
• I haven’t done styling customization yet, but it should be possible
• Controls position is fixed to topleft (for now at least)

On a plus side:

• Dragging of polygons/polylines
• Polygons with holes via pm:cut

Test notebook

import ipyleaflet as L
from ipywidgets import widgets as w

def mk_clear_button(target, action_name):
    b = w.Button(description=action_name.replace('_', ' '))
    action = getattr(target, action_name)
    b.on_click(lambda *a: action())
    return b

out = w.Output(layout=w.Layout(width='50%', 
                               height='400px', 
                               overflow_y='scroll'))
m = L.Map(zoom=2)
draw = L.DrawControl(
    edit=True,
    remove=True,
    circlemarker={'shapeOptions': {}},
    marker={'shapeOptions': {}},
    circle={'shapeOptions': {}},    
    polyline={'shapeOptions': {}},
    rectangle={'shapeOptions': {}},
    polygon = {'shapeOptions': {}})

def on_draw_handler(draw, action, geo_json):
    with out:
        print(action, geo_json)

btns = [mk_clear_button(draw, s) for s in dir(draw) if s.startswith('clear')]
btns.append(mk_clear_button(out, 'clear_output'))
draw.on_draw(on_draw_handler)
m.add_control(draw)
w.VBox([w.HBox(btns), 
        w.HBox([m, out])])

[martinRenou]

Thanks for looking at it @Kirill888 !

• no circlemarker in leaflet-pm
• no cancel/save for edit/delete, things just happen immediately (no undo)

I suppose we can just make a backward incompatible release of ipyleaflet with your changes, and open feature requests upstream?

• Controls position is fixed to topleft (for now at least)

This is a known issue for most some of the controls https://github.com/jupyter-widgets/ipyleaflet/issues/367. We should also open feature requests upstream, or maybe even fix it ourselves opening PRs upstream.

Thanks again for looking into it. Don’t hesitate to open a PR when you are happy with what you have 😃