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

**URL:** <https://forum.ionicframework.com/t/angular-leaflet-in-cordova-wrapper-doesnt-load-tiles-due-to-protocol-mismatch/9158>\
**Category:** ionic-v1\
**Created:** [September 4, 2014, 12:51pm UTC](https://forum.ionicframework.com/t/angular-leaflet-in-cordova-wrapper-doesnt-load-tiles-due-to-protocol-mismatch/9158 "2014-09-04T12:51:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [September 4, 2014, 12:51pm UTC](https://forum.ionicframework.com/t/angular-leaflet-in-cordova-wrapper-doesnt-load-tiles-due-to-protocol-mismatch/9158/1 "2014-09-04T12:51:57Z")

</div>

I’ve just started using the Angular Leaflet directive ([http://tombatossals.github.io/angular-leaflet-directive/#!/)](http://tombatossals.github.io/angular-leaflet-directive/#!/%29) 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="//b.tile.openstreetmap.org/18/131008/87171.png" 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: [https://github.com/tombatossals/angular-leaflet-directive/issues/460](https://github.com/tombatossals/angular-leaflet-directive/issues/460)

---

<div class="post-metadata">

**Author:** ![skitterm](https://avatars.discourse-cdn.com/v4/letter/s/6a8cbe/32.png) [@skitterm](https://forum.ionicframework.com/u/skitterm)\
**Post date:** [September 18, 2014, 7:25pm UTC](https://forum.ionicframework.com/t/angular-leaflet-in-cordova-wrapper-doesnt-load-tiles-due-to-protocol-mismatch/9158/2 "2014-09-18T19:25:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [September 30, 2014, 10:05am UTC](https://forum.ionicframework.com/t/angular-leaflet-in-cordova-wrapper-doesnt-load-tiles-due-to-protocol-mismatch/9158/3 "2014-09-30T10:05:33Z")

</div>

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

Example:

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