GIServer Examples - Requesting Web Map Server Layers

Original File	layersreq.htm
Abstract	Javascript functions to request multiple layers using one image.
Author	Pedro Pereira Gonçalves (email)
Implemented Functions	function DocumentCreate (source) function drawWMS (source) function updateWMS (source) function WMS_mouseout (source) function WMS_mousemove (source) function WMS_mouseup (source)
Last Change
History	2001-11-20 : Request was without SRS tag 2001-10-18 : File Created
Index Page	GIServer tutorial
Important Links:	W3.org HTML 4.01 Specification web page : home page and objects OpenGIS : home page and Web Map Server specification 1.1.0 (pdf , rtf)

World
Australia
Europe

In this web page we took the code from the mouseover example and we just changed the DocumentCreate and drawWMS functions to make a two layers Getmap request.

Global Variables

Some global variables were first defined for browser compability and definition of map request:


var isMinNS4 = (document.layers) ? 1 : 0;
var isMinIE4 = (document.all) ? 1 : 0;
var boxX;
var boxY;
var zoomF;
var WMSimg;
var WMSlayer1;

var MapLayers = "TERRA.BORDERS"
var MapWidth = 300;
var MapHeight = 150;
var GeoX1 = -180;
var GeoX2 = 180;
var GeoY1 = -90;
var GeoY2 = 90;

(top)

DocumentCreate function

The first function implemented is the DocumentCreate function that was attached to the onLoad event of the HTML document BODY tag, like this

    <BODY onLoad="DocumentCreate()" ....

This function will catch the image events and assigns them to our mouse functions.

function DocumentCreate()
{
  if (isMinIE4)
  {
    document.all["WMS_image"].onmousemove = WMS_mousemove;
    document.all["WMS_image"].onmouseout = WMS_mouseout;
    document.all["WMS_image"].onmouseup = WMS_mouseup;
    boxX = document.all["coordX"];
    boxY = document.all["coordY"];
    zoomF = document.all["ZoomFactor"];
    WMSimg = document.all["WMS_image"];
    WMSlayer1 = document.all["layer1"];
  }
  else
  {
    document.WMS_layer.captureEvents( Event.MOUSEMOVE | Event.MOUSEOUT | Event.MOUSEUP);
    document.WMS_layer.onmousemove = WMS_mousemove;
    document.WMS_layer.onmouseout = WMS_mouseout;
    document.WMS_layer.onmouseup = WMS_mouseup;
    boxX = document.forms["WMS_form"].coordX;
    boxY = document.forms["WMS_form"].coordY;
    zoomF = document.forms["WMS_form"].ZoomFactor;
    WMSimg = document.WMS_layer.document.WMS_image;
    WMSlayer1 = document.forms["WMS_form"].layer1;
  }
  updateWMS(-180,-90,180,90);
}

Please notice that this function counts with a IMG named WMS_image, that was defined with

    <img border=1 name="WMS_image" width="300" height="150" src="/GIServer/empty.gif" ...

(top)

drawWMS function

The draw function will change the SRC property of the image object for the requested layer, location and size.


function drawWMS()

{
  if (WMSlayer1.checked){
    MapLayers = WMSlayer1.value + ",TERRA.BORDERS&STYLES=,TERRA.BORDERS. DEFAULT"
    }
  else {MapLayers = "TERRA.BORDERS&STYLES=TERRA.BORDERS.DEFAULT" }
  var BBOX = "BBOX=" + GeoX1 + "," + GeoY1 + "," + GeoX2 + "," + GeoY2;
  var MapSize = "WIDTH=" + MapWidth + "&HEIGHT=" + MapHeight;
  var baseURL = "/GIServer/map.exe?REQUEST=GETMAP&LAYERS="+MapLayers+"&";
  WMSimg.src = baseURL + BBOX +"&" + MapSize;
}

(top)

updateWMS function

This function will change the global location variables with the requested parameters and call drawWMS function. The request is transformed to one decimal unit.

function updateWMS( x1 , y1 , x2 , y2 )
{
  GeoX1 = Math.round(x1*10) / 10;
  GeoX2 = Math.round(x2*10) / 10;
  GeoY1 = Math.round(y1*10) / 10;
  GeoY2 = Math.round(y2*10) / 10;
  drawWMS();
}

(top)

WMS_mouseout function

This function clears the location text boxes when the mouse isn't over the image.

function WMS_mouseout()
{
boxX.value = "";
boxY.value = "";
}

(top)

WMS_mousemove function

This function updates the mouse position in the text boxes. Notice the different methods of getting the mouse position in the Internet Explorer and in Netscape.

function WMS_mousemove (e)
{
  if (isMinIE4)
  {
    var PosX = event.offsetX + 1;
    var PosY = event.offsetY + 1;
  }
  else
  {
    var PosX = e.layerX;
    var PosY = e.layerY;
  }
  var tmpX = GeoX1 + PosX * (GeoX2 - GeoX1)/MapWidth;
  tmpX = Math.round(tmpX * 10) / 10;
  var tmpY = GeoY2 - PosY * (GeoY2 - GeoY1)/ MapHeight;
  tmpY = Math.round(tmpY * 10) / 10;
  boxX.value = tmpX;
  boxY.value = tmpY;
}

(top)

WMS_mouseup function

This function updates gets is code from the mouseover event but then updates the WMS request by centering it in the new position. Depending on the display function selected the X-spacing and Y-spacing is changed.

function WMS_mousemove (e)
{
  if (isMinIE4)
  {
    var PosX = event.offsetX + 1;
    var PosY = event.offsetY + 1;
  }
  else
  {
    var PosX = e.layerX;
    var PosY = e.layerY;
  }
  var tmpX = GeoX1 + PosX * (GeoX2 - GeoX1)/MapWidth;
  tmpX = Math.round(tmpX*10) / 10;
  var tmpY = GeoY2 - PosY * (GeoY2 - GeoY1)/ MapHeight;
  tmpY = Math.round(tmpY * 10) / 10;
  var ZoomFactor = 0;
  if (zoomF.selectedIndex==0) {ZoomFactor = 4}
  if (zoomF.selectedIndex==1) {ZoomFactor = 1}
  if (zoomF.selectedIndex==2) {ZoomFactor = 2}
  if (ZoomFactor>0)
  {
    var SizeX = GeoX2 - GeoX1;
    var SizeY = GeoY2 - GeoY1;
    updateWMS (tmpX - SizeX / ZoomFactor, tmpY - SizeY / ZoomFactor, tmpX + SizeX / ZoomFactor, tmpY + SizeY / ZoomFactor);
  }
}

(top)

This is a old historical version of the inovaGIS site For updated info about GIServer please go to http://giserver.terradue.com/