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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
      .map {
        height: 400px;
        width: 100%;
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
    <title>OpenLayers WMS</title>
    <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
    // -->
    // source
    var layerSource = new ol.source.TileWMS({
        url: '',
        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,
                'FORMAT': 'application/openlayers'},
        serverType: 'geoserver',

    // layer
    var layerLayer = new ol.layer.Tile({
        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
  • Welcome to GIS SE! We're a little different from other sites; this isn't a discussion forum but a Q&A site. Your questions should as much as possible describe not just what you want to do, but precisely what you have tried and where you are stuck trying that. Please check out our short tour for more about how the site works.
    – Ian Turton
    Mar 13 '20 at 12:03
  • @IanTurton, Correct me if I am wrong! I have wrote the question properly and what I am trying to achieve here plus I have wrote the code snippet what I have tried. Is this not how should I post the Question!!
    – Piyush
    Mar 13 '20 at 12:06
  • 1
    you missed out the what goes wrong part
    – Ian Turton
    Mar 13 '20 at 13:42
  • Format OpenLayers is incorrect you need png.
    – nmtoken
    Mar 14 '20 at 5:23

You should specify the layers property only once, and it should contain all the layers, so

    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
    layers: [layerLayer], 


    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()

Also visible: false, means the layer will not be seen or loaded

  • I have added it but still I have no response.. I am only able to view blue screen
    – Piyush
    Mar 17 '20 at 5:23
  • That could be because the projection and coordinates are inconsistent. The view projection is set to EPSG:4326 (there should be no space) which is LonLat (so an extent greater [-180, -90, 180, 90] doesn't make sense) but you are calling fromLonLat which transforms to EPSG:3857?
    – Mike
    Mar 17 '20 at 10:09

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.