Need help resolving: GET file://b.tile.openstreetmap.org XXX net::ERR_FILE_NOT_FOUND

[Gregory Menvielle]

Hello everyone
I recently got introduced to leaflet and learning my way around.  

We are currently working on a cordova-based mobile app where using leafleft alonside angular (and the angular-leaflet-directive) works like a charm and we're looking forward to making it work with Esri as well.

We do have one annoying hurdle to clear first and it's linked to using the leaflet/cordova combo with some random devices (lenovo k900 for example)

Leaflet.js correctly renders the html:
<img class="leaflet-tile leaflet-tile-loaded" src="//b.tile.openstreetmap.org/13/4147/2817.png" style="height: 256px; width: 256px; left: -196px; top: 194px;">

All clean but the construct // on certain webviews of certain phones lead the device to check for the image on the device, which then creates an error:

file://b.tile.openstreetmap.org XXX  net::ERR_FILE_NOT_FOUND

If anyone has run into this before or knows all ins-and-outs of the code, could you point me to where in the leaflet.js I could change the code so that instead of rendering :

<img class="leaflet-tile leaflet-tile-loaded" src="//b.tile.openstreetmap.org/13/4147/2817.png" style="height: 256px; width: 256px; left: -196px; top: 194px;">

we get

<img class="leaflet-tile leaflet-tile-loaded" src="https://b.tile.openstreetmap.org/13/4147/2817.png" style="height: 256px; width: 256px; left: -196px; top: 194px;">

thank you!
Gregory

[Gregory Menvielle]

If others with the same issue end up on this thread.
in the .js do a search for tile.openstreetmap.org/{z}/{x}/{y}.png   and simply append the proper prefix you want to use. Problem solved.

[Marcio Cruz]

angular.extend($rootScope, {

    defaults: {

      tileLayer: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

    }

  });

Setting this in the controller solved for me. I also thing that it's possible to set the default on $leafletMapDefaults.