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.
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
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.
move
Event
setLatLng
oldLatLng
latlng
dragstart
movestart
drag
dragend
DragEndEvent
moveend
Preeti Kumari wrote:
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:
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.
Chezhiyan Siva wrote:
The same thing I was did.Instead of map I used the image.
Could you please share your oml file?
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.
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.
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.
Lester Hanger wrote:
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,