126
Views
10
Comments
Solved
[OutSystems Maps] How to keep user selected zoom level unchanged when map center changes
outsystems-maps
Reactive icon
Forge asset by OutSystems
Application Type
Mobile

I can successfully use Outsystems Maps plugin in my mobile app.

The Zoom parameter of Map block is set as Entities.Zoom.Zoom15_Streets.

When the user changes the maps zoom level, the map scales in/out as expected.

But as soon as the map's center is changed by the user (dragging) the zoom level of the map in its new location is automatically reset to the initialy configured level (that is to Entities.Zoom.Zoom15_Streets).

How can I prevent auto changing of the zoom level and make user's last set zoom level persistent on map drag?

Thanks,

Hakan

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Hakan Kalyoncu 

The use case you mentioned I was able to replicate and it's by design.

As a workaround, you can override the API responsible to deal with this behaviour which is refreshZoom to adapt to your use case.
For that, place a JS node in the Map_Initialized event handler with the following (for production, please remove the console.log): 

Attached you have the code (I just tested it on my end since your oml has dependencies I don't have in my personal environment)

I also advise you to always try to use the latest version of the component in order to benefit from some fixes and new functionalities.

Hope it helps.

Cheers,
GM

GeGoSupport_v20_Workaround.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Hakan Kalyoncu 

I was trying to replicate that but unless I'm missing some step, the Zoom level is always kept.
The steps I followed (check the GIF attached):

  • Created a Map with Zoom = Entities.Zoom.Zoom15_Streets
  • Zoom in/out 
  • Changed the map's center by dragging it to another spot
  • The Zoom didn't change, as expected

Which step am I missing?
Which version of the component are you using? Where are you testing (device/browser/etc..)? 
Can you share your sample and maybe a video/GIF? 

Cheers,
GM 

MapsZoomLevel.gif
2021-01-23 20-21-41
Hakan Kalyoncu

Hi @Gonçalo Martins ,

First of all thank you for your help.

Using OutSystemsCharts Version 3.0.0.

I am experiencing this situation on my mobile app. Testing at both iOS and Android devices.

Sample video capture of the app:


As you can see from the above video as soon as the drag end event fires the zoom level is reset to the configured one.

Best regards,

Hakan


2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Hakan Kalyoncu 

I would like to know the version of OutSystems Maps, not Charts 🙂

Can you please share an oml where I can replicate that? 
Are you using a native build, PWA or directly in the browser?

Cheers,
GM

2021-01-23 20-21-41
Hakan Kalyoncu

Sorry :))

OutSystemsMaps Version 1.6.4

I have to prepare a new page. Will send  the oml asap.

I am using native build.

2021-01-23 20-21-41
Hakan Kalyoncu

Please find attached the OML for testing.

GeGoSupport_v20.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Hakan Kalyoncu 

The use case you mentioned I was able to replicate and it's by design.

As a workaround, you can override the API responsible to deal with this behaviour which is refreshZoom to adapt to your use case.
For that, place a JS node in the Map_Initialized event handler with the following (for production, please remove the console.log): 

Attached you have the code (I just tested it on my end since your oml has dependencies I don't have in my personal environment)

I also advise you to always try to use the latest version of the component in order to benefit from some fixes and new functionalities.

Hope it helps.

Cheers,
GM

GeGoSupport_v20_Workaround.oml
2021-01-23 20-21-41
Hakan Kalyoncu

Hi Gonçalo,

Your workaround worked as expected.

Thanks a lot.

Hakan


2022-11-12 11-28-30
Gonçalo Martins
Staff
2021-01-23 20-21-41
Hakan Kalyoncu

Hi @Gonçalo Martins ,

Although I marked as solution, I realized some weird functioning at the code.

The problem is when I navigate to anther page and return back to the same screen, the functionality is lost. That is the map behaves as if your code does not exist.

It is as if the after returning back to the map page the Map_Initilized event is not firing and the map object is resetting to its defoult behaviour.

Do you have any idea to have Map_Initilized event fired everytime the screen is revisited?

Thank you,

Hakan


2021-01-23 20-21-41
Hakan Kalyoncu

Hi @Gonçalo Martins ,

I found the workaround.

Simply by calling the same javascript code also from the onready event but this time checking that the map object is defined.

This wayi the configuration update is made either after onready event (if the user navigates back to the map screen) or after Map_Initialized event (if the map screen is visited for the first time).

Thanks,

Hakan

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