Allow draggable marker with Leaflet Search

Wappler General Need Help
21

Haha, you always are there trying to put someone else's shoes, really appreciate it :slight_smile:

It's really simple in fact:

People share the coords, it can be via nominatum, or using geolocation component via browser.
The problem is that it doesn't actually gives the exact location (usually it's from 200 to 500m away).

So what I want is opening a modal after the coords are given, and displaying a Leaflet map with a draggable marker, so the user can manually adjust that marker to where really is.

Wappler offers two scenarios for this:

  1. Create a draggable marker. But dynamic values are not ready yet so both values are null.
  2. On geo/nominatum success event (coords are given): Create a marker on the map. But there's no option to be draggable.

PS: Tried to use something like:

dmx.app.set('content.leafletmap1.leafletmarker1.latitude', -57); 
dmx.app.set('content.leafletmap1.leafletmarker1.longitude', -54)

But getting undefined

22

So, you have a marker that is "about"...
And you want to open the modal with the "about" marker's lat & lon and give him the right to adjust the marker's exact location by draging it to the correct point...

Sorry for repeating the same questions but I'm trying to learn from your workarounf buddy...

So, as I already mentioned, add a marker under the leaflet map and add the "about" marker's data

image
image470×1210 33.6 KB

And add a dynamic Move event on the Marker (with a small debounce) so you get the new/updated exact location of the marker from the user drag...

image
image1131×1340 103 KB

Is that possible you think? :thinking:

23

Yes, correct! That's what I need.
But on your picture, you are using a marker inside the leaflet map with defined lat & long.

I can't give lat and long because there are not really available yet, until the user accept to use the geolocation component.
I can't also define coords and change them.
Because it's not under action panel..
Your case works fine when coords are defined before map is loaded.

In my case, I need to load the map, and in some moment, place a draggable marker there.

24

That would be the leafmap center lat & lon

25

Yes, but

  1. You can't load a marker with no coords (I don't have them until geolocation is accepted)
  2. I can't move that marker to other coords because there's no actions under the picker panel
26

Can you please screenshot the leaflet properties (the lat & lon especially)?

27

image
image942×940 137 KB

28

In fact I'm asking help with that, because there's no possibility to achieve this

image
image1008×756 106 KB

image

You can try doing this, if you want:

Ask for coordinates using geolocation (or Nominatum API)
Once you have it, then try to display a draggable marker with that coords

29

You obviously are right buddy.. Sorry

I'm working localy (wappler local server) on a PWA SPA and I have given access to my location...

Let me check it brother

30

Thanks all of you @brad @Cheese @famousmag for trying to help
I will create some FR so others can achieve this too :slight_smile:

2 Likes
31

@franse ,

The cordinates are not available on page load... That's why it throughs the error I think.
So, don't set lat or lon in our leafmap... Empty
If we run a page flow and set a wait (eg 500) and then set the lat & lon there is no error

image
image763×280 7.54 KB

Can you please check that?

32

But we don't know how much the user will take to accept those coordinates..
The lat & lon are only available when user accept using geolocation component:

User accept geolocation -> open modal with leaflet and a draggable marker.
User don't accept to use geolocation -> don't open modal