Size of edit vertex (edit handle) is too big

[matbeard]

I've recently switched to the 1.0 release of Leaflet and Leaflet Draw 0.4.7 (installed via NPM). Now when drawing or editing, the size of the editing vertex/handle is bigger than previously.

Inspecting the code reveals it's 20px x 20px, but this is hard-coded into the element's style attribute, rather than the result of a CSS class.

I've fiddled with the styles and it appears that it used to be around a quarter of the size (approx 10px x 10px).

Is the size of the edit handle easily configurable? The 'old' size was far better in my opinion, but I'd like to avoid fiddling with the source.

UPDATE: After a look in the source, it appears my implementation is defaulting to using the touchResizeIcon (20x20) rather than resizeIcon (8x8).

It seems touch is enabled based on browser rather than device:

// if touch, switch to touch icon
if (L.Browser.touch) {
	this.options.moveIcon = this.options.touchMoveIcon;
	this.options.resizeIcon = this.options.touchResizeIcon;
}

so I've manually set L.Browser.touch to false, which has fixed the size of the edit vertex, but now I can no longer click on the last point of a LineString to finish the line!

[germanjoey]

0.4.9 fixes this issue.

On Wed, Feb 15, 2017 at 5:50 AM, Mat Beard [email protected] wrote:

I've recently switched to the 1.0 release of Leaflet and Leaflet Draw 0.4.7 (installed via NPM). Now when drawing or editing, the size of the editing vertex/handle is bigger than previously.

Inspecting the code reveals it's 20px x 20px, but this is hard-coded into the element's style attribute, rather than the result of a CSS class.

I've fiddled with the styles and it appears that it used to be around a quarter of the size (approx 10px x 10px).

Is the size of the edit handle easily configurable? The 'old' size was far better in my opinion, but I'd like to avoid fiddling with the source.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Leaflet/Leaflet.draw/issues/692, or mute the thread https://github.com/notifications/unsubscribe-auth/AAzNEp5wQ-stm2AApRs-nhxC_0tPnjDTks5rcwK1gaJpZM4MBvMk .

[matbeard]

Hmm, I've upgraded to 0.4.9 and I still have the same issue.

If I manually set L.Browser.touch to false I get the 'correct' size of vertices (8x8), but clicking the last point still doesn't finish the line.

[knabar]

I'm also experiencing the same issue as @matbeard on 0.4.9. Cannot finish polylines, and finishing polygons (clicking on the first point) only works sometimes.

[tombrennan06]

There's a couple of things that are broken if you set L.Browser.touch to false in 0.4.9

1. The ability to finish a polyline
2. The ability to click and drag without creating a new vertex (raised as #695) Looks like perhaps the _endPoint method which is triggered onMouseUp stops the event listeners set in _updateFinishHandler from ever running? There's certainly some issue with the interaction. I haven't been able to find a workaround so rolled back to 0.4.4

In any case, I don't think L.Browser.touch is really the right thing to use to determine the use of certain features. L.Browser.touch just says whether the browser is touch enabled, but you may not want that to be used, particularly for drawing. It would be better to have an option within Leaflet.Draw itself.

[knabar]

I've had some success by also setting touchExtend: false in the map options. Not yet sure what other effects this has.

[Sparksx]

I've same issue as @matbeard with following user agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Chrome on mac support touch event but it does not have touch screen. 20x20px handler not really needed

Use (L.Browser.mobile && L.Browser.touch) to show touch handler is probably the solution?

[mickeyjohn]

Hi everyone,
I have had the same problem after setting the L.Browser.touch option of leaflet to false. I Just rarely can finish a polygon by clicking on the first item. Anyone knows why or how to overcome this ? Thanks.

[John-P]

I am also seeing this issue of oversized handles. The larger handles appear in Firefox (66.0.1 64-bit) but not in Safari (12.0.3). I am using leaflet 1.4.0 and leaflet draw 1.0.4.

Simple example:

[ghattd]

Any (clean) way to circumvent the issue? In Firefox/Chrome/Safari on macOS 11.6.3 the handles are way too big to be used with small(ish) polygons, because the handles overlap. Instead of 20px, ~8px or so would be enough.

Sure I can hack the default values in the sources, but is there no overloading of these properties to get back to reasonable sizes of drag handlers of polygons? (Leaflet 1.7.1, Leaflet Draw 1.0.4): https://jsfiddle.net/7jr0ov2s/4/

[olshanskyev]

still here, but the vertex size can be set with: .leaflet-div-icon { margin-left: -4px !important; margin-top: -4px !important; width: 8px !important; height: 8px !important; }