Framework7-core: questions about openlayers & panels/ page linking

Hello guys,

I plan to implement a map web-app using framework7-core. In the end it should be a web app, so no hybrid or native app.

I am using Node.JS, webpack and openlayers. Everything is running currently in a docker container (my development environment). To study my builds/ bundle I am using nginx as a local web server…. Okay, so far.

My current status: you can study my soured code here: https://github.com/traveller195/esp_public

I created an index.html (see: /assets/index.html) with an empty view-main and also (above) an appbar (using f7-icons).

Which will be filled by initial page which is home.html. I did like this example (see: https://framework7.io/docs/view.html#initial-page-route)

My pages (see /assets/pages) are in the single file component shape (-Tag, also -Tag including export default; for webpack.). File suffix is .f7.html. The framework7-component-loader for webpack is also installed.

Furthermore, there is an app_framework7.js for my JS App (see /src/js) . Importing the routes from an route.js

In main.css and my_app.css I can handle my CSS rules (see /src/css). As entrypoint for webpack bundle I use index.js, which refers to other JS-files and also main.css

Currently, there is a left panel as my navigation menu. And also some pages like 404.f7.html, about.f7.html, settings.f7.html

I am student at the university and want to learn more about JS event handling and asynchronous requests. So, at the moment there are gaps in my mind, I want to close by learning this amazing new technology of developing a web app.

My questions:

How can I successfully route and link my pages by using routes and my following preferences (see above)? I tried different ways (set an url with .html files, or component with .f7.html…). In the first way, my left panel moved in from the right side ? … and now (second way) nothing is working anymore

How can I load the openlayers-map in a good way? I tried several ways (loading in an extra openlayers.js file,or in a pageinit-event below the home.f7.html-page

I set keepAlive = True, so I guess when I am navigate to “panel/ navigation” further to “settings”. And then back to “navigation” and back to “main page”, the map should be visible again and loaded in the same state it was, when it disappear while opening the left panel/ navigation the first time? But unfortunately, there is only a blank white screen. Is there maybe I specific way to handle this problem with dom7 ?

And for open-layers I could not find any tutorial for working with framework7.

It would be very kind to get some hints for my current problems.

Please ask if I should explain some in a more detailed way.

Thanks in advance!

Best, Theo