0

I am having an issue where I am trying to load a WMTS feed using Openlayers and seem not to be getting good results. For ArcGis services this seems to go through but not GeoServer's WMTS services. The code is as shown below. I keep getting a javascript error 

TypeError: Argument 2 of CanvasRenderingContext2D.putImageData is not a finite floating-point value.

The code I am using is shown below. Regardless of changing the projection the error remains the same. Please advise. Raw Gist here

<!DOCTYPE html>
<html>
<head>
<title>WMTS example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">   </script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var projection = ol.proj.get('EPSG:4326');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(21);

var matrixIds = new Array(21);
for (var i=0; i<21; ++i) {
    matrixIds[i] = "EPSG:4326:" + i;
}

var attribution = new ol.Attribution({
html: 'Tiles &copy; <a href="http://services.arcgisonline.com/arcgis/rest/' +
  'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
  source: new ol.source.OSM(),
  opacity: 0.7
}),
new ol.layer.Tile({
  opacity: 0.7,
  source: new ol.source.WMTS({
    attributions: [attribution],
    url: 'http://suite.opengeo.org/geoserver/gwc/service/wmts',
    layer: 'opengeo:countries',
    matrixSet: 'ESPG:4326',
    format: 'image/png',
    style : 'default',
    projection: projection,
    tileGrid: new ol.tilegrid.WMTS({
      origin: ol.extent.getTopLeft(projectionExtent),
      resolutions: resolutions,
      matrixIds: matrixIds
    }),
    wrapX: true
  })
})
  ],
  target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  collapsible: false
})
 }),
  view: new ol.View({
  center: [-13677832, 5213272],
  //center: [-11158582, 4813697],
  zoom: 1
  })
});

</script>
</body>
</html>
Jude Mwenda
  • 5
  • 3

2 Answers2

1

Your resolutions array is just filled with undefineds, right? You should fill it with you desired resolutions.

Alvin Lindstam
  • 3,094
  • 16
  • 28
0

You should to init your resolution array like this:

for (var z = 0; z < 21; ++z) {
            resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = "EPSG:4326:" + z;;
        }

Did you set map's projection to ol.proj.get('EPSG:4326')?

var view = new ol.View({
                center: [0, 0],
                zoom: 1,
                projection: ol.proj.get('EPSG:4326')
            });
Dima S.
  • 56
  • 2