0

I have a very basic mapping application using Ionic 4 / Leaflet and functionally it is working. However I notice a significant delay on loading basemap tiles when in app compared to in my desktop dev environment. The images load almost instantly on desktop versus there being noticable delay in app.

The exact same embedded image e.g.

<img src="https://c.tile.opentopomap.org/4/15/5.png">

Takes 55ms on a desktop browser vs 420ms in app.

In Dev/Desktop

In App (taken with chromes remote devices dev tool)

What explains the 230ms “connection start” in the app? Is this related to IONIC or the webview in any way and is there a way to circumvent this? It is very noticeable and makes the performance of the app look much worse than it actually is.

The app itself is just a very basic Leaflet application

<div id="map" style="width: 100%; height: 100%"></div>
this.map = Leaflet.map("map", {
    center: [this.latitude, this.longitude],
    zoom: 6,
    minZoom: 3,
    maxZoom: 17,
    inertiaDeceleration: 1000,
    attributionControl: false,
    zoomControl: false,
    maxBounds: Leaflet.latLngBounds([-90, -180],[90, 180])
});

const basemap = Leaflet.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',  {
    maxZoom: 17,
    minZoom: 0
});

basemap.addTo(this.map);

Using "leaflet": "^1.5.1"

Ionic:

Ionic CLI : 5.4.2 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.7.4 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 6 other plugins)

Utility:

cordova-res : not installed native-run : 0.2.8

System:

Android SDK Tools : 26.1.1 (/home/anthony/Android/Sdk) NodeJS : v12.11.1 (/home/anthony/.nvm/versions/node/v12.11.1/bin/node) npm : 6.11.3 OS : Linux 5.0

  • My experience with Leaflet and Webview on Android is very good. I wrote simple Leaflet app in Android Studio and it works as fast on Android mobile phone as on PC. From your screenshot it looks like very slow (or very inefficinet) internet connection. – TomazicM Oct 8 at 16:28
  • I'm not sure it was my internet connection as my phone and pc were on the same wifi network and other mapping applications on the phone didn't have this problem. In the end I switched over to the mapbox leaflet plugin and a vector tile layer instead of raster and the performance issues completely disappeared. – user1671538 Oct 8 at 23:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.