1

I am new to web mapping and web in general.

I'm trying to add the default WMTS Italy mosaic that can be found in Geoserver (nurc:mosaic) to my map.

I think there is a way to do it by providing get capabilities wmts link, not xml, not Rest.. (This one is with xml and works for me : http://openlayers.org/en/latest/examples/wmts-layer-from-capabilities.html)

(This one is with Rest which I don't want to implement : http://openlayers.org/en/latest/examples/wmts.html)

I get the wmts link simply right clicking on Geoserver's main page WMTS 1.0.0 and copy the link location. Here it is: http://localhost:8081/geoserver/gwc/service/wmts?REQUEST=GetCapabilities

And here is my naive code:

<!DOCTYPE html>
<html>
<head>
    <title>WMTS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var projection = ol.proj.get('EPSG:4326');
    var projectionExtent = projection.getExtent();
    var size = ol.extent.getWidth(projectionExtent) / 256;
    var resolutions = new Array(14);
    var matrixIds = new Array(14);
    for (var z = 0; z < 14; ++z) {
        // generate resolutions and matrixIds arrays for this WMTS
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }

    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({
                    url: 'http://localhost:8081/geoserver/gwc/service/wmts?REQUEST=GetCapabilities',
                    layer: 'nurc:mosaic',
                    matrixSet: 'EPSG:4326',
                    format: 'image/png',
                    projection: projection,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: ol.extent.getTopLeft(projectionExtent),
                        resolutions: resolutions,
                        matrixIds: matrixIds
                    }),
                    style: '',
                    wrapX: true
                })
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: ol.proj.fromLonLat([27, 35]),
            zoom: 5
        })
    });
</script>
</body>
</html>

I get this message from Fiddler:

<ExceptionReport version="1.1.0"
xsi:schemaLocation="http://www.opengis.net/ows/1.1
http://geowebcache.org/schema/ows/1.1.0/owsExceptionReport.xsd"><Exception
exceptionCode="InvalidParameterValue"
locator="TILEMATRIX"><ExceptionText>Unknown TILEMATRIX
10</ExceptionText></Exception></ExceptionReport>

I tried to add 'EPSG: ' to my matrixIds [z] value, (Saw it on : wmts layer in Openlayers from Geoserver) it didn't work.

I tried to change matrix Id's new Array values up to 21, didn't work.

In my humble understanding GeoServer goes into the columns rows that don't exist for some reason. For example say I have columns ranging from 70 to 80 and rows ranging from 100 to 110, when I provide wmts get capabilities link and run the code when I check from the Fiddler, link goes to tilecolumn: 250 and tilerow 300something etc. These files don't exist so there is a mismatch.

What should I learn to get over these kind of issues ?

Improve this question

1 Answer 1

Reset to default
4

There are two reasons why my code wasn't working.

  1. My source(Italy mosaic) is in EPSG:4326 and the default OpenLayers projection is EPSG:900913 (or as known as EPSG:3857). Because of this mismatch either I had to get the Italy mosaic (my source) in EPSG:900913 or get it in EPSG:4326 but reproject it to EPSG:900913 to be able to see it on the screen. For now, I solved the problem by getting the Italy mosaic in EPSG:900913.
  2. I had to add 'EPSG:900913: ' to my matrixIds[z] = z; value. Without this addition, the link goes to tile columns and rows that don't exist; here is how the request is seen from Fiddler :

http://localhost:8081/geoserver/gwc/service/wmts?layer=nurc%3Amosaic&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=9&TileCol=280&TileRow=193

and on the browser [matrixId[z] without addition of 'EPSG 900913: '1

And here how the code is seen when we write matrixIds[z] ='EPSG:900913:' + z; instead matrixIds[z] = z;

http://localhost:8081/geoserver/gwc/service/wmts?layer=nurc%3Amosaic&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG%3A900913%3A8&TileCol=141&TileRow=97

and on the browser with addition of 'EPSG 900913: '

So here is my code:

var projection = ol.proj.get('EPSG:900913');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(14);
var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
    // generate resolutions and matrixIds arrays for this WMTS
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] ='EPSG:900913:' + z;
}

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({
                url: 'http://localhost:8081/geoserver/gwc/service/wmts?',
                layer: 'nurc:mosaic',
                matrixSet: 'EPSG:900913',
                format: 'image/png',
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                style: '',
                wrapX: true
            })
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: {
            collapsible: false
        }
    }),
    view: new ol.View({
        center: ol.proj.fromLonLat([27, 35]),
        zoom: 5
    })
});
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.