I have an Ionic project using the Angular Leaflet Directive (0.10.1) to display a map. When I run this in the browser with ionic serve everything comes up roses and I can see my map and markers, however when I run the project in the iOS simulator with ionic run, the map tiles are not displayed.
Inspecting the webview in Safari shows that it’s attempting to load the map tiles from file://a.tile.openstreetmap.org/ (ie file://a.tile.openstreetmap.org/10/568/389.png) whereas the browser is correctly trying to load them using the http protocol (ie http://a.tile.openstreetmap.org/10/568/389.png).
Searching this issue came up with a post SO (http://stackoverflow.com/questions/25665295/angular-leaflet-in-cordova-wrapper-doesnt-load-tiles-due-to-protocol-mismatch). The suggested solution was to use v0.7.7. I downgraded to to 0.7.7 and sure enough, the tiles are shown. My markers however, are not, but there are no console errors.
My directive looks like so:
<ion-view view-title="Harbour Map"> <ion-content> <leaflet markers="harbours" height="100%" width="100%" center="center"></leaflet> </ion-content> </ion-view>
With my ‘harbours’ data like so:
[
{
"id":3,
"name":"Kassiopi",
"lat":39.790814,
"lng":19.922869
},
{
"id":4,
"name":"Imerola Bay",
"lat":39.789155,
"lng":19.916518
},
...
]
I’d ideally like to use the most up to date version of the directive but this is not essential.
Has anyone encountered and solved this?