Skip to main content
3 of 3
I edited the title, minor editings, removed thanks
Kadir Şahbaz
  • 78k
  • 57
  • 257
  • 404

Calling WMS layer using OpenLayers

I am trying to call a WMS using OpenLayers. I have wrote the code but somehow I think I am missing something here.

My code is:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
    <title>OpenLayers WMS</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      var projection = new ol.proj.Projection({
        code: 'EPSG: 4326', 
        extent: [-179106.47, 3835054.33, 1457898.22, 4881225.40]
    });

    // wms
    //http://172.61.25.57:8080/geoserver/arcs_charts/wms?service=WMS&version=1.1.0&request=GetMap&layers=arcs_charts%3A1239-0&bbox=-4.0%2C58.28333333333333%2C0.1985833333333341%2C61.41675&width=768&height=573&srs=EPSG%3A4326&format=application/openlayers -->
    // source
    var layerSource = new ol.source.TileWMS({
        url: 'http://172.61.25.57:8080/geoserver/arcs_charts/wms?',
        params: {'VERSION': '1.1.0',
                'LAYERS': 'arcs_charts:1239-0', 
                'TILED': true,
                'bbox': [-4.0,58.28333333333333,0.1985833333333341,61.41675], // GeoServer bbox or extent in EPGS: 5255 - read from url in GeoServer WMS
                'CRS': 'EPSG:4326',
                'HEIGHT': 573,
                'width':768,
                'FORMAT': 'application/openlayers'},
        serverType: 'geoserver',
    });


    // layer
    var layerLayer = new ol.layer.Tile({
        layer:'nameOfLayer',
        visible: false,
        preload: Infinity,
        source: layerSource 
    });

    // view
    var olview = new ol.View({
        projection: projection,
        center: ol.proj.fromLonLat([37.41, 8.82]),
        extent: projection.getExtent(),
        zoom: 1.5
    })

    // map
    var map = new ol.Map({
        target: 'map',
        renderer: 'canvas', // Force the renderer to be used
        view: olview,
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        layers: [layerLayer], 
        controls: ol.control.defaults(),
        logo: false
    });
    </script>
  </body>
</html>
Piyush
  • 283
  • 2
  • 19