openlayer 3 with geoserver

Question

I am trying my first application with openlayers3 and geoserver. The code in the bottom of this message is not working. I know that geoserver is working properly because when I run the following link I can see the image represented by Img_Sample in it.

So what's wrong with the openlayers code?

Any help will be very much appreciated.

thanks

JJ

Link http://localhost:8081/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=Img_Sample&styles=&bbox=-130.85168,20.7052,-62.0054,54.1141&width=768&height=372&srs=EPSG:4326&format=application/openlayers

code

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "localhost:8081/geoserver/wms", {layers: 'Img_Sample'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
      </script>

</body>

Your code uses OpenLayers 2.13, not 3.X. Sure you included the right file? — Alvin Lindstam
Also, your localhost link won't work for anybody here, just you. — user4773894
Thank you guys. I figured out the problem. Very simple. I was missing the http:/ . Once I added it worked smoothly. — user91542

Anand Govind Anand Govind · Accepted Answer · 2018-05-29T07:34:00

Unlike openlayers2 ,openlayers3.x and above has 'ol' as top level namespace. Openlayers syntax has been changed from 3.x and above. Following is the documentation url for latest openlayers http://openlayers.org/en/latest/doc/tutorials/

openlayer 3 with geoserver

1 Answers