[UMN_MAPSERVER-USERS] zooming problem continues

Tue Oct 19 10:28:28 EDT 2004

Temiz,

You need an onMouseMove event in your image to draw the rectangle and have
minx != maxx:

<input type="image" id="mapa" name="mapa"

src="<?php echo $image_url?>" onMouseDown="startRubber(event)"

onMouseMove="moveRubber(event) onMouseUp="stopRubber(event)" >

Skweda O'Bomsawin

-----Message d'origine-----
De : UMN MapServer Users List [mailto:MAPSERVER-USERS at LISTS.UMN.EDU] De la
part de temiz
Envoyé : 19 octobre 2004 09:09
À : MAPSERVER-USERS at LISTS.UMN.EDU
Objet : [UMN_MAPSERVER-USERS] zooming problem continues

thank you 
I followed the procedure you offered
I can draw rubberband. But zooming is not still working. 

I will appreciate if you find what the wrong is ?

regards

here is the complete php code:

<?php
if (!extension_loaded('php_mapscript.so')) {
if (!dl('php_mapscript.so')) {
exit;
}
}

$map_file="./kara.map";
global $map;
global $result;
$map = ms_newMapObj($map_file);

$jeolayer = $map->getLayerByName("jeo");
$jeoClass0 = $jeolayer->getClass(9);
$jeoStyle = $jeoClass0->getStyle("*");
$jeoStyle->color->setRGB(0,255,0);
$jeolayer ->set("status",1);

if ( isset($HTTP_POST_VARS["mapa_x"]) && isset($HTTP_POST_VARS["mapa_y"])
&& !isset($HTTP_POST_VARS["full"]) ) {

$extent_to_set = explode(" ",$HTTP_POST_VARS["extent"]);

$map->setextent($extent_to_set[0],$extent_to_set[1],
$extent_to_set[2],$extent_to_set[3]);

$my_extent = ms_newrectObj();

$my_extent->setextent($extent_to_set[0],$extent_to_set[1],
$extent_to_set[2],$extent_to_set[3]);

$zoom_rect = ms_newRectObj();

$zoom_rect->setextent($_POST["mapa_x"] - $_POST["w"],$_POST["mapa_y"],
$_POST["mapa_x"],$_POST["mapa_y"]-$_POST["h"]);

$map->zoomrectangle($zoom_rect,$map->width,$map->height,$my_extent);

}

$image=$map->draw();
$image_url=$image->saveWebImage();
$extent_to_html = $map->extent->minx." ".$map->extent->miny." "
.$map->extent->maxx." ".$map->extent->maxy;

?>

<html>
<head>
<title>karabük</title>

<STYLE>
#rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 1px solid #ff0000;
}
</STYLE>

<SCRIPT>

function startRubber (evt) {
if (document.all) {
var r = document.all.rubberBand;
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
}

else if (document.layers) {
var r = document.rubberBand;
r.clip.width = 0; r.clip.height = 0;
r.left = evt.x;
r.top = evt.y;
r.visibility = 'show';
}

else if (document.getElementById) {
var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
}
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = moveRubber;
}

function moveRubber (evt) {
if (document.all) {
var r = document.all.rubberBand;
r.style.width = event.x - r.style.pixelLeft - 2;
r.style.height = event.y - r.style.pixelTop - 2;
var f = document.forms('viewmap');
f.w.value = r.style.width;
f.h.value = r.style.height;
}

else if (document.layers) {
var r = document.rubberBand;
r.clip.width = evt.x - r.left - 2 ;
r.clip.height = evt.y - r.top - 2;
r.document.open();
r.document.write('<table width="'
+ r.clip.width + '" height="' + r.clip.height
+ '" BORDER="1"><tr><td><\/td><\/tr><\/table>');
r.document.close();
var f = document.forms('viewmap');
f.w.value = r.clip.width;
f.h.value = r.clip.height;
}

else if (document.getElementById) {
var r = document.getElementById('rubberBand');
r.style.width = evt.clientX - parseInt(r.style.left) - 2;
r.style.height = evt.clientY - parseInt(r.style.top) - 2;
var ht = document.getElementById('h');
var wt = document.getElementById('w');
wt.value = r.style.width;
ht.value = r.style.height;
}
}

function stopRubber (evt) {
document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = null;
}

</SCRIPT>

</head>

<body>

<CENTER>

<table cellpadding="1" cellspacing="1" border="1" >
<FORM name="viewmap" id="viewmap" METHOD=POST ACTION=<?php echo
$HTTP_SERVER_VARS['PHP_SELF']?>>
<tr>
<td colspan="4">zoom</td>
</tr>
<tr>
<td rowspan="3" colspan="2" width="50%">

<input type="hidden" name="h" id="h" value="0" >
<input type="hidden" name="w" id="w" value="0" >

<input type="image" id="mapa" name="mapa"
src="<?php echo $image_url?>" onMouseDown="startRubber(event)"
onMouseUp="stopRubber(event)" >
</td>
<td width="5%"></td>
<td bgcolor="#ffffcc" > orkun </td>

</tr>
<tr>
<td></td>
<td bgcolor="#e8e9ea"> ORKUN </td>

</tr>
<tr>
<td>

</td>
<td>

</td>

</tr>
<tr>
<td>coordinat<td>
<td><td>

</tr>
<INPUT TYPE=HIDDEN NAME="extent" VALUE="<?php echo $extent_to_html?>">
</form>
<div id="rubberBand" name="rubberBand"></div>

</table>

</body>

</html>

Sandeep Bashyal wrote:

On Fri, 15 Oct 2004 10:21:03 +0300, temiz  <mailto:temiz at deprem.gov.tr>
<temiz at deprem.gov.tr> wrote: 

hello Mr.Sandeep, 

thank you for your help. 
I have examined the javascript code you suggested. 
Unfortunately I have also little knowledge about javascript. So, I coudn't 
manage to get rectangle coordinates drawn as rubberband. 
I think getting coord. values is the way for zooming. 

Do you have any idea about how coord values can get? 

best wishes 

Bashyal wrote: 

On Thu, 14 Oct 2004 17:13:37 +0300, temiz  <mailto:temiz at DEPREM.GOV.TR>
<temiz at DEPREM.GOV.TR> wrote: 

hello 

for zooming, I want to build rubberband. 
How can I get an example which contain rubberband for zooming ? 

kind regards 

Ahmet temiz 

______________________________________ 
Inflex - installed on mailserver for domain @deprem.gov.tr 
Queries to: postmaster at deprem.gov.tr 

______________________________________ 
The views and opinions expressed in this e-mail message are the sender's 
own 
and do not necessarily represent the views and the opinions of 
Earthquake Research Dept. 
of General Directorate of Disaster Affairs. 

Bu e-postadaki fikir ve gorusler gonderenin sahsina ait olup, yasal 
olarak T.C. 
B.I.B. Afet Isleri Gn.Mud. Deprem Arastirma Dairesi'ni baglayici 
nitelikte degildir. 

Ahmet, 

I've found the rubberband zoom box by Gayathri Swaminathan to be simple 
and quite useful. You can download it here: 
http://mapserver.gis.umn.edu/user_utilities/RBand.zip 
Just call startRubber and stopRubber functions on mouseDown and mouseUp 
events on the main map image and put hidden form elements containing the 
width and height of the "rubberband" layer. 

Works pretty well for my limited knowledge of javascript and mapserver :). 

Regards. 

-- Sandeep Bashyal 
-- National GIS Officer 
Humanitarian Assistance Information System (HAIS) 
United Nations (NEP/01/008) 
UN House, Pulchowk 
G.P.O. Box 107 
Kathmandu, Nepal 
Tel: (+977) 01 5543957 
(+977) 01 5554304 
Cell:(+977) 9841270854 
Fax: (+977) 01 5528059 
-------------------------------------------------- 
mailto:gis at undphais.org.np 
mailto:sandeep at earthmapping.com 
http://www.undp.org.np 

______________________________________ 
Inflex - installed on mailserver for domain @deprem.gov.tr 
Queries to: postmaster at deprem.gov.tr 

______________________________________ 
The views and opinions expressed in this e-mail message are the sender's own

and do not necessarily represent the views and the opinions of Earthquake
Research Dept. 
of General Directorate of Disaster Affairs. 

Bu e-postadaki fikir ve gorusler gonderenin sahsina ait olup, yasal olarak
T.C. 
B.I.B. Afet Isleri Gn.Mud. Deprem Arastirma Dairesi'ni baglayici nitelikte
degildir. 

Ahmet, 

I'm new to javascript too and could not quite understand how the rubberband
zoom box works in the included example file. This is how I improvised: 

Contents of rubberband.js: 
--------------------------- 
function startRubber (evt) { 
if (document.all) { 
var r = document.all.rubberBand; 
r.style.width = 0; 
r.style.height = 0; 
r.style.pixelLeft = event.x; 
r.style.pixelTop = event.y; 
r.style.visibility = 'visible'; 
} 

else if (document.layers) { 
var r = document.rubberBand; 
r.clip.width = 0; r.clip.height = 0; 
r.left = evt.x; 
r.top = evt.y; 
r.visibility = 'show'; 
} 

else if (document.getElementById) { 
var r = document.getElementById('rubberBand'); 
r.style.width = 0; 
r.style.height = 0; 
r.style.left = evt.clientX + 'px'; 
r.style.top = evt.clientY + 'px'; 
r.style.visibility = 'visible'; 
} 
document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = moveRubber; 
} 

function moveRubber (evt) { 
if (document.all) { 
var r = document.all.rubberBand; 
r.style.width = event.x - r.style.pixelLeft - 2; 
r.style.height = event.y - r.style.pixelTop - 2; 
var f = document.forms('viewmap'); 
f.w.value = r.style.width; 
f.h.value = r.style.height; 
} 

else if (document.layers) { 
var r = document.rubberBand; 
r.clip.width = evt.x - r.left - 2 ; 
r.clip.height = evt.y - r.top - 2; 
r.document.open(); 
r.document.write('<table width="' 
+ r.clip.width + '" height="' + r.clip.height 
+ '" BORDER="1"><tr><td><\/td><\/tr><\/table>'); 
r.document.close(); 
var f = document.forms('viewmap'); 
f.w.value = r.clip.width; 
f.h.value = r.clip.height; 
} 

else if (document.getElementById) { 
var r = document.getElementById('rubberBand'); 
r.style.width = evt.clientX - parseInt(r.style.left) - 2; 
r.style.height = evt.clientY - parseInt(r.style.top) - 2; 
var ht = document.getElementById('h'); 
var wt = document.getElementById('w'); 
wt.value = r.style.width; 
ht.value = r.style.height; 
} 
} 

function stopRubber (evt) { 
document.releaseEvents(Event.MOUSEMOVE); 
document.onmousemove = null; 
} 

Contents of the form: 
--------------------------------------------------- 
<form name="viewmap" id="viewmap" method="post" 
action="<?php echo $HTTP_SERVER_VARS['PHP_SELF'] ?>"> 
<input type="hidden" name="h" id="h" value="0" /> 
<input type="hidden" name="w" id="w" value="0" /> 
<input type="image" id="mapa" name="mapa" 
src="<?php echo $image_url?>" onMouseDown="startRubber(event)" 
onMouseUp="stopRubber(event)" /> 
</form> 
<div id="rubberBand" name="rubberBand"></div> 

Zooming to rectangle (I'm using php mapscript): 
----------------------------------------------------- 
$zoom_rect = ms_newRectObj(); 
$zoom_rect->setextent($_POST["mapa_x"] - $_POST["w"],$_POST["mapa_y"], 
$_POST["mapa_x"],$_POST["mapa_y"]-$_POST["h"]); 
$map->zoomrectangle($zoom_rect,$map->width,$map->height,$current_extent); 
//where $current_extent is a rectangular object with the current extent of
the map. 

Hope this helps a bit. I've tested it on IE6, NS7, Opera7.5 and Firefox0.93.

Regards. 

______________________________________
Inflex - installed on mailserver for domain @deprem.gov.tr
Queries to: postmaster at deprem.gov.tr

______________________________________
The views and opinions expressed in this e-mail message are the sender's own
and do not necessarily represent the views and the opinions of Earthquake
Research Dept.
of General Directorate of Disaster Affairs.

Bu e-postadaki fikir ve gorusler gonderenin sahsina ait olup, yasal olarak
T.C.
B.I.B. Afet Isleri Gn.Mud. Deprem Arastirma Dairesi'ni baglayici nitelikte
degildir.

---
Incoming mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.777 / Virus Database: 524 - Release Date: 2004-10-14

---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.777 / Virus Database: 524 - Release Date: 2004-10-14

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/mapserver-users/attachments/20041019/4aaf7a2b/attachment.html