1

I have multiple WMS in OpenLayers with a layer switcher and can be turned on and off. Now I have an image of each WMS, what I want is to show image of each WMS on click OF that corresponding WMS. Every WMS has only one polygon. How that can be done?

I apologize if it is a very basic question.

Below is my JavaScript code:

function initMap() 
  {
  var osmLayer = new OpenLayers.Layer.OSM();
  var gmap     = new OpenLayers.Layer.Google("Google Streets", {visibility: false});
  var info;   
var Guyana= new OpenLayers.Layer.WMS("Guyana Country",
 "http://localhost:8080/geoserver/wms",
  {
    format: "image/png8",
    transparent: true,
    layers: "opengeo:guy_adm0",

  }, {
    opacity: 0.6,
    singleTile: true,
    visibility: true,
  });
var Chile= new OpenLayers.Layer.WMS("Chile Country",
 "http://localhost:8080/geoserver/wms",
  {
    format: "image/png8",
    transparent: true,
    layers: "opengeo:chl_adm0",

  }, {
    opacity: 0.6,
    singleTile: true,
    visibility: true,
  });
var Venezuela= new OpenLayers.Layer.WMS("Venezuela Country",
 "http://localhost:8080/geoserver/wms",
  {
    format: "image/png8",
    transparent: true,
    layers: "opengeo:ven_adm0",

  }, {
    opacity: 0.6,
    singleTile: true,
    visibility: true,
  });
var Columbia= new OpenLayers.Layer.WMS("Columbia Country",
 "http://localhost:8080/geoserver/wms",
  {
    format: "image/png8",
    transparent: true,
    layers: "opengeo:col_adm0",

  }, {
    opacity: 0.6,
    singleTile: true,
    visibility: true,
  });
var Argentina= new OpenLayers.Layer.WMS("Argentina Country",
 "http://localhost:8080/geoserver/wms",
  {
    format: "image/png8",
    transparent: true,
    layers: "opengeo:arg_adm0",

  }, {
    opacity: 0.6,
    singleTile: true,
    visibility: true,
  });
var Bolivia= new OpenLayers.Layer.WMS("Bolivia Country",
 "http://localhost:8080/geoserver/wms",
  {
    format: "image/png8",
    transparent: true,
    layers: "opengeo:bol_adm0",

  }, {
    opacity: 0.6,
    singleTile: true,
    visibility: true,
  });
var Paragua= new OpenLayers.Layer.WMS("Paragua Country",
 "http://localhost:8080/geoserver/wms",
  {
    format: "image/png8",
    transparent: true,
    layers: "opengeo:pry_adm0",

  }, {
    opacity: 0.6,
    singleTile: true,
    visibility: true,
  });
var myWord = "SNOW COVER BASINS NORTHERN AREAS OF PAKISTAN";

// Map with projection into (required when mixing base map with WMS)
  olMap = new OpenLayers.Map("divid", {
  projection: "EPSG:900913",
   displayProjection: "EPSG:32463",
  units: "m",
  layers: [gmap,osmLayer,Guyana,Chile,Venezuela,Columbia,Argentina,Bolivia,Paragua]
});

olMap.addControl(new OpenLayers.Control.LayerSwitcher());
olMap.setCenter(new OpenLayers.LonLat(6011274.179826, -5256566558465465.6),3);

    }  
  • I don't really understand what you want to do... do you want to show a thumnail of each layer everytime someone makes the layer visible or do you want to show a image that's stored as a attribute of the leayer's features? – Thomas B Jun 15 '15 at 12:30
  • I want to popup an image when user click on a polygon, and every polygon has differnt image. – Ahsan Mukhtar Jun 16 '15 at 13:46
1

You have to add a getFeatureInfo-Control: http://dev.openlayers.org/examples/getfeatureinfo-control.html

Here's a question about how to add images in the GetfeatureInfo-Response How to Add image and hyperlink along with GetFeatureInfo Popup? How to Add image and hyperlink along with GetFeatureInfo Popup?

Some more information about Geoserver's GetFeatureInfo-Freemarker-Template: http://docs.geoserver.org/stable/en/user/tutorials/GetFeatureInfo/index.html#tutorials-getfeatureinfo (section "Custom Templates")

You could also request the FeatureInfo as JSON and create your own -markups: Geoserver Reference: http://docs.geoserver.org/stable/en/user/services/wms/reference.html#getfeatureinfo

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.