0

I'm new to web mapping and am having some trouble getting my OpenLayers3 maps to display layers from Geoserver. The code below is an attempt to create a simple map from one of the Geoserver default layers, topp:tasmania_roads

I've copied parts of code from the layer preview-page source text, such as the URL's and the ol.css/ol.js links, so they should work in theory. I then used a simple ol.source.ImageWMS example from a training manual. Still can't get it to work, there is only the map frame with no objects inside. I could just use the layer preview code for a map but I'd rather learn how to create a basic one first, the preview code is quite extensive.

There are no errors in the develope console logs, if I enter localhost:8080/geoserver/topp/wms?request=getcapabilities into the browser there is a lot of XML text, and if I open the Geoserver log there is no record of the map being opened. I'm also using the native EPGS of the layer (4326). Here's the code:

<!doctype html>
<head>
 <title> tas </title>
     <link rel="stylesheet" href="http://localhost:8082/geoserver/openlayers3/ol.css" type="text/css" /> 
     <style>
             #map {
            clear: both;
            position: relative;
            width: 100%;
            height: 500px;
            border: 2px solid black;
        }
        </style>
</head>
<body>
<div id="map" class="map"></div>

<script src="http://localhost:8082/geoserver/openlayers3/ol.js"></script>

<script>

    var roads = new ol.layer.Image({
    source: new ol.source.ImageWMS({
                ratio: 1,
                url: 'http://localhost:8082/geoserver/topp/wms',
                params: {
                LAYERS: 'topp:tasmania_roads',
                    }           
                })
            });

 var tas = ol.proj.transform([146.78,-42.72],'EPSG:4326','EPSG:3857');

 var view = new ol.View({
 center: tas,
 zoom: 14
 });
 var map = new ol.Map({
 target: 'map'
 });
 map.addLayer(roads);
 map.setView(view);
 </script>
 </body>
</html>

Also as a side question, why does OpenLayers use EPSG 3857, can't it just read the native SRS?

Here is the relevant portion of the javascript code from the Geoserver's tasmania_roads layer preview:

      var untiled = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://localhost:8082/geoserver/topp/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'topp:tasmania_roads',
          }
        })
      });
      var tiled = new ol.layer.Tile({
        visible: false,
        source: new ol.source.TileWMS({
          url: 'http://localhost:8082/geoserver/topp/wms',
          params: {'FORMAT': format, 
                   'VERSION': '1.1.1',
                   tiled: true,
                STYLES: '',
                LAYERS: 'topp:tasmania_roads',
             tilesOrigin: 145.19754 + "," + -43.423512
          }
        })
      });
      var projection = new ol.proj.Projection({
          code: 'EPSG:4326',
          units: 'degrees',
          axisOrientation: 'neu',
          global: true
      });
      var map = new ol.Map({
        controls: ol.control.defaults({
          attribution: false
        }).extend([mousePositionControl]),
        target: 'map',
        layers: [
          untiled,
          tiled
        ],
        view: new ol.View({
           projection: projection
        })
      });
      map.getView().on('change:resolution', function(evt) {
        var resolution = evt.target.get('resolution');
        var units = map.getView().getProjection().getUnits();
        var dpi = 25.4 / 0.28;
        var mpu = ol.proj.METERS_PER_UNIT[units];
        var scale = resolution * mpu * 39.37 * dpi;
        if (scale >= 9500 && scale <= 950000) {
          scale = Math.round(scale / 1000) + "K";
        } else if (scale >= 950000) {
          scale = Math.round(scale / 1000000) + "M";
        } else {
          scale = Math.round(scale);
        }
        document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
      });
      map.getView().fit(bounds, map.getSize());
      map.on('singleclick', function(evt) {
        document.getElementById('nodelist').innerHTML = "Loading... please wait...";
        var view = map.getView();
        var viewResolution = view.getResolution();
        var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
        var url = source.getGetFeatureInfoUrl(
          evt.coordinate, viewResolution, view.getProjection(),
          {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
        if (url) {
          document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
        }
      });
  • Can you post the code from the Geoserver's Openlayers preview for this layer? – Son of a Beach Apr 6 '17 at 6:14
  • just posted it in the question – Bill Apr 6 '17 at 6:25
  • It may be worth copying/pasting the relevant part of that (ie, the javascript parts). If that works, then bit-by-bit, remove unnecessary pieces, until you have a more minimal code base that still works (test it after each bit you remove). Then start changing pieces if there is anything you want different, and again test each step of the way to find out which change breaks it. – Son of a Beach Apr 6 '17 at 6:28
  • 1
    Your code works fine for me, once I zoom out layer is visible, change the zoom level to 5 and check. – S. Thiyaku Apr 6 '17 at 13:49
  • 1
    Thanks, entering the EPSG (see below) then zooming out worked, it was a little thing I missed. Cheers – Bill Apr 7 '17 at 3:19
1

Is your layer in EPSG:4326 ? (Just guessing, based on your comment and one of your lines of code). If so then you would need to define that within the layer source, otherwise Openlayers assumes the default of EPSG:3857:

var roads = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        projection: 'EPSG:4326',
        ratio: 1,
        url: 'http://localhost:8082/geoserver/topp/wms',
        params: {
            LAYERS: 'topp:tasmania_roads',
        }           
    })
});

That should be enough for Openlayers to convert it to EPSG:3857 on-the-fly. However, if you want, you can also make the entire map in EPSG:4326 by specifying that in the map's view:

var view = new ol.View({
    projection: 'EPSG:4326',
    center: [146.78,-42.72],
    zoom: 14
});

(And obviously, if you do this second part, you can delete the var tas = ... line, or change it to the hard coded value, rather than the projection function.)

Note that Openlayers knows only a very small number of projections by EPSG aliases. For others, you would first have to define them using proj4.

  • Thanks, yes the layer is in 4326. I entered your code edits in and still no luck. I'm thinking it might be the way Geoserver is configured as its not even popping up in the logs, its blank. This layer is a default layer included with Geoserver too so I don't think its the layer. Do you need to configure proxy settings or something like that to view the layers? – Bill Apr 6 '17 at 6:12

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.