Leaflet map not working in emulator, does work in browser

I think the solution was not actually found here, but a hack was created. “Whatever works” is sometimes okay, but when you don’t understand why something doesn’t work it can give you headaches later.

From what I’ve found, the problem of why the tiles show in a browser but not when deployed to a device is caused by the Content-Security-Policy (CSP) of the WebView used in the native applications. A plugin has been developed to address this, but I have not yet figured out how to configure it 100%.

https://cordova.apache.org/docs/en/4.0.0/guide_appdev_whitelist_index.md.html

When I simply install the plugin

ionic plugin add cordova-plugin-whitelist

it seems to work both in the browser and on my Samsung Galaxy S4 (Android 5.0). The hack described above probably works because it meets the default CSP requirements. Looking at the documentation for the plugin it is simple to add specific domains that should be trusted (the tile service), but it is not very easy to figure out what (sub)domains to include.

If you install the plugin, without adding anything, it seems to run… for some reason, but you will get a bunch of warning in your console saying “No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.” With these services like Google maps or Leaflet, it isn’t straightforward figuring out what domains to include, because they seem to call several different sub-domains. I still have yet to try out wild-cards to make it work how it is supposed to.