GIServer Examples - Using Mouse Events

Version 1 (December, 2002)
© Pedro Pereira Gonçalves (pedro@inovagis.org)

Original File	mouseover.htm
Abstract	Javascript functions to transform mouse coordinates to geographic locations and change the map request location.
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	2003-01-31 : Removed Netscape support due to problems in new versions 2001-11-20 : Request was without SRS tag 2001-10-17 : File Created
Index Page	GIServer tutorial
Important Links:	GIServer Tutorial : Changing the GETMap request (imgsrc.htm) 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 several javascript functions are implemented to ZoomIn, ZoomOut and Pan a WMS request without reloading the entire web page.

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 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"];
  }
  else
  {
    alert("Netscape support not implemented");
  }
  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()

{
  var BBOX = "BBOX=" + GeoX1 + "," + GeoY1 + "," + GeoX2 + "," + GeoY2;
  var MapSize = "WIDTH=" + MapWidth + "&HEIGHT=" + MapHeight;
  var baseURL = "/GIServer/map.cgi?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)