2

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>
<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
                })
            }).extend([
                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,

  }[$(this).attr('id')];
  layer.setVisible(!layer.getVisible());
});
  • What is the projection system of both layers? – neogeomat Jan 20 '16 at 11:58
  • 'EPSG:4326', projection of both layer – ads Jan 20 '16 at 12:35
  • Could you add a screenshot of what is happening? That may make this easier to understand. – Evil Genius Jan 20 '16 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 '16 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 '16 at 11:14
0

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, privacy policy and cookie policy

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