CODEWITHSUNDEEP
iosangularjscordovaleaflet
Squrler
Squrler

Reputation: 3514

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

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:

  1. Explicitly add the http:// protocol to the img src?
  2. Set Cordova to default to http:// with URI's that start with //?

GitHub issue: https://github.com/tombatossals/angular-leaflet-directive/issues/460

Upvotes: 4

Views: 2284

Answers (2)

Squrler
Squrler

Reputation: 3514

This issue seems to be fixed in the current version of the Angular Leaflet Directive.

I am currently using this code in my controller and it works in the browser as well as on device:

  angular.extend($scope, {
    center: {
      lat: 52.367215,
      lng: 4.893036,
      zoom: 1
    },
    maxbounds: {},
    defaults: {
      maxZoom: 16,
      minZoom: 12,
      tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
      tileLayerOptions: {
          opacity: 0.9,
          detectRetina: true,
          reuseTiles: true,
      },
      scrollWheelZoom: true
    }
  })

Upvotes: 1

Mackenzie Browne
Mackenzie Browne

Reputation: 453

I don't know the exact cause of the problem, but it seems to be an issue with the latest version of the leaflet-directive.

As a current work-around until the issue is fixed, use angular-leaflet v0.7.7 instead of the latest.

If you use bower, change the bower.json line to

"angular-leaflet": "0.7.7"

make sure it's not '~0.7.7'

Hope this helps!

Upvotes: 2

Related Questions