Skip to Content (Press Enter)
2018-07-02 13-46-42
AJEllen
54Views
8Comments
Solved
[OpenstreetMapPlugin] Only small section of Map is shown on Andriod
Question
Mobile
Forge
openstreetmapplugin
Reactive icon
OpenstreetMapPlugin (O11)
Forge asset 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

0
0
18 May 2021
Copy Link
2021-01-04 08-13-48
Toto
 
MVP
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

See solution in context
OpenStreetMapTroubleshoot.oml
0
0
19 May 2021
Copy Link
2018-07-02 13-46-42
AJEllen

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

0
0
20 May 2021
Copy Link
2021-01-04 08-13-48
Toto
 
MVP

Hi Albert,

Can you give the sample oml of this ?

Thanks

0
0
19 May 2021
Copy Link
2018-07-02 13-46-42
AJEllen

Hi Toto,

I will try to create a sample oml.

Kind regards,
Albert Ellen

0
0
19 May 2021
Copy Link
2021-05-18 02-27-17
Manish Gupta
Champion

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

0
0
19 May 2021
Copy Link
2018-07-02 13-46-42
AJEllen

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
0
0
19 May 2021
Copy Link
2021-05-18 02-27-17
Manish Gupta
Champion

Replying to AJEllen's comment on 19 May 2021 07:38:04

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. 
0
0
20 May 2021
Copy Link
2018-07-02 13-46-42
AJEllen

Replying to Manish Gupta's comment on 20 May 2021 01:31:24

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

0
0
20 May 2021
Copy Link
2021-01-04 08-13-48
Toto
 
MVP
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
0
0
19 May 2021
Copy Link
2018-07-02 13-46-42
AJEllen

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

0
0
20 May 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.