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

ionic-v1
1

I’ve just started using the Angular Leaflet directive (http://tombatossals.github.io/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="//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

2

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

3

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
    }
  })
1 Like