0

I am currently following the book GeoServer beginners guide (ISBN: 978-1-78829-737-0). I am on chapter 8 and have been using the following code sample from the book:

<!DOCTYPE html>
<html>
  <head>
    <title>WMTS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
    <style type="text/css">
      html { height: 100% }
      body { 
        height: 100%; 
        margin: 20px; 
        }
      .map {
        border: 1px solid black;
        width: 800px;
        height: 550px;
        }  
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var projection = ol.proj.get('EPSG:4326');
      var projectionExtent = projection.getExtent();
      var matrixIds = new Array(22);
      for (var z = 0; z < 22; ++z) {
        matrixIds[z] = "EPSG:4326:" + z;
      }
      var resolutions = [
            0.703125, 0.3515625, 0.17578125, 0.087890625,
            0.0439453125, 0.02197265625, 0.010986328125,
            0.0054931640625, 0.00274658203125, 0.001373291015625,
            6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4,
            8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5,
              1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6,
            1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7
      ];

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            opacity: 0.7,
            source: new ol.source.WMTS({
              url: 'http://localhost:8080/geoserver/gwc/service/wmts',
              layer: 'Packt:NaturalEarthCountries',
              matrixSet: 'EPSG:4326',
              format: 'image/png',
              projection: projection,
              tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
              })
            })
          })
        ],
        target: 'map',
        view: new ol.View({
          projection: projection,
          center: [10, 40],
          zoom: 4
        })
      });
    </script>
  </body>
</html> 

When checking the tile layers in geoserver I am able to preview them, however when viewing the output of this code in a web browser, I just get a blank screen. Other resources suggest putting the name of my workspace (packt) in the url:

so it would be:

url: 'http://localhost:8080/geoserver/gwc/Packt/service/wmts',

however this does not work either. what should the URL be or is the problem somewhere else?

  • are you sure that Packt has a capital P? workspace names are case sensitive. Does the log file show anything? – Ian Turton Apr 12 at 9:08
  • Sorry Ian, I didn't see your comment. Packt is with a capital P. My log is showing geoserver fell back to embedded data at some point this morning. But the computrer has been reset since, with no more logs. – Boots Apr 12 at 12:46
  • I checked example code at GitHub: github.com/PacktPublishing/…. Code is exact copy from example, so it should work (or not, one never knows with this examples). – TomazicM Apr 12 at 12:57
  • ok. I'l keep checking and see if I can see what I did wrong. – Boots Apr 12 at 13:21
1

What is wrong are references to Open Layers libraries which do not exist any more.

This should work (see https://openlayers.org/en/latest/doc/quickstart.html):

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  • 1
    If older versions are needed for backward compatibility they are still available via cdnjs.com/libraries/openlayers – Mike Apr 12 at 9:13
  • I've changed to the latest libraries, I have also downloaded openlayers 5 and pulled the stylesheet and javascript files from that. I'm still getting the same results even though it works with none wmts files. – Boots Apr 12 at 11:03
  • I tried your code with OSM source and it works. There must be something wrong with you WMTS source definition. What about trying suggestion from Ian Turton? – TomazicM Apr 12 at 12:05
  • my Bad, I didn't see that suggestion. My logfile shows it fell back to embedded data about 10:30. But the computer has been restarted since then with no other logs. – Boots Apr 12 at 12:41
  • 2019-04-12 10:38:53,513 INFO [geoserver.platform] - Falling back to embedded data directory: /opt/apache-tomcat-8.5.39/webapps/geoserver/data 2 2019-04-12 10:38:53,609 INFO [geoserver.platform] - Falling back to embedded data directory: /opt/apache-tomcat-8.5.39/webapps/geoserver/data 3 2019-04-12 10:38:59,904 INFO [org.geoserver] - GeoServer configuration lock is enabled 4 2019-04-12 10:39:02,074 INFO [org.geoserver] - Loaded style 'poi' 5 2019-04-12 10:39:02,075 INFO [org.geoserver] - Loaded style 'simple_roads' – Boots Apr 12 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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