WMTS and WMTSTileGrid causing "Cannot read property 'every' of undefined"

Question

What i'm basically doing is trying to get a Map in Open Layers, which have a view limited to Denmark. I want to do it using EPSG:25832, because i need some overlays from a specific service, which is using this projection.

I'm trying to create a WMTSTileGrid, and parse it to a TileLayer, through a WMTS, in which i'm calling a service to get my layer. I'm using ol@5.3.2.

I'm getting the following error, and i need help figuring out what is causing it:

Uncaught TypeError: Cannot read property 'every' of undefined
    at isSorted (array.js:242)
    at WMTSTileGrid.TileGrid (TileGrid.js:70)
    at new WMTSTileGrid (WMTS.js:58)
    at Object.parcelRequire.index.js.ol/ol.css (index.js:83)
    at newRequire (mao.e31bb0bc.js:47)
    at mao.e31bb0bc.js:81
    at mao.e31bb0bc.js:120

Heres is the code, i have tried posting the minimum possible amount for easier readability, let me know if you think something is missing:

import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import WMTS from 'ol/tilegrid/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import Group from 'ol/layer/Group.js';
import TileWMS from 'ol/source/TileWMS';
import proj4 from 'proj4/dist/proj4';
import { get as getProjection } from 'ol/proj';
import Projection from 'ol/proj/Projection.js';
import { getTopLeft } from 'ol/extent.js';
import { register } from 'ol/proj/proj4.js'; // ADDED THIS

var myServiceToken = '12345678';

// defining custom projection, because i want to use EPSG:25832 due to the service i'm calling
var projCode = 'EPSG:25832';
proj4.defs(projCode, "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs");
register(proj4); // ADDED THIS

var myProjection = new Projection({
    code: 'EPSG:25832',
    units: 'm',
    extent: [120000, 5661139.2, 1378291.2, 6500000]
});

var projection = getProjection(myProjection);
var projectionExtent = projection.getExtent();
var myTileGrid = new WMTSTileGrid({
    origin: getTopLeft(projectionExtent),
    extent: [120000, 5661139.2, 1378291.2, 6500000],
    resolutions: [1638.4, 819.2, 409.6, 204.8, 102.4, 51.2, 25.6, 12.8, 6.4, 3.2, 1.6, 0.8, 0.4, 0.2],
    matrixIds: ['L00', 'L01', 'L02', 'L03', 'L04', 'L05', 'L06', 'L07', 'L08', 'L09', 'L10', 'L11', 'L12', 'L13'],
});


const map = new Map({
    target: 'map',
    layers: [
        new Group({
            'title': 'Base maps',
            layers: [
                new TileLayer({
                    opacity: 1.0,
                    title: 'Base',
                    type: 'base',
                    visible: true, // by default this layer is visible
                    source: new WMTS({
                        url: "https://services.someService.com/some_map?token=" + myServiceToken,
                        layer: "some_map",
                        matrixSet: "View1",
                        format: "image/jpeg",
                        projection: getProjection('EPSG:25832'), // ADDED THIS
                        tileGrid: myTileGrid,
                        style: 'default',
                        size: [256, 256]
                    })
                })
            ]
        })
    ],
    view: view
});```

Your `proj4.defs()` call needs be followed by `register(proj4);` and the projection must be included in the `WMTS()` source options (unless it is EPSG:3857) — Mike, Jun 11 '19 at 09:42
@Mike I added the register and the projection, but it didn't seem to make any difference (see updated code). But it makes sense why it would need to add it. Thanks for your input. — Anders Jensen, Jun 11 '19 at 09:57
Try replacing `size: [256, 256]` in the source with `tileSize: [256, 256]` in the tile grid. — Mike, Jun 11 '19 at 10:18

score 3 · Accepted Answer · edited Jun 11 '19 at 12:13

3

You made a mistake in your imports:

import WMTS from 'ol/tilegrid/WMTS';

Should be:

import WMTS from 'ol/source/WMTS';

edited Jun 11 '19 at 12:13

SuperStar518

2,814
2
20
35

answered Jun 11 '19 at 12:04

transporter_room_3

2,583
4
33
51

WMTS and WMTSTileGrid causing "Cannot read property 'every' of undefined"

1 Answers1