Skip to content
Sasha Boginsky edited this page Sep 27, 2019 · 3 revisions

singleclick

What you should know

We use the singleclick event in our doubleClickLabels and doubleClickZoom handlers so that when you dblclick on the map, the location labels can be toggled or the map zoomed, respectively, while the image stays selected.

  • Both handlers listen for map click and use a setTimeout with a delay of 250ms that will fire a singleclick if the map was not clicked more than once during that time, otherwise a dblclick.
  • The logic we want the handler to run is in that same handler class and runs on dblclick.
  • Meanwhile, the L.DistortableImageOverlay and L.DistortableCollection classes listen for singleclick on the map instead of click.

Tradeoffs - 250ms

  • You don't have to reselect the image each time you dblclick on the map, but the UI may appear less responsive, because on a regular map click the image won't deselect for 250ms.
  • 250ms is the best time span we found to balance this tradeoff: it is quick enough to not provide noticeable disruption on click, but not so fast that the user would have to dblclick extremely quickly as to not miss the timeout.

Disabling singleclick

L.DistortableImageOverlay and L.DistortableCollection already have built-in logic to start listening for click when both doubleClickLabels and doubleClickZoom are disabled, because they are the only handlers that fire this event.

// only one of these can be enabled at once so you'll never have to call both but just for example purposes
map.doubleClickLabels.disable();
map.doubleClickZoom.disable();
  • Now when you click on the map you'll notice the image is deselected slightly faster (but label toggling and map zooming, of course, will be turned off).

If you want to keep the handlers but without the singleclick event, an alternative is just to run:

// swaps all singleclick listeners with click
map.fire('singleclickoff');

// to reverse that
map.fire('singleclickon');