Angular Leaflet in Cordova wrapper doesn't load tiles due to protocol mismatch

I’ve just started using the Angular Leaflet directive (!/) and I’m trying to integrate this within an Ionic project.

On the browser, everything works fine: the map tiles are loaded in. When I compile the app with XCode and run in within the iOS simulator, the tiles do not load as expected.

When I use the inspector, I noticed that the html for the tiles that are loaded in is of the following form:

<img class="leaflet-tile leaflet-tile-loaded" src="//" style="height: 256px; width: 256px; left: 791px; top: -114px;">

Notice the protocol is missing with the src property. Within the Cordova wrapper, the app assumes that this should be file://, and naturally fails to load in the tiles.

Is there any way to either:

  • Explicitly add the http:// protocol to the img src?
  • Set Cordova to default to http:// with URI’s that start with //?

Also opened a GitHub issue:

I’ve had the same problem with iOS and Android – for a different API. It thinks the protocol should be file for some reason.

Figured it out. If you define a tile layer in the defaults object, Leaflet does pickup on the protocol.


  angular.extend($scope, {
    markers: {},
      northEast: {
        lat: 52.406687,
        lng: 4.9823
      southWest: {
        lat: 52.28808,
        lng: 4.789009
    defaults: {
      maxZoom: 16,
      minZoom: 12,
      tileLayer: "{z}/{x}/{y}.png",
      tileLayerOptions: {
        opacity: 1,
        detectRetina: true,
        reuseTiles: true,
      scrollWheelZoom: true
1 Like