I have an ionic angular app that uses online maps (OSM and Spanish IGN maps). It runs on Android (at the moment there is not an ios versión). Now, I need to develop the possibility of using offline maps. To do it I generated an .mbtiles file with OSM vector tiles of my área of interest (plus a number of low-zoom tiles of the rest of the world, just in case). The file size is around 200 MB and I host it in the internal storage of my Android device.

I can generate vector tiles from the .mbtiles file using SQLite. Then, as far as I know, I need a web server that can serve dynamic contents to the maps component of my app. And this is the point, I suspect that I must do it outside of my ionic app, maybe through nodejs.

So, I can have a web server and a separate ionic app. How can I start both together: I suspect I can not launch the web server from ionic: I suppose (I am not experienced with backend developent) I have to do it from nodejs.

I would appreciate any help on it.

I have an ionic angular app that uses online maps (OSM and Spanish IGN maps). It runs on Android (at the moment there is not an ios versión). Now, I need to develop the possibility of using offline maps. To do it I generated an .mbtiles file with OSM vector tiles of my área of interest (plus a number of low-zoom tiles of the rest of the world, just in case). The file size is around 200 MB and I host it in the internal storage of my Android device.

I can generate vector tiles from the .mbtiles file using SQLite. Then, as far as I know, I need a web server that can serve dynamic contents to the maps component of my app. And this is the point, I suspect that I must do it outside of my ionic app, maybe through nodejs.

So, I can have a web server and a separate ionic app. How can I start both together: I suspect I can not launch the web server from ionic: I suppose (I am not experienced with backend developent) I have to do it from nodejs.

I would appreciate any help on it.

• android
• node.js
• ionic-framework
• maps
• webserver

1 Answer 1

To set up offline maps in your Ionic Angular app using an .mbtiles file:

1. Create a Node.js Server: Install Node.js and create a directory for your server. Run npm init -y and install Express and MBTiles with npm install express mbtiles.
2. Setup Server Code: Create server.js to serve tiles from your .mbtiles file.
3. Run the Server: Start the server with node server.js.
4. Integrate with Ionic: Use a mapping library (like Leaflet) to fetch tiles from your local server.
5. Run Both Services: Use a tool like concurrently to run both the server and Ionic app together.

This will enable offline map functionality in your app!