0

I am currently following a tutorial book that is a bit outdated, therefore I have looked at the openlayers website: https://openlayers.org/en/latest/examples/wms-tiled.html to find how to make a tiled WMS map.

I have had a problem with the imports that was already answered in another question on gis.stackexchange: Unexpected token Identifier error - Import OpenLayers

I am looking to reproduce the behaviour on the website. However no matter what I do now I just get a blank screen. Even if I use the copy from website function and paste that into my own example.

I am afraid I still do not know enough about OpenLayers and mapping in general to fix this on my own.

Improve this question
1
  • If you simply want to copy and paste a good starting point is the version 4 example openlayers.org/en/v4.6.5/examples/wms-tiled.html which uses full build syntax. To use version 5 simply change both occurrences of openlayers.org/en/v4.6.5 to cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0 In a few of the examples there are some extra steps needed for version 5 such as registering proj4.
    – Mike
    Commented Mar 7, 2019 at 16:16

1 Answer 1

Reset to default
1

You need a little practice converting ol5 examples to old form. Here is how WMS example should look like (tested):

<!DOCTYPE html>
<html>
  <head>
    <title>Tiled WMS</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.TileWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            params: {'LAYERS': 'topp:states', 'TILED': true},
            serverType: 'geoserver',
            // Countries have transparency, so do not fade tiles:
            transition: 0
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>
  </body>
</html>
Improve this answer

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