example with rubberband
Sandeep Bashyal
gis at UNDPHAIS.ORG.NP
Sun Oct 17 22:53:10 PDT 2004
On Fri, 15 Oct 2004 10:21:03 +0300, temiz <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 <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.
--
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
More information about the MapServer-users
mailing list