Location selector: Move location on map click

[karwosts]

Proposed change

Add an icon-button to ha-selector-location which drops the marker at the center of the current viewport.

Move marker on click for location selector.

This is much faster than the old method (which I find very cumbersome), where you have to:

• zoom out so you can see the current marker location and target location
• drag the marker to the roughly desired area
• zoom in
• refine marker location
• repeat zoom/refine

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[MindFreeze]

Thanks for bringing this up. The team discussed this and we decided a better UX would be to move the marker on single press. So you tap/click the map anywhere to place the marker there. Obviously this shouldn't interfere with panning the map or resizing the circle.
Are you interested in implementing this @karwosts ?

[karwosts]

I poked at this for a bit but so far I've been unsuccessful in figuring out how to generate a click event on the base map. I may come back to it to try again sometime but I'm not sure.

Right now the map shows the grab cursor on hover, would it be changed to the pointer cursor instead?

[MindFreeze]

Right now the map shows the grab cursor on hover, would it be changed to the pointer cursor instead?

@matthiasdebaat what do you think?

[matthiasdebaat]

Right now the map shows the grab cursor on hover, would it be changed to the pointer cursor instead?

Yes, I think this is needed to make this interaction work. On drag it should switch to the grab cursor.

We have to check if this also works on mobile. Alternative for touch interfaces could be to have the marker in a fixed center position of the map, allowing users to drag the map underneath instead of dragging the marker itself.

[wendevlin]

Hi @karwosts,

you can add event listeners to the leaflet map object in ha-map.ts: https://leafletjs.com/reference.html#map-click

this.leafletMap.on("click", () => { fireEvent(this, "click") })

then you can handle the click somewhere.
And leaflet will handle that it's not a drag or something else.

[karwosts]

Ok I've changed the approach as requested. Removed the new button, and now inside the ha-selector-location, clicking on the map moves the target to the location of the click.

It also seemed to work as expected on my Android mobile as well (tap moves the marker, hold pans the map).

[wendevlin]

Great thanks, I can test it tomorrow on my iPhone.

[MindFreeze]

LGTM. Will leave it for @wendevlin to merge after trying iOS

[home-assistant]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

[wendevlin]

Great thanks, I can test it tomorrow on my iPhone.

iOS works fine ✔️

[karwosts]

Added double-click handling.

requested changes have been addressed