[OpenstreetMapPlugin] Only small section of Map is shown on Andriod
Question
Forge component by Toto
Application Type
Mobile

Hi,

We are currently trying to incorporate this component in our mobile application and running into a problem on all our Android mobile phones. On iPhone this problem does not occure.
When the page, containing the component, is accessed for the first time, the full map is shown.
When we open the page again (after accessing a second screen, which shows a larger version of the same map, but different parameters) the map is only shown partially.
The top of the map is shown the other part of the map is gray and stays gray whatever we try.
Even the marker which should be positioned in the center of the screen, falls just outside the container at the top of the container .

Thanks in advance of your answer.

Kind regards,
Albert Ellen

Champion
Solution

Hi Albert,


Will wait for your sample oml. 

In meanwhile, I think I found the possible cause for this.

It seems that the map is loaded faster than the marker finish setting up (basically map is already loaded then the marker). I'll try to modified this, but current the workaround is make sure the marker is finish first before calling the map by putting map inside if widget, after marker finish loaded, then change the flag.

Attached is the sample.

Change the flag when the marker already finish setting up. For the sample, I used JavaScript timeout for delay the load.


Thanks

OpenStreetMapTroubleshoot.oml

Hi Toto,

Thanks for your modified version of the component.
I implemented this version and it solved our problem.

When you republish the component in the forge would it be possible to upgrade in leaflet.js to the latest version?

Kind regards and many thanks,
Albert Ellen

Champion

Hi Albert,

Can you give the sample oml of this ?

Thanks

Hi Toto,

I will try to create a sample oml.

Kind regards,
Albert Ellen

Dear Albert 

Can you show the Screen layout once? It seems when you pass the parameters it is conflicting with some other items on Screen. Also, please share the Widget Tree of that screen if possible. 

Are you using specific container for the Map or it's without structure? 

Please share the OML or distribute the application as PWA once to check as OML might have other dependency too 

Let me know if you need any help to follow above steps. 


Many Thanks

Hi Manish,

Attached some screenshots of the phone and the requested widget tree.
Hopefully you can point out to me why this problem occures.
As mentioned to Toto I will try to create a sample OML.

Kind regards,
Albert

ScreenshotAndWidgetTree.PNG

Hello Albert

Thanks for sharing the details. I hope what ToTo is suggested will work for you and you will get the solution. 

Since he update the forge, you can try the below approach too -  

  1. When we click to "Open Grotere Kaart" I assume it opens map in full screen. 
  2. Then on closing full screen use back to the screen and map doesn't load correctly. 
  3. Actually the Map is loading but it's position is not correct. 
  4. Can you try by Re-Rendering the map information on this screen when user back from Full Screen? 
  5. It will get the map location again on screen and Render the Map with Refresh.
  6. It may solve your problem with less efforts for now
  7. Later on you can replace the solution with ToTo's updated component. 

Hi Manish,

Thanks for your reply.
I did implement Toto's solution in the meantime and it solved our issue with the map not rendering correctly.

Kind regards,
Albert Ellen

Champion
Solution

Hi Albert,


Will wait for your sample oml. 

In meanwhile, I think I found the possible cause for this.

It seems that the map is loaded faster than the marker finish setting up (basically map is already loaded then the marker). I'll try to modified this, but current the workaround is make sure the marker is finish first before calling the map by putting map inside if widget, after marker finish loaded, then change the flag.

Attached is the sample.

Change the flag when the marker already finish setting up. For the sample, I used JavaScript timeout for delay the load.


Thanks

OpenStreetMapTroubleshoot.oml

Hi Toto,

Thanks for your modified version of the component.
I implemented this version and it solved our problem.

When you republish the component in the forge would it be possible to upgrade in leaflet.js to the latest version?

Kind regards and many thanks,
Albert Ellen

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.