Just started learning OpenLayers 4 and I'm trying to display a simple WMS layer from GeoServer as a web map. I'm not having any luck. If I use a request for OpenStreetMap layers (ie. ol.source.TileWMS) it works, but using ol.source.TileWMS to connect to my GeoServer layers doesn't seem to work. Teh web page is blank and there's not even a box or zoom function. I'm not sure if its my code or if I need to configure GeoServer somehow. Its on a local host, same machine.
The layer properties are:
workspace: basic, layer:roads, EPGS:28356, GeoServer URI for the workspace (not sure if this matters):http://localhost:8080/geoserver/basic
The code is:
<!DOCTYPE html>
<html>
<head>
<title>roads</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var layers = [
new ol.layer.Tile({
extent: [429899.9375,6535534.0,509027.46875,6626038.5]
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/basic/wms',
params: {'LAYERS': 'basic:roads', 'TILED': true},
serverType: 'geoserver'
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [484200,6559400],
zoom: 15
})
});
</script>
</body>
</html>
</html>
Some more information; the layer preview URL shows http://localhost:8080/geoserver/basic/wms?.....: when http://localhost:8080/geoserver/basic/wms?request=GetCapabilities is entered there is a long screen of XML: and when the developer console is used to check for JavaScript errors, the line source: new ol.source.TileWMS({
is highlighted. If I delete the extents line out of the code, that error is gone (but the map still doesn't work).