[GIS] OpenLayers 4 not connecting to GeoServer WMS

geoserveropenlayerswms

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).

Best Answer

My solution is based onGeoserver 2.12.1 using openlayers 4.6.4

 var wmsPorts =
                      new ol.layer.Image({
                              source: new ol.source.ImageWMS({
                              url: 'http://localhost:8080/geoserver/wms',
                              params: {'LAYERS': 'ancient_ports' ,
                                       'TRANSPARENT':true,
                                        ratio:1
                                      },
                              serverType: 'geoserver'
                      })
              }) ;

This access a wms layer called ancient ports

Related Question