Plugin sqlite-db-copy is not working for iOS Ionic 6 Capacitor 4

Capacitor
1

Hello,
I’m using sqlite-db-copy plugin because i’m trying to load pre existing mbtiles file for my offline maps. For Android it works great but in iOS i get the below error when opening the app.

Could not copy file from /private/var/containers/Bundle/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/App.app/www/skiathos.mbtiles to /var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/Library/LocalDatabase/skiathos.mbtiles. Error = Error Domain=NSCocoaErrorDomain Code=260 “The file \M-b\M^@\M^\skiathos.mbtiles\M-b\M^@\M^] couldn\M-b\M^@\M^Yt be opened because there is no such file.” UserInfo={NSFilePath=/private/var/containers/Bundle/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/App.app/www/skiathos.mbtiles, NSUnderlyingError=0x2832c2fa0 {Error Domain=NSPOSIXErrorDomain Code=2 “No such file or directory”}}

In my ios platform structure there is no ‘App.app’, so is there a way to change this path? My file is located inside ‘ios/App/App/www’ folder

My code that runs for copying mbtiles and works for Android but not for iOS is:

this.mbtilePath = ‘skiathos.mbtiles’;
console.log(‘[App contructor()] Trying to copy mbtiles from ‘, this.mbtilePath);
this.sqliteDbCopy.copy(this.mbtilePath, 0)
.then((res: any) => {
console.log(’[App()] Successfully copied database’, res);

and my configurations are:

Ionic:

Ionic CLI : 6.18.1 (C:\Users\Usr\AppData\Roaming\nvm\v16.13.1\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.5
@angular-devkit/build-angular : 13.0.4
@angular-devkit/schematics : 13.0.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 4.0.1
@capacitor/android : 4.0.1
@capacitor/core : 4.0.1
@capacitor/ios : 4.0.1

Utility:

cordova-res : 0.15.4
native-run : 1.6.0

System:

Android SDK Tools : 26.1.1 (C:\Users\Usr\AppData\Local\Android\Sdk)
NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
npm : 8.12.2
OS : Windows 10

2

The only solution i found after a lot of struggling for offline maps to work in my Ionic 6 Capacitor 4 app to work with Leaflet was to convert my mbtiles file to png files with mbutil (GitHub - mapbox/mbutil: Importer and Exporter of MBTiles ). Then placing the png files inside assets and using tileLayer to load the tiles from the png images with the below code

L.tileLayer(‘./assets/tiles/{z}/{x}/{y}.png’, {
attribution: ‘Test’
}).addTo(this.map);

I hope this can help someone that is looking for a way to have offline maps in Ionic 6 Capacitor 4 app