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?
