0nza1101 / ionic5-leaflet-mbtiles

🗺️ Ionic 5 sample app using leaflet and Leaflet.TileLayer.MBTiles to load .mbtiles format.

This is a sample application using Ionic 5 and Leaflet with Leaflet.TileLayer.MBTiles.

I made a custom npm package of Leaflet.TileLayer.MBTiles called leaflet-tilelayer-mbtiles-ts to make it compatible with mobile devices(Andoid, iOS).

npm i leaflet-tilelayer-mbtiles-ts --save

Get it running

• Clone this repository.
• Run npm install from the project root.
• If you do not install the Ionic CLI (npm install ionic -g)
• Run ionic serve in a terminal from the project root.

I was forced to create an updated npm package since fetch didn't support File URI Schema see.

If you are experiencing performance issues (mostly on old device), consider to export mbtiles to png format using mbutil and if the pngs are too big reduce png quality with pngquant

How to use it

let mb = L.tileLayer.mbTiles('assets/my.mbtiles', {
  minZoom: 0,
  maxZoom: 8
}).addTo(this.map);

mb.on('databaseloaded', (ev) => {
  console.info('MBTiles DB loaded', ev);
});
mb.on('databaseerror', (ev) => {
  console.info('MBTiles DB error', ev);
});

ionic5-leaflet-mbtiles's Issues

Can't find variable: fetch

Hello, really thank you for your offline map support.

It works well at browser but when I built this source for iPhone Simulator and ran on iOS 10.2.
As soon as the App starts, it'll meet the error and cannot proceed more.

can this work with mbtiles in android native filesystem

thank you for your good job.I have a question，can this work with mbtiles in android native filesystem.I mean the mbties is not in the code project ‘assets/XX’

How to use it on ionic existing project

I have this configuration
ionic/app-scripts : 3.1.2
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2
Node: 6.11.5
Npm: 3.10.10
System: Windows 10
I'm trying to use the npm package on existing project and it works well on the browser, but it doesn't render the map on android devices, i'm missing some step to make it work?
I added
import 'promise-polyfill';
import 'whatwg-fetch';
and installed them with npm

White blank screen at real Android device

I have cloned with clean state by git clone and build and installed to Android device.
But it shows only blank white screen with this errors.
But It works well at only browser by ionic serve.

react-scripts build exited with exit code 1

hi,

I installed the library tried to build my ionic 6 app with react, and I got some errors like below:
Module not found: Error: Can't resolve 'crypto' in '/node_modules/sql.js/js'
Module not found: Error: Can't resolve 'fs' in '/node_modules/sql.js/js'
Module not found: Error: Can't resolve 'path' in '/node_modules/sql.js/js'
...

I googled it and tried with several solutions, but there is no one can solve it.

pls help me,
thanks

Map container is already initialized.

When re-entered to the map page from other page again by navCtrl.push(), the error comes out. How can I avoid this error?
By stackoverflow's recommendation, I tried to remove map object by map.remove() before reloading map. But the map will be shown as blank even though the map is loaded normally.

core.es5.js:1084 ERROR Error: Map container is already initialized.
at NewClass._initContainer (leaflet-src.js:3286)
at NewClass.initialize (leaflet-src.js:2395)
at new NewClass (leaflet-src.js:310)
at Object.L.map (leaflet-src.js:3885)
at HomePage.webpackJsonp.225.HomePage.initMap (home.ts:31)
at HomePage.webpackJsonp.225.HomePage.ionViewDidLoad (home.ts:25)
at ViewController._lifecycle (view-controller.js:566)
at ViewController._didLoad (view-controller.js:439)
at NavControllerBase._didLoad (nav-controller-base.js:950)
at t.invoke (polyfills.js:3

Very slow load 83 mb of .mbutil file. Can it load only needed part to display? Like using query.

It doesn't work with lazy loading at real Android device.

When I load this 3party library with lazy loading, it shows this error like below.

mbTiles can not be found

I also want to implement offline map using mbtiles and leaflet.
But when I am trying to implement this in my project I got build issue that says 'mbTiles can not be found', and the line of the error is let mb = L.tileLayer.mbTiles('assets/tiles/countries-raster.mbtiles', {
Any thoughts what am I missing?

What is the size limit after the plugin stop working?

pretty explicit question, but their is the details:
I use the plugin to make an app that read mbtiles from app files storage (see issue #11 for how i make it work). But their is my problem:
when I use the demo file it work, but when I use big files (880 Mo and more), my app crash. So that why I ask for "What is the size limit after the plugin stop working?"

Broken map screen at iOS simulator.

I have cloned with clean state by git clone and build and installed to iOS simulator.
But it shows only broken map screen like below.
But It works well at only browser by ionic serve.

Uncaught ReferenceError: webpackJsonp is not defined

Hello, really thank you for your offline map support.

It works well at browser but when I built this source for real Android device and ran on Android 6.0.1.
As soon as the App starts, it'll meet the error and cannot proceed more.

Build Environment like this:
Cordova 7.1.0
Cordova android 6.3.0

Vector Tiles

This works with raster images. Have you been able to use vector tiles? Or PBF files?
I

13 seconds to load in map

i wonder what will happen if i build this on device. any work around how to speed up the process loading the mbtiles. thanks in advance