I'm locked with an issue that is very odd. I'm using leaflet with angular-leaflet-directive. On the previous app, everything worked.
Now on a new app, I'd like to implement a new leaflet map. I have therefore copied my previous code.
My Issue is that, the leaflet map opens, my markers are created, but
TILES are not loaded
(I do have internet & internet rights for my app) Every tile that tries to be loaded failed and gets the following issue :
GET http://a.tile.openstreetmap.org/18/98891/132985.png 404 (Not Found)
As you can see, if direct access to the tile, you can see it on browser.
Header of each Tile GET request
GENERAL
Request URL:http://a.tile.openstreetmap.org/18/98892/132984.png
Request Method:GET
**Status Code:404 Not Found (from cache)**
RESPONSE HEADERS
Client-Via:shouldInterceptRequest
REQUEST HEADERS
Provisional headers are shown
Accept:image/webp,*/*;q=0.8
User-Agent:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36
My feeling is that is it trying to load it from cache instead of directly loading it from the open provider I still can't get what is different between my 2 projects
My other working application has the following header for each tile:
GENERAL
Remote Address:192.163.219.40:80
Request URL:http://c.tile.openstreetmap.org/18/98818/132892.png
Request Method:GET
Status Code:200 OK
Response Headers
view source
Access-Control-Allow-Origin:*
Cache-Control:max-age=604800
Content-Length:3584
Content-Type:image/png
Date:Fri, 08 May 2015 13:57:36 GMT
ETag:"51fb8a7a0f719b211641dca08bf1d76b"
Expires:Fri, 15 May 2015 13:57:36 GMT
Server:Apache/2.4.7 (Ubuntu)
Via:1.1 nadder-02.openstreetmap.org:3128 (squid/2.7.STABLE9)
X-Cache:MISS from nadder-02.openstreetmap.org
X-Cache-Lookup:MISS from nadder-02.openstreetmap.org:3128
Request Headers
view source
Accept:image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:fr-FR,en-US;q=0.8
Connection:keep-alive
Host:c.tile.openstreetmap.org
User-Agent:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36
X-DevTools-Emulate-Network-Conditions-Client-Id:01BAB1E4-1122-4CEF-AC90-BDE2C1113EF4
X-Requested-With:com.myapp.myapp
AngularJS configuration
Cache is disabled.
$httpProvider.defaults.cache = false;
I also tried the following additive as HTTP TILE LOADING are get (not successful)
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get.Pragma = 'no-cache';
HTML Creation of leaflet directive
<div data-tap-disabled="true" style="height: 90%; {{iosPlatform ? 'top:10%; position:relative' : ''}}">
<leaflet id="map" defaults="defaults" center="center"
bounds="bounds" event-broadcast="events" markers="markers"
height="100%" width="100%" class="animation" layers="layers"></leaflet>
</div>
AngularJS Code
angular.extend($scope, {
center: {
lat: -2.6273,
lng: -44.1932,
zoom: 18
},
markers: {},
defaults: {
scrollWheelZoom: true
},
bounds: {
southWest: {
lat: -2.628074696286876,
lng: -44.19960723876953125,
},
northEast: {
lat: -2.629410211532874,
lng: -44.19617401123046874,
}
},
events: {
map: {
enable: ['popupopen'],
logic: 'emit'
}
},
tiles: {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
options: {
attribution: ''
}
},
layers: {
"baselayers": {
"osm": {
"name": "Cidade",
"url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
"type": "xyz",
"layerParams": {},
"layerOptions": {}
}
},
overlays: {
}
},
controls: {}
});
When I open my map, I do call the following function :
$scope.getMyMap = function() {
var d = $q.defer();
leafletData.getMap('map').then(function(map) {
$scope.map = map;
map.invalidateSize();
d.resolve(map);
}, function(err) {
d.reject(err);
});
return d.promise;
};