Background map


I am building an app in ionic 2 that has a map that should always stay in the background of the app.
All pages should be able to communicate with the map using a service. The map state must be preserved.

How do you suggest to implement this? It looks like I cannot just put a map (ol3.js) on the root page, since It’ll be reset on navigating to a different page.


Could you explain, please - what’s the point of showing the map all the time even when going between pages? For instance why do you need a map on a setting page? I really don’t get the idea)


The map takes a long time to start (I’ll also be using 3D maps, so up to a a second or two), and I don’t want to have to reload everything each time. Most of the time the users will be using the map page, with occasional change to other pages. I don’t want the map to restart every time, as this will impact the user experience.

Do you think I could work with a modal page? can I push more windows after the modal page without resetting the map?

If not, I need a way to display the map always in the background, to avoid flickering and delays.

Probably modal window won’t change anything in the page, from where it was called. But to say the truth - I’ve checked it

Thanks. The thing is that I’ll have to push other pages after the modal view (for example, I’ll search, and see details).

Do you think there’s a way to always show a background map on the background?

Well as I see in this example - when you set some parameters and call the modal window, close it - you see the same parameters are still chosen and probably yes - that’s the way you should definitely try to implement your app)

Or as the crazy idea - if you had logic related to the map, you could place the map dom node above the ion-app tag, do some magic(give it z-index: -1, position it absolutely and other things that would be needed) and also setup a little ion-app css and the css styles of others components(I really don’t know how many you should change to make in transparent) of the framework. The result could be - the html dom element of the map is behing the html element of the ionic app and some angular service is talking to the library with which help you have built the map.

Thanks. The problem with the modal option is that if I push another page to the stock, I’m afraid the changes will be lost.

The second option is what I was thinking. Should I change index.html in the www folder, or is there a way to do that on app.html in the app folder?

No - index.html is the file you need in if you try to do it in this way. But I would try to implement the first one if the time is not the case. The only case should be checking is that the page with the map doesn’t loose the state after opening-closing modals.