[Leaflet Mobile Plugin] Leaflet Mobile Plugin - Displaying only one marker on the map.

Forge Component
(1)
Published on 2019-10-12 by Vincent Koning
1 vote
Published on 2019-10-12 by Vincent Koning

For one of our mobile apps, we are planning to use Leaflet Mobile Plugin. Created a sample app with Leaflet and used AddMarker to display a marker on the map. This marker is draggable, 

When the map is displayed, the expectation is that only one marker is displayed on the map. However, there two markers appearing on the map, both are draggable. 

What needs to be done to limit the number of markers displayed on the map to one?

See the attached oml.

Hello Siva,


I just checked your oml and found that issues is because you have set the drag option as true.

Updated oml is attached.

Please read below from leaflet doc


Events

EventDataDescription
moveEventFired when the marker is moved via setLatLng or by dragging. Old and new coordinates are included in event arguments as oldLatLng, latlng.

Dragging events

EventDataDescription
dragstartEventFired when the user starts dragging the marker.
movestartEventFired when the marker starts moving (because of dragging).
dragEventFired repeatedly while the user drags the marker.
dragendDragEndEventFired when the user stops dragging the marker.
moveendEventFired when the marker stops moving (because of dragging).

Preeti Kumari wrote:

Hello Siva,


I just checked your oml and found that issues is because you have set the drag option as true.

Updated oml is attached.

Please read below from leaflet doc


Events

EventDataDescription
moveEventFired when the marker is moved via setLatLng or by dragging. Old and new coordinates are included in event arguments as oldLatLng, latlng.

Dragging events

EventDataDescription
dragstartEventFired when the user starts dragging the marker.
movestartEventFired when the marker starts moving (because of dragging).
dragEventFired repeatedly while the user drags the marker.
dragendDragEndEventFired when the user stops dragging the marker.
moveendEventFired when the marker stops moving (because of dragging).

Preeti,

Thanks for the response and pointing me to events portion of the documentation.

I should have been clear in my message. I want the marker to be draggable. 

Based on what you shared, looks like I need to write a handler for the move event and explicitly hide/show marker(s). I will try that...

Thanks,

Chezhiyan


Hello Chezhiyan Siva,

Are you want something like this?

Suhas Jamdade wrote:

Hello Chezhiyan Siva,

Are you want something like this?

Suhas,

What does you app do? There is only input field in the app, not sure what that is used for...

Are you displaying Leaflet map in your app? Are you displaying marker(s) in your app?

Without any explanation, it is difficult to understand if your response is even relevant.


I tried a few options and events in map and marker objects. Nothing is help me with displaying only one marker when dragging or setLatLng (as a result of mouse click) occurs. 

Please look at the following:

https://stackoverflow.com/questions/27271994/leaflet-draggable-marker-and-coordinates-display-in-a-field-form

Answer 3 - first bullet - both drag and click (and the map centers on the marker). This  is what I am trying to implement on our mobile app.

Also, go to the example shown in the link given just below Answer 3. This is how the map is displayed (dragging the marker or clicking on the map, moves the marker as expected - only one marker appears on the map):


In my app, when the map is loaded, this is how the map is displayed:

After drag or click action, this is how the map is displayed (with two markers, both with same identifiers):


I have attached the latest oml as well. Could not figure out what is wrong in my app? Appreciate any help resolving this issue.

Chezhiyan Siva wrote:

Suhas Jamdade wrote:

Hello Chezhiyan Siva,

Are you want something like this?

Suhas,

What does you app do? There is only input field in the app, not sure what that is used for...

Are you displaying Leaflet map in your app? Are you displaying marker(s) in your app?

Without any explanation, it is difficult to understand if your response is even relevant.


The same thing I was did.Instead of map I used the image.

Suhas Jamdade wrote:

Chezhiyan Siva wrote:

Suhas Jamdade wrote:

Hello Chezhiyan Siva,

Are you want something like this?

Suhas,

What does you app do? There is only input field in the app, not sure what that is used for...

Are you displaying Leaflet map in your app? Are you displaying marker(s) in your app?

Without any explanation, it is difficult to understand if your response is even relevant.


The same thing I was did.Instead of map I used the image.

Could you please share your oml file?


Thanks,

Chezhiyan


To test how draggble marker works, I developed a sample web application (similar to the sample mobile app). Nothing fancy, simple page with map, using Leaflet JS Web Plugin. I have attached the oml for the sample web application.

After adding a draggable marker, the dragging works as expected. The marker moves to the location where dragging ended, only one marker is visible on the map.

So, the problem is on the mobile implementation. But I could not figure out what is that I am doing wrong.

Hello Chezhiyan Siva,


Please check the this.


I haven't use this plugin. I have attached the oml file please go through it.

I have created the static. You need to create it dynamically.

Suhas Jamdade wrote:

Hello Chezhiyan Siva,


Please check the this.


I haven't use this plugin. I have attached the oml file please go through it.

I have created the static. You need to create it dynamically.

Suhas,

Thanks for spending time, trying to find a solution. 

The page and the script that you have developed follows the same path as the other solution(s), the one I referred/linked in my earlier message. It is implemented using Leaflet JS directly. 

However, I need to find a way to use the Leaflet JS Mobile Plugin. The plugin provides a lot of conveniences, I don't have to develop script for everything.

If you noticed, in my last post I developed a web app with the Leaflet JS Web Plugin, that works, no issues. Something is wrong with the way I am implementing my mobile app or the Leaflet JS Mobile Plugin is having a defect.

Solution

Hi Chezhiyan,

Without investigating much further than your initially posted SampleAppTwo.oml, it seems that the problem is simply that you were adding markers on every OnMapRender event.

At startup I found this to be called 3 times.

All I did to fix this (admittedly not the greatest) was ignore any events after the first one by checking the Marker.Name for want of a better flag.

Once we have set the name and added the marker, we ignore any further calls to this method.  The result is we only get one marker which we can happily drag around the map as you required.

Breakpoints are your friend in this respect making it very easy to track down this bug.

Regards,

Lester

Solution

Lester Hanger wrote:

Hi Chezhiyan,

Without investigating much further than your initially posted SampleAppTwo.oml, it seems that the problem is simply that you were adding markers on every OnMapRender event.

At startup I found this to be called 3 times.

All I did to fix this (admittedly not the greatest) was ignore any events after the first one by checking the Marker.Name for want of a better flag.

Once we have set the name and added the marker, we ignore any further calls to this method.  The result is we only get one marker which we can happily drag around the map as you required.

Breakpoints are your friend in this respect making it very easy to track down this bug.

Regards,

Lester

Hi Lester,

Thank you.

You are right....I should have used breakpoints to find out what was happening. I was looking for a solution or similar implementations elsewhere, instead I should have looked inside to figure out what was happening. 

Appreciate you spending time to track the issue down.

(I am using a Boolean variable to track if a marker is already added to the map or not).

Thanks again,

Chezhiyan