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?

Which layer switcher are you using? OpenLayers doesn't include a layer switcher and any third party control may not be compatible with the new version of OpenLayers or may need to be updated to a newer version. — Mike, Aug 13 '19 at 09:25
@Mike i'm using [ol-layerswitcher](https://github.com/walkermatt/ol-layerswitcher/tree/master/examples), which seems to handle my base-layers/maps just fine, and it also shows the option to enable or disable my overlays. But you might be right, and i'm just lucky that it's still working with the base-layers. — Anders Jensen, Aug 13 '19 at 10:49

score 0 · Accepted Answer · answered Aug 14 '19 at 12:26

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]
});

TileWMS' not showing after upgrading OpenLayers from 4.6.5 to 5.3.0

1 Answers1