pre-release version 0.9 (September, 2001)
© Pedro Pereira Gonçalves (pedro@inovagis.org)
© 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 |
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 |
Global Variables
Some global variables were first defined for browser compability and definition of map request:
<!-- boolean variables to know browser version-->
var isMinNS4 = (document.layers) ? 1 : 0;
var isMinIE4 = (document.all) ? 1 : 0;
var boxX;
var boxY;
var zoomF;
var WMSimg;
<!-- data parameters-->
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
{
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;
}
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.
<!-- Draw Function using global variables -->
function drawWMS()
{
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)
