2

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

Improve this question
5
  • There's nothing recorded in the logs. And you're right, its ol4, I didn't even realise there was a 4!
    – Bill
    Apr 4, 2017 at 5:31
  • I have Geoserver 2.10.1. In the layer preview URL its localhost:8080/geoserver/basic/wms (plus all the other text after the ?).... I did just notice in the page source code, its pointing to localhost:8080/geoserver/openlayers3/ol.css and ...ol.js, would it be because my code is trying to use the openlayers4 css and js libraries?
    – Bill
    Apr 4, 2017 at 5:42
  • Openlayers 4 code should be identical to Openlayers 3 in 99.9% of cases.
    – Son of a Beach
    Apr 4, 2017 at 5:42
  • Do you get a long scree of XML if you load up localhost:8080/geoserver/basic/wms?request=getcapabilities (on the localhost)?
    – Son of a Beach
    Apr 4, 2017 at 5:44
  • There is a long screen of xml, and this error is highlighted in the developer console: source: new ol.source.TileWMS({
    – Bill
    Apr 4, 2017 at 5:50

3 Answers 3

Reset to default
1

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

Improve this answer
0

I had the same issue. I'm working with geoserver 2.11.1 and I had to use ows at the end instead of wms. In your case the url should look like this:

url: 'http://localhost:8080/geoserver/basic/ows'

Further I also don't use the extent.

Improve this answer
-1

Just remove this section and your code will work perfectly. I had the same problem as u before.

Remove :

extent: [429899.9375,6535534.0,509027.46875,6626038.5]
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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