CODEWITHSUNDEEP
javascriptopenlayers-3tiles
amitdar
amitdar

Reputation: 927

Map not loaded using openlayers 3 on firefox and ie/edge

I'm using openlayers 3 and have a tiled image (not a geographical map) and it's working great in chrome, but not in firefox or ie/edge. I keep getting the following error:

IndexSizeError: Index or size is negative or greater than the allowed amount

I think this may have something to do with the projection or the fact that I'm not using lan/lat coordinates.

Here is a simple example (also available at jsbin)

<!DOCTYPE html>
<html>
  <head>
    <title>XYZ</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map" style="width: 500px; height: 500px; border: 1px solid #000;"></div>
    <script>
	
		var map = new ol.Map({
		  target: 'map',
		  layers: [
			new ol.layer.Tile({
			  source: new ol.source.XYZ({
				url: 'http://shimz.me/example/leaflet/image/mother_map/TileGroup0/{z}-{x}-{y}.jpg',
				wrapX: false
			  })
			})
		  ],
		  view: new ol.View({
			center: [0,0],
			zoom: 1
		  })
		});

    </script>
  </body>
</html>

Any idea how to fix that ?

Upvotes: 0

Views: 1117

Answers (1)

amitdar
amitdar

Reputation: 927

So... after a long long research the problem was that the tiles size wasn't equal, on the edges instead of 256x256 sometimes it was 256xsometing-smaller-then-256

After squaring all tiles to 256x256 it works great!

Upvotes: 1

Related Questions