Hey everyone!
Does anybody know how can I set a dynamic draggable marker here?
I'm using Geolocation component,
I want to show the location on the map and then, the user can manually adjust it, so this is what I tried:
Any advice?
Thanks!
Hi Franse,
You can try one of these two options. I haven't tried it yet so you may have to tweak.
<script>
var marker = L.marker([51.5, -0.09], { draggable: true }).addTo(map);
</script>
or ....
<script>
marker.on('dragend', function(event) {
var marker = event.target;
var position = marker.getLatLng();
console.log(position.lat, position.lng); // Log the new position to console
});
</script>
Disregard this: Easier way posted below.
Thanks @brad as always!
Yes I'm trying to find a Wappler way to do this and avoid custom code because don't know how AppConnect handles the map.
Maybe I need to do some more research..
Thanks again my friend
Actually all you have to do is add draggable="true" to your marker code.
https://sandbox.lawryk.ca/leaflet
<dmx-leaflet-marker id="leafletmarker1" latitude="52.152000" longitude="-122.174100" draggable="true" tooltip="Williams Lake Studio Theatre" popup="4100 Mackenzie Ave N" color="mint" address="Williams Lake, BC"></dmx-leaflet-marker>
Yes but that works only for static ones.
In my case, lat lon are not defined yet:
Hmmm, where are you getting your initial long and lat from? Does the initial marker show up at all?
Tried some combinations, London by default as Wappler set that.
The problem is that I need to get the coords from the geocomponent, and after that, set the marker, a draggable one.
There's no dynamic action for that 
So you currently are not getting an initial marker at all?
What 'geocomponent'? I'm not sure I understand that term.
Sorry, geolocation component
Well the truth is that the marker needs lat and lon to be displayed, the problem comes when geolocation component is not loaded yet, so no coordinates are available.
Hmmm, what are your settings for dynamic markers? I also see there is an option for draggable there. Not sure what is suppose to go there though.
Actually, draggable is a Dynamic Attribute Setting ...... so if you can get your marker to initially show, it is quite easy to add the draggable feature and set it to true.
The problem with that is it requires a User to accept Geo Location both in the browser and at the device level. What happens if the User has opted out of allowing this permission or uses a VPN? Have you considered a fallback or prompt? Could you not initialise a Flow to grab the coordinates if available, prompt to accept they are correct, wait, set the latitude and longitude and invalidateSize (essentially redraw) based on the accepted location, which will render the map... And on an error (ie no permission for Geo Location) display a prompt to enable it? Then run the Flow again once the permission is accepted...?
Sorry I may well be going on off on one again hahahaha...
@brad I can't use dynamic attributes because the page doesn't have loaded coords..
When I use dynamic geo inputs both are nulls (lat and long)
I need to figure how to catch them and put it on a draggable marker
@Cheese Hello, yes I have every scenario on my mind, actually the user needs to set his location via nominatum/browser geolocation.
It also uses geoplugin so will notice about wrong country/state/city
That's the problem: I can set both as a new market but not a draggable one, which is what I need for them so they can adjust it to the real location (Both nominatum/browser geolocation shows like 400 meters away from where they really are)
Oh, so you want to use the browser location. Hmmmm, not sure that's possible out of the box (or reliable). Way out of my league.
Hey Francisco,
On the Dynamic Markers properties, set the Draggable to true (or a dynamic value that is equal to true), otherwise the Marker won't move...
Now, the marker is draggable and we can move it...
UPDATE: (there is a Markermove event for the Map)
So, add a Markermove event on the Mapf and handle the values that marker outputs (or anyway the marker's data (lat, lon) are updated with the current marker's position
Hey Tasos, thanks but there is a main issue here:
Lat long are not availablen (yet) and there's no dynamic event to trigger that.
Here's what I need:
When lat long are available then add a draggable marker..
I can do it with a regular one via geolocation success event but not a draggable one.
I can create a draggable marker like you show but not a dynamic one (because coords are not received yet)
OK... I see
I have to ask...
Are you talking about a single marker? Only one per session/form?
If yes, my first thought is to forget the dynamic marker and add a marker inside the leaflet map.
Leave it blank and whenever you have the marker's lat & lon, you pass them to its dynamic attributes (lat, lon etc..).
Then you can add a dynamic Move event on the Marker itself and get its information whenever it is dragged
(as a matter of fact I was writing of this way because i couldn't find the Markermone event of the map... you can see it if you click the edited post of mine (the pencil icon)
That's a nice guest, but the problem is that the "marker" is not available on the picker, I can only see the map. So no way to set the coords to that marker..
From what I understand, you are waiting for the user to accept the use of his location?
What about the map itself? Is there a lat & lon of the map?
Can't you add amarker at the lat & lon of the map?
Sorry for the question but I'm trying to understand buddy... 
It seems that I need to learn what you're trying to do... Interesting...
