Whenever I try to load a map using Ionic, it keeps displaying broken tiles.
No matter if I load directly from Leaflet or use bower, the issue persists. Even when using pure leaflet code without any special directives, those broken tiles are still there.
I have made sure to include all the necessary libraries in index.html:
<!-- Extra libraries -->
<script src="js/lib/leaflet/leaflet.css"></script>
<script src="js/lib/leaflet/leaflet.js"></script>
<script src="js/lib/leaflet/angular-leaflet-directive.min.js"></script>
In my map.html file, this is how I have structured the code:
<ion-view view-title="Map">
<ion-content scroll="false">
<leaflet id="map" center="map.center" defaults="map.defaults"></leaflet>
</ion-content>
</ion-view>
Here is the relevant section of my controllers.js file where I define the MapController:
var app = angular.module('controllers', ['leaflet-directive']);
app.controller('MapController', function($scope) {
$scope.map = {
defaults: {
tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
maxZoom: 18,
zoomControlPosition: 'bottomleft'
},
center: {
lat: 51.505,
lng: -0.09,
zoom: 4
}
};
});