I'm developing a web-based application. In this project I'm trying to create multiple WMS image layer over the map with legends.

As you can see below its showing the WMS layer over its basemap . This is what I am trying to get.

enter image description here

Below I have tried to displayed one sample from GeoServer and second one is for land use/land cover but i'm not able to set basemap for this layer as you can see. There is only WMS layered displayed when I checked on landuse/ landcover button.

enter image description here

Creating one layer over the basemap it is possible to show but I need to set this for multiple WMS Layers.

So my main problem is I'm unable to write code for showing WMS layer over the basemap. This is my code so far.

<script src="sideicon_file/js/main.js"></script>
<script src="jsuntitled/ol.js"></script>
    //this is my first layer as you can see from screenshot no.2  
var landuseLayer = new ol.layer.Image({
    coordinates: [-124.73142200000001, 24.955967,
                    -66.969849, 49.371735],
    source: new ol.source.ImageWMS({
      url: 'http://localhost:8080/geoserver/topp/wms',
      params: {'LAYERS': 'topp:states'},
     maxZoom: 19
    visible: false,

  var  soilLayer = new ol.layer.Image({
  coordinates: [79.14511833527447, 20.987418098133496, 79.2018842619151, 21.050233196545],
        source: new ol.source.ImageWMS({
          url: 'http://localhost:8080/geoserver/sagy/wms',
          params: {'LAYERS': 'sagy:pachgaon_LULC'},
          maxZoom: 19
        visible: false

var map = new ol.Map({
  layers: [landuseLayer, soilLayer],
  renderer: 'canvas',
  target: document.getElementById('map'),
  controls: ol.control.defaults({
                attributionOptions: ({
                    collapsible: false
                new ol.control.ZoomSlider(),
                new ol.control.ZoomToExtent({
                    extent: [
                        813079.7791264898, 5929220.284081122,
                        848966.9639063801, 5936863.986909639


                new ol.control.Rotate(),
                new ol.control.OverviewMap(),
                new ol.control.ScaleLine(),
                new ol.control.FullScreen(),
                new ol.control.MousePosition({
                    coordinateFormat: ol.coordinate.createStringXY(4),
                    projection: 'EPSG:4326'

  interactions: ol.interaction.defaults().extend([
                new ol.interaction.Select({
                    condition: ol.events.condition.mouseMove

            view: new ol.View({
                center: new ol.geom.Point([-10997148, 4569099])
                    .transform('EPSG:4326', 'EPSG:4326').getCoordinates(),
                zoom: 4

            target: 'map'

$('input[type=checkbox]').on('change', function() {
  var layer = {

    landuse: landuseLayer,
    soil: soilLayer,

  • What is the projection system of both layers?
    – neogeomat
    Jan 20, 2016 at 11:58
  • 'EPSG:4326', projection of both layer
    – ads
    Jan 20, 2016 at 12:35
  • Could you add a screenshot of what is happening? That may make this easier to understand. Jan 20, 2016 at 13:24
  • @EvilGenius hi .. will you please help me if you know the solution. :| or in which way i should try to do this.
    – ads
    Jan 20, 2016 at 14:24
  • 1
    I think your problem is in CRS. Some layers can be on other place than basemap. Also you should display layers transparently to eliminate problem where layer which have undefined extent are loading while tiles which are covering the map (hiding other layers) - check your network panel in developer tools. Also check some online solutions geoserver.vsb.cz/~koc0161/amo
    – dkocich
    Jan 25, 2016 at 11:14

1 Answer 1


I got the answer, we just need to set

layers: [new ol.layer.Tile({
    source: new ol.source.OSM()
})landuseLayer, soilLayer],

in place of layers: [landuseLayer, soilLayer],

Image will display over the map :)

Your Answer

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

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