TileWMS' not showing after upgrading OpenLayers from 4.6.5 to 5.3.0

Question

I had an OpenLayers 4.6.5 application, which showed a map, and on top of that had the option to turn on and off some overlays.

The overlays are of the type TileWMS, and seemed to work perfectly.

At first i got called OpenLayers remotely like this:

<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

But i need to store do it locally instead, and at the same time upgrade to 5.3.0. So i downloaded the v5.3.0-dist.zip, added the files and replaces the above with:

<script src="./lib/ol/ol.js"></script>

Everything seems to work as before, except for the TileWMS, which simply isn't showing.

As far as i can tell there is nothing, in the upgrade notes, indicating that something should have changed.

I have tried excluding unnecessary parts of my JavaScript, so let me know if i left out too much:

var token = "123456thisisnotmytoken";

var myProjection = new ol.proj.Projection({
    code: projCode,
    units: "m",
    extent: [120000, 5661139.2, 1378291.2, 6500000]
});

var projection = GetProjection(myProjection);
var projectionExtent = projection.getExtent();

const map = new Map({
    target: "map",
    layers: [
        new Group({
            "title": "Base maps",
            layers: [
                new ol.layer.Tile({...
                }),
                new ol.layer.Tile({...
                })
            ]
        }),
        new Group({
            "title": "Overlays",
            layers: [
                new ol.layer.Tile({
                    title: "Matrikel",
                    type: "overlay",
                    visible: true,
                    opacity: 1.0,
                    zIndex: 1000,
                    source: new ol.source.TileWMS({
                        url: "https://services.kortforsyningen.dk/mat?token=" + token,
                        params: {
                            "LAYERS": "MatrikelSkel,Centroide",
                            "VERSION": "1.1.1",
                            "TRANSPARENT": "true",
                            "FORMAT": "image/png",
                            "STYLES": ""
                        },
                    })
                }),
                new ol.layer.Tile({
                    title: "Hillshade",
                    type: "overlay",
                    visible: false,
                    opacity: 1.0,
                    zIndex: 900,
                    source: new ol.source.TileWMS({
                        url: "https://services.kortforsyningen.dk/dhm?token=" + token,
                        params: {
                            "LAYERS": "dhm_terraen_skyggekort_transparent_overdrevet",
                            "VERSION": "1.1.1",
                            "TRANSPARENT": "true",
                            "FORMAT": "image/png",
                            "STYLES": ""
                        },
                    })
                })
            ]
        }),
    ],
    view: view
});

map.addControl(new ol.control.LayerSwitcher());

I get that the second TileWMS is hidden as default, but i have tried turning it on and off in the LayerSwitcher, which worked before the upgrade.

Any suggestions pn how i fix this?

Answer 1

The problem was the projection in my View!

I changed it from

GetProjection("EPSG:25832")

to

myProjection

So now it looks like this:

var view = new ol.View({
  center: [606985, 6231744], // EPSG:25832
  zoom: 2,
  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],
  projection: myProjection,
  minZoom: 2,
})

myProjection looks like this:

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