v-leaflet PointField customization

I need a PointField that has a “Move here” button next to the map. This way the user doesn’t need to drag, zoom in, drag a bit closer, zoom in some more and then drag some more to get the marker to some exact position. With the “Move here” button, the user needs to navigate to the correct place, click “Move here” and drag marker once, from center of the mapview to the wanted location.

I tried to accomplish this by trial and error:

Adding a Button to the PointField fails, because it won’t accept any ramdom Component to be added.

I considered making an new CustomField that would use a PointField, but I would have to override a lot of methods that would just call the corresponding method in the PointField.

And then I gave up and did it the ugly way:

  • Build a FormLayout with a PointField
  • Create a VerticalLayout
  • Replace the PointField with the VerticalLayout in the FormLayout
  • Add the PointField and a Button to the VerticalLayout

Is there a good way to make the marker on a PointField to move when a Button is clicked?
Marker field of PointField is private with no getter so I needed to iterate over the components of the map and cast to LMarker before I could set the location.

Hi,

I probably didn’t quite get the clear user story, but might this help?

https://github.com/mstahv/v-leaflet/commit/811d83afa8d2bdffa4addde4c8f6fd5cf7e39c75

It might also make sense to change the PointField so that clicking anywhere on points map moves the marker to that point. The users could either drag or click the new value for the Point.

cheers,
matti

You can demonstrate the use case by first moving a marker somewhere very far away from your location (to another continent) and then deciding that you want the marker to point exactly at your desk at your office.

Moving the marker by clicking the map is a good idea. I could do that already by adding a listener ot the map. Thanks.

Hi,

Agreed, it should definitely change the place by clicks as well. Could you add an issue to the project page so we don’t forget this? Even better if you can check out the project and contribute the enhancement.

__
cheers,
matti

Ah, never mind, I already changed it to work this way in:
https://github.com/mstahv/v-leaflet/commit/9b92fa277bb04b046fb8a4a60e3f0f1e4c2fcd99