PHP Mapserver zoom levels

Mon Jun 6 22:07:23 PDT 2005

Hi,

Below is my index.php and its contents. In my map file I define a raster
(.tif) which displays just fine. Now, I need to be able to zoom in further
on the map (and the image), but I'm not able to do it. What should I change
in my index.php in order to zoom in further into my map and respectively
into my image? I assume it has to do with setting x and y or the extent.
Most of the code was written before I came in.

Thank you for your help,

Yar

_____________________________________________
<?php

//This prevents error creating data from being entered into the database
//  by automatically quoting required characters from input strings
ini_set("magic_quotes_runtime", "1");

$menuMouseStyle = "onmouseout=\'this.style.background=\"lightgrey\"
\'onmouseover=\'this.style.background=\"darkgray\"; ";

//NOTES
//Change map resolution in testmap.map - currently 1240 x 840

//----------------------------------------------------------//
//       INITIALIZING THE MAP FILE,ETC

//dl('php_mapscript_36.dll');  // put in php.ini file  RCH 8-8-04
$map_path="";
$map_file="testmap.map";
$map=ms_newMapObj($map_path.$map_file);

// Offset between edge of map and edge of screen (in pixels)
$mapxOffset = 15;
$mapyOffset = 80;

// Number of decimal digits for latitude and longitude
$sigPos = 2;

//---------------------------------------------------------//
// For sending messages to the message queue

function enqueue($query_string)
{
 $socket = socket_create(AF_INET,SOCK_STREAM,0) or die();
 $connection = socket_connect($socket,'localhost',6000) or die();
 socket_write($socket,$query_string) or die();
 socket_close($socket);
}

//--------------------------------------------------------//
//      CALCULATING THE WIDTH AND EXTENT

$eminx = $map->extent->minx;
$eminy = $map->extent->miny;
$emaxx = $map->extent->maxx;
$emaxy = $map->extent->maxy;
$ratio_width = ($emaxx - $eminx)/$map->width;
$ratio_height = ($emaxy - $eminy)/$map->height;

//--------------------------------------------------------------------------
--//
//        CONNECT TO THE MYSQL DATABASE                       //
$db = mysql_connect('localhost','statewide_root','FFY03');    //
mysql_select_db("statewide",$db);                             //
$camnum = mysql_result(mysql_query("select count(*) from
mapcamera"),0);   //
$dmsnum = mysql_result(mysql_query("select count(*) from
mapdms"),0);      //
$incnum = mysql_result(mysql_query("select count(*) from
incident"),0);    //
$worknum= mysql_result(mysql_query("select count(*) from
mapworkzone"),0); //
//--------------------------------------------------------------------------
--//

//--------------------------------------------------------//
//        FIND OUT THE USER INFORMATION

$my_ip = $_GET['my_ip'];
$result = mysql_fetch_array(mysql_query("select * from active_users where
ipaddress='$my_ip'"));
$my_username = $result['user_name'];
$result = mysql_fetch_array(mysql_query("select * from multiuser where
user_name='$my_username'"));
$my_priv_level = $result['user_level'];

// changed level='$my_priv_level' to user_name='$my_username' to correct
priviledge search  RCH 8-8-04
$result = mysql_fetch_array(mysql_query("select priv_status from
multiuser_priv where user_name='$my_username' AND priv_code=14"));
if ($result['priv_status'] == 'Y')
 $add_incidents = 1;
else
 $add_incidents = 0;

// changed level='$my_priv_level' to user_name='$my_username' to correct
priviledge search  RCH 8-8-04
$result = mysql_fetch_array(mysql_query("select priv_status from
multiuser_priv where user_name='$my_username' AND priv_code=5"));
if ($result['priv_status'] == 'Y')
 $add_workzones = 1;
else
 $add_workzones = 0;

//----------------------------------------//
// TURNING MAP FEATURES ON AND OFF        //
$layer1 = $map->getLayerByName("lakes");  //
$layer2 = $map->getLayerByName("lakes2"); //
$layer3 = $map->getLayerByName("cities"); //
$layer4 = $map->getLayerByName("cityl");  //
$layer5 = $map->getLayerByName("cityl2"); //
$crlayer = $map->getLayerByName("county_sec_roads");
       //
if ($HTTP_GET_VARS['lakes'] == "on")      //
{                                         //
 $layer1->set("status", MS_ON);      //
 $layer2->set("status", MS_ON);      //
 $lakes_on = "checked";              //
}                                         //
else                                      //
{                                         //
 $layer1->set("status", MS_OFF);     //
 $layer2->set("status", MS_OFF);     //
}                                         //
           //
if ($HTTP_GET_VARS['cities'] == "on")     //
{                                         //
 $layer3->set("status", MS_ON);      //
 $layer4->set("status", MS_ON);      //
 $layer5->set("status", MS_ON);      //
 $cities_on = "checked";             //
}                                         //
else                                      //
{                                         //
 $layer3->set("status", MS_OFF);     //
 $layer4->set("status", MS_OFF);     //
 $layer5->set("status", MS_OFF);     //
}                                         //
if ($HTTP_GET_VARS['weather'] == "on")    //
 $weather_on = checked;              //
//----------------------------------------//

echo <<<END
<html>
<head>
<title> Statewide MapServer</title>

<script language="JavaScript1.2">

if (window.Event)
  document.captureEvents(Event.MOUSEUP);

function nocontextmenu()
{
 event.cancelBubble = true;
 event.returnValue = false;
 return false;
}

function norightclick(e) {
  if (window.Event)
  {
    if (e.which == 2 || e.which == 3) return false;
  }
  else if (event.button == 2 || event.button == 3) rclicker();
}

if (document.layers)
  document.captureEvents(Event.MOUSEDOWN);
document.oncontextmenu = nocontextmenu;
document.onmousedown = norightclick;

END;

function commandLogQueue($my_username, $query_string)
{
 enqueue($query_string);
 $query_string2 = "insert into commandLog
(commandtime,username,commandstring,commandmethod) values (".time
().",'$my_username',\"$query_string\",'Map')";
 enqueue($query_string2);
}

//--------------------------------------------------------------------------
----------------//
//  ZOOMING & PANNING

// Check to see if the user has clicked on the map
if (isset($HTTP_GET_VARS['mapx']))
{
      $extent_to_set = explode(" ",$HTTP_GET_VARS["extent"]);
 $map->setextent($extent_to_set[0],$extent_to_set[1],$extent_to_set
[2],$extent_to_set[3]);

 // Retrieve the x and y values of the user mouse click
 $x = $HTTP_GET_VARS['mapx'];
 $y = $HTTP_GET_VARS['mapy'];

 // Get the width and height of the map for
 // approximating latitude and longitude points

 $eminx = $map->extent->minx;
 $eminy = $map->extent->miny;
 $emaxx = $map->extent->maxx;
 $emaxy = $map->extent->maxy;
 $ratio_width = ($emaxx - $eminx)/$map->width;
 $ratio_height = ($emaxy - $eminy)/$map->height;

 // If the variable "setcam" is set, then the user
 // has chosen to add an incident to the map.

 if ($HTTP_GET_VARS['setcam'] == "incident")
 {
  $incmessage = $_GET['incmessage'];
  $lat  = (double)($x*$ratio_width + $eminx);
  $long = (double)($emaxy - $y*$ratio_height);
  $query_string = "insert into incident (id,longitude,latitude,description)
values (".time().",$lat,$long,'$incmessage')";
  commandLogQueue($my_username,$query_string);
  $incnum++;
 }
 else if ($HTTP_GET_VARS['setcam'] == "workzone")
 {
  $workzonemessage = $_GET['workzonemessage'];
  $lat  = (double)($x*$ratio_width + $eminx);
  $long = (double)($emaxy - $y*$ratio_height);
  $query_string = "insert into mapworkzone
(id,longitude,latitude,description) values (".time
().",$lat,$long,'$workzonemessage')";
  commandLogQueue($my_username,$query_string);
  $worknum++;
 }
 else if ($HTTP_GET_VARS['editcam'] == "incident")
 {
  $inceditmessage = $_GET['inceditmessage'];
  $query_string="update incident set description='$inceditmessage' where
id=$editid";
  commandLogQueue($my_username,$query_string);
 }
 else if ($HTTP_GET_VARS['editcam'] == "workzone")
 {
  $workeditmessage = $_GET['workeditmessage'];
  $query_string="update mapworkzone set description='$workeditmessage'
where id=$editid";
  commandLogQueue($my_username,$query_string);
 }
 else if ($HTTP_GET_VARS['delinc'] != "VOID")
 {
  $did = $HTTP_GET_VARS['delinc'];
  $query_string="delete from incident where id=$did";
  commandLogQueue($my_username,$query_string);
  $incnum--;
 }
 else if ($HTTP_GET_VARS['delwork'] != "VOID")
 {
  $did = $HTTP_GET_VARS['delwork'];
  $query_string="delete from mapworkzone where id=$did";
  commandLogQueue($my_username,$query_string);
  $worknum--;
 }
 else if ($HTTP_GET_VARS['nozoom'] == "true")
 {
  $zoom_factor=0;
 }

 else
 {
  $my_point = ms_newpointObj();
  $my_point->setXY($x, $y);
  $my_extent = ms_newrectObj();
  $my_extent->setextent($extent_to_set[0],$extent_to_set[1],$extent_to_set
[2],$extent_to_set[3]);
  $zoom_factor = $HTTP_GET_VARS["zoom"]*$HTTP_GET_VARS["zsize"];

    if ($zoom_factor == 0)
   $map->zoompoint(1,$my_point,$map->width,$map->height, $my_extent);
  else
   $map->zoompoint($zoom_factor,$my_point,$map->width,$map->height,
$my_extent);

  $eminx = $map->extent->minx;
  $eminy = $map->extent->miny;
  $emaxx = $map->extent->maxx;
  $emaxy = $map->extent->maxy;
  $ratio_width = ($emaxx - $eminx)/$map->width;
  $ratio_height = ($emaxy - $eminy)/$map->height;
 }
}

$extent_to_html = $map->extent->minx." ".$map->extent->miny." ".$map-
>extent->maxx." ".$map->extent->maxy;

//--------------------------------------------------------------------------
--------//
//       DRAW THE IMAGE -- BUT DO NOT YET SAVE IT FOR DISPLAY
$image=$map->draw();

//--------------------------------------------------------------------------
--------//
//       DRAW THE ICONS ON THE MAP IF THE USER IS ZOOMED IN FAR ENOUGH
//
// Different icons are used depending on webcam direction, or camera type.
//
// Icons are defined in the map file. Different classes in the web cam
// layer have different icons. When items are selected from the database,
// they are placed into the correct class in the web cam layer in the map
file.

function queryAndDraw (&$result, $imageType, $stringTwo, $stringOne, &$map,
&$image)
{
 while ($row = mysql_fetch_array($result))
 {
  $campt = ms_newpointObj();
  $campt->setXY($row['longitude'],$row['latitude']);
  if ($map->scale < .3)
   $camlayer = $map->getLayerByName($stringTwo);
  else
   $camlayer = $map->getLayerByName($stringOne);
  $campt->draw($map,$camlayer,$image,$imageType,"");
 }
}

if ($map->scale < 2)
{
 $result = mysql_query("select distinct latitude,longitude from mapcamera
where latitude < $emaxy AND latitude > $eminy AND longitude < $emaxx AND
longitude > $eminx");
 queryAndDraw($result,11,"webcamspt2","webcamspt",$map,$image);

 $result = mysql_query("select distinct latitude,longitude from mapdms
where latitude < $emaxy AND latitude > $eminy AND longitude < $emaxx AND
longitude > $eminx");
 queryAndDraw($result,10,"webcamspt2","webcamspt",$map,$image);

 $result = mysql_query("select distinct latitude,longitude from mapcamera
where acquiredstatus='N' AND type='CCTV' AND latitude < $emaxy AND latitude
> $eminy AND longitude < $emaxx AND longitude > $eminx ");
 queryAndDraw($result,8,"webcamspt2","webcamspt",$map,$image);

 $result = mysql_query("select distinct latitude,longitude from mapcamera
where acquiredstatus='Y' AND type='CCTV' AND latitude < $emaxy AND latitude
> $eminy AND longitude < $emaxx AND longitude > $eminx");
 queryAndDraw($result,9,"webcamspt2","webcamspt",$map,$image);

 $directionArray = array(N, NW, W, SW, S, SE, E, NE);

 //This loop calls queries to find all directions of webcam within the
current map extent and draws their icons on the map
 //Indices are N=0 => NE=7, these indices also represent their icon
 for($i=7;$i>=0;$i--)
 {
  $result = mysql_query("select * from mapcamera where
direction='".$directionArray[$i]."' && type='Web' AND latitude < $emaxy AND
latitude > $eminy AND longitude < $emaxx AND longitude > $eminx");
  queryAndDraw($result,$i,"webcamspt2","webcamspt",$map,$image);
 }

 $result = mysql_query("select * from incident where latitude < $emaxy AND
latitude > $eminy AND longitude < $emaxx AND longitude > $eminx");
 queryAndDraw($result,0,"incidentspt2","incidentspt",$map,$image);

 $result = mysql_query("select * from mapworkzone where latitude < $emaxy
AND latitude > $eminy AND longitude < $emaxx AND longitude > $eminx");
 queryAndDraw($result,0,"workzonept2","workzonept",$map,$image);

}

if ($map->scale < 1)
        {
            $crlayer->set("status", MS_ON);
            $crlayer->draw($image);
        }

     else
        {
            $crlayer->set("status", MS_OFF);

        }

//--------------------------------------------------------------------------
--------//

$image_url = $image->saveWebImage();

$dms_menus = "";
$dms_hide = "";

//---------------------------------------------------------------
// GENERATING THE JAVASCRIPT TO CAPTURE RIGHT CLICKS
//
// To capture a right-click on the map, we need to:
//
//  1) figure out which icons are within the current map extent
//  -- to make this simpler, select everything into a separate
//        table, and use additional selects from selects
//        from that table.
//
//  2) Use an approximation to translate the lat/long
//     position of each icon to pixels
//
//  3) Write javascript that checks a right-click to see
//     if it is within those extents
//
//  4) Find all the icons near a certain click, and use
//     javascript to update and display the right-click menu

echo <<<END

function rclicker()
{
 try {
 hideAll();
 x = window.event.clientX;
 y = window.event.clientY;
 if (x < 20 || y < 85 || y > 940 || x > 1255)
 {
  return;
 }

 thismenu.style.visibility = 'visible';

 //Change the string below to alter formatting for the main right click menu
 rClickMenuStyle = 'class=menu
onmouseout="this.style.background=\'lightgrey\';" href="javascript: void
(0);" onmouseover=" this.style.background=\'darkgray\';';

 innerStuff = '<a id=cctvover ' + rClickMenuStyle + ' showside
(cctvmenu,this);">CCTV</a>';
 innerStuff += '<br><a id=webover ' + rClickMenuStyle + ' showside
(webmenu,this);">Web</a>';
 innerStuff += '<br><a id=securityover ' + rClickMenuStyle + ' showside
(securitymenu,this);">Security</a>';
 innerStuff += '<br><a id=dmsover ' + rClickMenuStyle + ' showside
(dmsmenu,this);">DMS</a>';
 innerStuff += '<hr><a id=incidentover ' + rClickMenuStyle + ' showside
(incidentmenu,this);">Incident</a>';
 innerStuff += '<br><a id=workover ' + rClickMenuStyle + ' showside
(workmenu,this);">Workzone</a>';
 innerWork = '';
 innerIncident = '';
 innerCCTV = '';
 innerSecurity = '';
 innerWeb = '';
 innerDMS = '';

 document.mapform.mapx.value=x-$mapxOffset;
 document.mapform.mapy.value=y-80;
 if (x < 700)
 {
  thismenu.style.pixelLeft = x;
  rightwards = false;
 }
 else
 {
  thismenu.style.pixelLeft = x - 170;
  rightwards = true;
 }

 if(y > 805)
  thismenu.style.pixelTop = 805;
 else
  thismenu.style.pixelTop = y;
 setTimeout('thismenu.style.visibility=\'visible\'',10);
END;

 mysql_query("delete from latlongtest");
 mysql_query("insert into latlongtest select latitude,longitude,type,
location as info,IP,acquiredstatus,id from mapcamera");
 mysql_query("insert into latlongtest select latitude,longitude,'DMS' as
type, location as info,IP,acquiredstatus,id from mapdms");
 mysql_query("insert into latlongtest select latitude,longitude,'INCIDENT'
as type,description as info,'void' as IP, 'null' as acquiredstatus,id from
incident");
 mysql_query("insert into latlongtest select latitude,longitude,'WORKZONE'
as type,description as info,'void' as IP, 'null' as acquiredstatus,id from
mapworkzone");

 $currentMapIcons = mysql_query("select distinct latitude,longitude from
latlongtest where latitude > '$eminy' AND latitude < '$emaxy' AND longitude
< '$emaxx' AND longitude > '$eminx'") or die (mysql_error());

 while ($row = mysql_fetch_array($currentMapIcons))
 {
  $iconx = $row['longitude'];
  $icony = $row['latitude'];

  //here are generalized formatting strings used for the menus
  $menuMouseStyle = "onmouseout=\' this.style.background=\"lightgrey\"
\'onmouseover=\'this.style.background=\"darkgray\"; ";

  //these values represent the section of the map to check for icons
  //current selectable area around an icon is a 36x36 pixel square
  $minx = (int)(($iconx - $map->extent->minx)/$ratio_width);
  $miny = (int)(($map->extent->miny - $icony)/$ratio_height)+ 62 + $map-
>height;
  $maxx = $minx + 36;
  $maxy = $miny + 36;

  $ip=rtrim($row['location']);
  if($ip=="")
  $direction = $row['direction'];
  $type=$row['type'];

 echo "if (x > $minx && x < $maxx && y > $miny && y < $maxy) \n";
 echo "{ \n";

  $result = mysql_query("select * from latlongtest where type='Web' AND
latitude='$icony' AND longitude='$iconx'");
  $cam_link=array(array("blank",""),array("blank",""),array
("blank",""),array("blank",""));
  $i = 0;
  while($row3 = mysql_fetch_array($result))
  {
   $cam_link[$i][0]=$row3['ip'];
   $cam_link[$i][1]=$row3['info'];
   $i++;
  }
  if ($i != 0)
  {
   echo "innerWeb += '<a class=menu $menuMouseStyle\' ";
   echo "href=\'javascript: window.open(\"cam_htmls/four_square.php?
cam1=".$cam_link[0][0]."&";
   echo "cam2=".$cam_link[1][0]."&cam3=".$cam_link[2][0]."&cam4=".$cam_link
[3][0]."\", \"CAMWINDOW\",";
   echo "\"resizable=no, fullscreen=yes\"); hideAll(); void(0);\'>Web Cams
(".$i.")</a><br>'; ";
  }

  $result = mysql_query("select * from latlongtest where type='Security'
AND latitude='$icony' AND longitude='$iconx'");
  while($row3 = mysql_fetch_array($result))
  {
   echo "innerSecurity += '<a class=menu href=\'javascript: void
(0);\'>View</a>'; ";
  }
  $result = mysql_query("select * from latlongtest where type='CCTV' AND
latitude='$icony' AND longitude='$iconx'");
  while($row3 = mysql_fetch_array($result))
  {
   if ($row3['acquiredstatus'] == 'Y')
    echo "innerCCTV += '<a class=menu style=\'color: red;\' ";
   else
    echo "innerCCTV += '<a class=menu ";
   echo "$menuMouseStyle\' href=\'javascript:
document.mapform.nozoom.value=\ "true\"; ";
   echo "document.mapform.COMMAND.value=\"OPENCCTV\"; ";
   echo "document.mapform.DEVICE_TYPE.value=\"CCTV\"; ";
   echo "document.mapform.DEVICE_ID.value=\ "".$row3['id']."\"; ";
   echo "document.mapform.DEVICE_IP.value=\"".$row3['ip']."\"; ";
   echo "document.mapform.submit();\'> ".substr($row3
['info'],0,16)."...</a><br>';";
  }
  $result = mysql_query("select * from latlongtest where type='DMS' AND
latitude='$icony' AND longitude='$iconx'");
  while($row3 = mysql_fetch_array($result))
  {
   echo "innerDMS += '<a class=menu $menuMouseStyle ";
   echo "showside2(dmsmenu".$row3['id'].",dmsmenu);\' ";
   echo "href=\'javascript: void(0);\'>".substr($row3
['info'],0,16)."...<br>';";

   $dms_hide .= "try {hide(dmsmenu".$row3['id'].");} catch(e){} \n";

   $dms_menu_settings = "<a class=menu
onmouseout='this.style.background=\"lightgrey\";'
onmouseover='this.style.background=\"darkgray\";' href='javascript:
document.mapform.nozoom.value=\"true\"; ";
   $dms_device_settings = "document.mapform.DEVICE_TYPE.value=\"DMS\";
document.mapform.DEVICE_ID.value=\"".$row3['id']."\";
document.mapform.DEVICE_IP.value=\"".$row3['ip']."\"; ";

   $dms_menus .= "<div class=div id=dmsmenu".$row3['id'].">";
   $dms_menus .= "$dms_menu_settings";
   $dms_menus .= "document.mapform.COMMAND.value=\"VIEWDMS\"; ";
   $dms_menus .= "$dms_device_settings";
   $dms_menus .= "document.mapform.submit();'> View</a>";
   $dms_menus .= "<br>$dms_menu_settings";
   $dms_menus .= " document.mapform.COMMAND.value=\"OPENDMS\"; ";
   $dms_menus .= "$dms_device_settings";
   $dms_menus .= "document.mapform.submit();'> Open<br></a></div> ";
  }

  $result = mysql_query("select * from latlongtest where type='INCIDENT'
AND latitude='$icony' AND longitude='$iconx'");
  while($row3 = mysql_fetch_array($result))
  {
   echo "innerIncident += ' <div $menuMouseStyle ";
   if($add_incidents)
    echo "showedit(editmenu,incidentmenu,".$row3
['id'].","."document.mapform.delinc,editINC);";
   echo "\' class=menu>".substr($row3['info'],0,20)."</div>'; "; //change
here to adjust incident desc. lengths
  }
  $result = mysql_query("select * from latlongtest where type='WORKZONE'
AND latitude='$icony' AND longitude='$iconx'");
  while($row3 = mysql_fetch_array($result))
  {
   echo "innerWork += ' <div $menuMouseStyle ";
   if($add_workzones)
    echo "showedit(editmenu,workmenu,".$row3
['id'].","."document.mapform.delwork,editWORK);";
   echo "\' class=menu>".substr($row3['info'],0,20)."</div>'; ";  //change
here to adjust workzone desc. lengths
  }
 echo "} \n";
 } // END WHILE

if ($add_incidents == 1)
{
echo<<<END
 innerIncident += "<div class=menu
onmouseover='this.style.background=\"darkgray\"; hide(editmenu);'
onmouseout='this.style.background=\"lightgrey\";' onclick='slideIn
(incidents)'>Add</div>";
END;
}

if ($add_workzones == 1)
{
echo<<<END
 innerWork += "<div class=menu
onmouseover=\'this.style.background=\"darkgray\"; hide(editmenu);\'
onmouseout=\'this.style.background=\"lightgrey\";\' onclick='slideIn
(workzonediv)'>Add</div>";
END;
}

echo <<<END
 thismenu.innerHTML=innerStuff;
 webmenu.innerHTML = innerWeb;
 if (innerWeb != "")
  webover.style.fontWeight = "bold";

 cctvmenu.innerHTML = innerCCTV;
 if (innerCCTV != '')
  cctvover.style.fontWeight = 'bold';

 securitymenu.innerHTML = innerSecurity;
 if (innerSecurity != '')
  securityover.style.fontWeight = 'bold';

 dmsmenu.innerHTML = innerDMS;
 if (innerDMS != '')
  dmsover.style.fontWeight = 'bold';

 incidentmenu.innerHTML = innerIncident;
 if (innerIncident != '')
  incidentover.style.fontWeight = 'bold';

 workmenu.innerHTML = innerWork;
 if (innerWork != '')
  workover.style.fontWeight = 'bold';

 return;
 } catch(e){}
}

x=0;
y=0;
down=false;
overmap=false;
alreadydown=false;
zoombox=false;
rightwards=true;

function sidemenuYvalue(menu,othermenu)
{
 relativeMouseLocation=window.event.clientY-othermenu.style.pixelTop;
 if(relativeMouseLocation<=19)
  menu.style.pixelTop=othermenu.style.pixelTop;
 else if(relativeMouseLocation<=37)
  menu.style.pixelTop=othermenu.style.pixelTop + 16;
 else if(relativeMouseLocation<=50)
  menu.style.pixelTop=othermenu.style.pixelTop + 33;
 else if(relativeMouseLocation<=74)
  menu.style.pixelTop=othermenu.style.pixelTop + 48;
 else if(relativeMouseLocation<=99)
  menu.style.pixelTop=othermenu.style.pixelTop + 80;
 else if(relativeMouseLocation<=146)
  menu.style.pixelTop=othermenu.style.pixelTop + 96;
}

function showside2(menu,parentMenu)
{
 try {
 if (menu.innerHTML == '')
  return;
 menu.style.visibility = 'visible';

 if (rightwards)
  menu.style.pixelLeft = parentMenu.style.pixelLeft - 170;
 else
  menu.style.pixelLeft = parentMenu.style.pixelLeft + 170;

 sidemenuYvalue (menu, parentMenu);
 } catch (x) {alert(x);};
}

function hideAll()
{
 try {
 hide(workmenu);
 hide(incidentmenu);
 hide(cctvmenu);
 hide(webmenu);
 hide(securitymenu);
 hide(dmsmenu);
 hide(editmenu);
 hide(thismenu);
 $dms_hide
 } catch (x) {};
}

function showside(menu,o)
{
 try {
 hide(workmenu);
 hide(incidentmenu);
 hide(cctvmenu);
 hide(webmenu);
 hide(securitymenu);
 hide(dmsmenu);
 hide(editmenu);
 $dms_hide
 showside2(menu,thismenu);
 } catch (x) {};
}

///////////////////////////////
// SHOWEDIT PARAMETERS
// menu = the menu to "show"
// o = the menu that is showing it
// num = the id of the map element
// formvar = the formvar to set
// editDiv = the editing div to slide in
function showedit(menu,o,num,formvar,editDiv)
{
 menu.innerHTML="<a class=menu
onmouseover=\"this.style.background='darkgray';\"
onmouseout=\"this.style.background='lightgrey';\" href='javascript: void
(0); document.mapform."+ formvar.name + ".value="+num+"; hideAll();
document.mapform.submit();'>Remove</a>";
 menu.innerHTML+="<br><a class=menu onmouseover=\"
this.style.background='darkgray';\"
onmouseout=\"this.style.background='lightgrey';\" href='javascript: void
(0); hideAll(); slideIn("+editDiv.id+");'>Edit</a>";
 document.mapform.editid.value=num ;
 showside2(menu,o);
}

function hide(menu) { menu.style.visibility = 'hidden'; }

function dosubmit()
{
 if(alreadydown && (window.event.clientX < box.style.pixelLeft))
     {
      alreadydown=false;
       box.style.width=0;
       box.style.height=0;
     }
     else
     {
      document.mapform.mapx.value=window.event.clientX-20;
      document.mapform.mapy.value=window.event.clientY-80;
      document.mapform.submit();
     }
}

function makeBox()
{
 if (zoombox)
 {
 if(!down && !alreadydown)
 {
  x = window.event.clientX;
  y = window.event.clientY;
  down = true;
 }
 box.style.pixelLeft = x;
 box.style.pixelTop = y;
 box.style.visibility = "visible";
 }
 if (alreadydown)
 box.style.visibility="hidden";
}

function updatestatus(xover,yover)
{
statusy.innerHTML = (yover - 80)*$ratio_height + $eminy;
statusy.innerHTML = Math.round(statusy.innerHTML*Math.pow
(10,$sigPos))/Math.pow(10,$sigPos);
statusx.innerHTML = (xover - 20)*$ratio_width + $eminx;
statusx.innerHTML = Math.round(statusx.innerHTML*Math.pow
(10,$sigPos))/Math.pow(10,$sigPos);
}

function moving()
{
 if (overmap)
  updatestatus(window.event.clientX,window.event.clientY);
 if (down && !alreadydown && zoombox)
 {
      box.style.height = Math.abs(y-window.event.clientY );
  box.style.width = Math.abs(x-window.event.clientX);
      document.mapform.mapx.value=(parseInt(box.style.width)/2 + parseInt
(box.style.pixelLeft))-20;
      document.mapform.mapy.value=(parseInt(box.style.height )/2 + parseInt
(box.style.pixelTop))-80;
  document.mapform.zsize.value = Math.min(840.0/Math.abs(y-
window.event.clientY), 1240.0/Math.abs(x-window.event.clientX));
  document.mapform.submit();
 }
}

function mUp()
{
 if (down)
 {
 down = false;
 alreadydown=true;
 }
}

function slideIn(o)
{
 o.style.visibility="visible";
 if(o.style.pixelLeft < 300)
 {
  o.style.pixelLeft += 30;
  o.style.pixelTop += 30;
  setTimeout("slideIn(" + o.id + ")",10);
 }
}

function slideOut(o)
{
 if(o.style.pixelLeft > -600)
 {
  o.style.pixelLeft -=35;
  setTimeout("slideOut("+o.id+")" ,10);
 }
      else
 {
  o.style.pixelLeft=-600;
  o.style.pixelTop=-600;
 }
}

// please keep these lines on when you copy the source
// made by: Nicolas - http://www.javascript-page.com

var clockID = 0;

function UpdateClock()
{
if(clockID)
{
 clearTimeout(clockID);
 clockID  = 0;
}

var tDate = new Date();

var monthInt = tDate.getMonth();
var month= "";

if (monthInt == 0) month = "Jan";
else if (monthInt == 1) month = "Feb";
else if (monthInt == 2) month = "Mar";
else if (monthInt == 3) month = "Apr";
else if (monthInt == 4) month = "May";
else if (monthInt == 5) month = "Jun";
else if (monthInt == 6) month = "Jul";
else if (monthInt == 7) month = "Aug";
else if (monthInt == 8) month = "Sep";
else if (monthInt == 9) month = "Oct";
else if (monthInt == 10) month = "Nov";
else if (monthInt == 11) month = "Dec";

var dayInt = tDate.getDay();
var day = "";

if (dayInt == 0) day = "Sunday";
else if (dayInt == 1) day = "Monday";
else if (dayInt == 2) day = "Tuesday";
else if (dayInt == 3) day = "Wednesday";
else if (dayInt == 4) day = "Thursday";
else if (dayInt == 5) day = "Friday";
else if (dayInt == 6) day = "Saturday";

var min = tDate.getMinutes();
var sec = tDate.getSeconds();

if (min<=9) min="0"+min;
if (sec<=9) sec="0"+sec;

theTime.innerHTML = day + "  " + month + "  " + tDate.getDate() + ",  " +
tDate.getYear() + "    "
                   + tDate.getHours() + ":" + min + ":" + sec;

clockID = setTimeout("UpdateClock()", 1000);
}

function StartClock()
{
 clockID = setTimeout("UpdateClock()", 200);
}

</script>
<link rel=stylesheet type="text/css" href="main.css">
</head>

<body onload="StartClock();" onmouseup="mUp();">

<form method=GET name="mapform" action="$PHP_SELF">

<img id="zin" alt="Zoom In" style="position: absolute; top: 5; left: 40;"
src="graphics/microsofty/zin.bmp"
onclick="document.mapform.zoom.value=1;this.src='graphics/microsofty/onzin.b
mp'; zout.src='graphics/microsofty/zout.bmp';
zpan.src='graphics/microsofty/pan.bmp';zinsq.src='graphics/microsofty/zbox.b
mp';zoombox=false;">

<img id="zout" alt="Zoom Out" style="position: absolute; top: 5; left:
140;" src="graphics/microsofty/zout.bmp"
onclick="document.mapform.zoom.value=-1;
this.src='graphics/microsofty/onzout.bmp' ;
zin.src='graphics/microsofty/zin.bmp';
zpan.src='graphics/microsofty/pan.bmp';zinsq.src='graphics/microsofty/zbox.b
mp';zoombox=false;">

<img id="zpan" alt="Recenter the Map" style="position: absolute; top: 5;
left: 240;" src="graphics/microsofty/pan.bmp"
onclick="document.mapform.zoom.value=0;this.src='graphics/microsofty/onpan.b
mp'; zin.src='graphics/microsofty/zin.bmp';
zout.src='graphics/microsofty/zout.bmp';
zinsq.src='graphics/microsofty/zbox.bmp'; zoombox=false;">

<div class=screen style="top: 5; left: 620;">
<a><b>QUICK ZOOM</b></a><br>
<a style="color: white;" href='javascript: document.mapform.zoom.value=0;
document.mapform.mapx.value=620; document.mapform.mapy.value=420;
document.mapform.extent.value="-97.768 35.326 -97.218 35.619";
document.mapform.submit();'>OKC METRO</a><br>
<a style="color: white;" href='javascript: document.mapform.zoom.value=0;
document.mapform.mapx.value=620; document.mapform.mapy.value=420;
document.mapform.extent.value="-96.188 35.963 -95.637 36.257";
document.mapform.submit();'>TULSA METRO</a><br>
<a style="color: white;" href='javascript: document.mapform.zoom.value=0;
document.mapform.mapx.value=620; document.mapform.mapy.value=420;
document.mapform.extent.value="-103.07 32.941 -94.320 37.462 ";
document.mapform.submit();'>STATEWIDE</a>
</div>
END;

//------------------------------------------------------------------------//
// ECHO OUT THE HIDDEN FORM VARIABLES FOR THE HTML
echo <<<END
<input type=hidden name="DEVICE_TYPE" value="">
<input type=hidden name="DEVICE_IP" value="">
<input type=hidden name="DEVICE_ID" value="">
<input type=hidden name="COMMAND" value="">
<input type=hidden name="my_ip" value='$my_ip'>
<input type=hidden name="mapx" value=620>
<input type=hidden name="mapy" value=420>
<input type=hidden name="nozoom" value="false">
<input type=hidden name="zsize" value=4>
<input type=hidden name="setcam" value="false">
<input type=hidden name="editcam" value="false">
<input type=hidden name="editid" value="false">
<input type=hidden name="delcam" value="VOID">
<input type=hidden name="delrtms" value="VOID">
<input type=hidden name="delinc" value="VOID">
<input type=hidden name="delwork" value="VOID">
<input type=hidden name="deldms" value="VOID">
<input type=hidden name="extent" value="$extent_to_html">
END;

//------------------------------------------------------------------------//
//       CHECKING THE ZOOM:

if($zoom_factor > 0)
{
 echo "<INPUT TYPE=HIDDEN NAME='zoom' value='1'>";
 echo "<SCRIPT> document.images['zin'].src
= 'graphics/microsofty/onzin.bmp'; </SCRIPT>";
}
else if($zoom_factor == 0)
{
 echo "<INPUT TYPE=HIDDEN NAME='zoom' value='0'>";
 echo "<SCRIPT> document.images['zpan'].src
= 'graphics/microsofty/onpan.bmp'; </SCRIPT>";
}
else if($zoom_factor < 0)
{
 echo "<INPUT TYPE=HIDDEN NAME='zoom' value='-1'>";
 echo "<SCRIPT> document.images['zout'].src
= 'graphics/microsofty/onzout.bmp'; </SCRIPT>";
}
else
{
 echo "<INPUT TYPE=HIDDEN NAME='zoom'>";
}
//------------------------------------------------------------------------//

echo<<<END

<div id='mapdiv' style='position: absolute; left:$mapxOffset;
top:$mapyOffset;'>
<image onclick="dosubmit()" onmouseup=""
onmouseover="javascript:overmap=true;"onmouseout="javascript:overmap=false;"
  onmousemove="moving();" onmousedown="makeBox();" style="cursor:
crosshair; border: 2px inset lightsteelblue;" name="mapa"
src="$image_url"></div>
<table><tr class=screen style="left: 15px; top: 930px;"><td>
<strong>Cameras:</strong> $camnum    <strong>DMS:</strong>
$dmsnum    <strong>RTMS:</strong> $rtmsnum   
<strong>Incidents:</strong> $incnum   
<strong>Workzones:</strong> $worknum
</td>

<td align=right width=150><b>LATITUDE:</b> </td>
<td align=left width=150><div id=statusy></div></td>

<td align=left><b>LONGITUDE:</b> </td>
<td width=150><div id=statusx></div></td>

<td align=right><div id="theTime"></div></td>

</tr></table>

<div style="position: absolute; top: 10; border: 2px inset lightgray; left:
770;"> <img src="graphics/legend.gif"></div>

<div id="cameracontrols" style="visibility: hidden; width: 500; position:
absolute; top: -100; padding: 20px; left: -100; background: lightgrey;
border: 3px outset lightgray; z-index: 1"> </div>

END;

if ($weather_on != "")
{
 echo "<iframe ID=weather1 src='weather.html' width=254 height=254
scrolling=no style=\"overflow: visible; border: 1px outset darkgrey;
position: absolute; top: 662; left: 19;\"></iframe>";
}

echo<<<END
<div id=thismenu class=div></div>
<div id=workmenu class=div></div>
<div id=cctvmenu class=div></div>
<div id=webmenu class=div></div>
<div id=incidentmenu class=div></div>
<div id=securitymenu class=div></div>
<div id=dmsmenu class=div></div>
<div id=editmenu class=div></div>
<div id=dmssidemenu class=div></div>
$dms_menus

<div class=newIcon id="editINC">
<b>Edit Incident</b><br><br>
 Incident Information:   <input type=text name=inceditmessage><br><br>
     <input onclick=" document.mapform.editcam.value='incident';
document.mapform.submit(); slideOut(editINC);" type=button value="Edit">
<input onclick="document.mapform.editcam.value='false'; slideOut(editINC);"
type=button value="Cancel">
</div>

<div class=newIcon id="editWORK">
<b>Edit WorkZone</b><br><br>
 Workzone Information:   <input type=text name=workeditmessage><br><br>
     <input onclick=" document.mapform.editcam.value='workzone';
document.mapform.submit(); slideOut(editWORK);" type=button value="Edit">
<input onclick="document.mapform.editcam.value='false'; slideOut
(editWORK);" type=button value="Cancel">
</div>

<div class=newIcon id="incidents">
<b>New Incident</b><br><br>
 Incident Information:   <input type=text name=incmessage><br><br>
     <input onclick=" document.mapform.setcam.value='incident';
document.mapform.submit(); slideOut(incidents);" type=button
value="Create"> <input onclick="slideOut(incidents);" type=button
value="Cancel">
</div>

<div class=newIcon id="workzonediv">
<b>New Workzone</b><br><br>
 Workzone Information:   <input type=text name=workzonemessage><br><br>
     <input onclick=" document.mapform.setcam.value='workzone';
document.mapform.submit(); slideOut(workzonediv);" type=button
value="Create"> <input onclick="slideOut(workzonediv);" type=button
value="Cancel">
</div>

<div class=screen style="top:5; left:450">
LAKES & RIVERS:<input onclick="javascript: document.mapform.zoom.value=0;
document.mapform.mapx.value=620; document.mapform.mapy.value=420;
document.mapform.submit ();" type=checkbox name=lakes $lakes_on><br>
CITIES & TOWNS:<input onclick="javascript: document.mapform.zoom.value=0;
document.mapform.mapx.value=620; document.mapform.mapy.value=420;
document.mapform.submit ();" type=checkbox name=cities $cities_on><br>
WEATHER MAP:<input onclick="javascript: document.mapform.zoom.value=0;
document.mapform.mapx.value=620; document.mapform.mapy.value=420;
document.mapform.submit ();" type=checkbox name=weather $weather_on>
</div>

</form>

<div id=box style="visibility: hidden; position: absolute; height: 0px;
width: 0px; border: 2px solid red;"></div>

</body>
</html>
END;
?>