How use a combo box to query a shp file and zoom to selected
element
Dott. Stefano Albanese
alba75 at YAHOO.COM
Mon Feb 28 08:51:49 EST 2005
Hi everybody,
hi hope u can help me in solving my troubles.
I'd like to add to my html file (where map is shown) a combo box storing names of a column in dbf file and to add the function of zooming to selected elements clicking on a "go button".
I know it has to be an easy procedure for expert users, but i'm new user so it would be nice from u if u want to help me.
I tryed some demos i found on the net but i wasn't able to solve.
So could u help me replying with some comments on how i can make this?
I will post u my codes, so that u can easily give me your solution to my problem.
I used to compile project the avein plugin for arcview.
The map shows a poligon theme where each poligon corrispond to the boundaries of towns (comuni) in an italian region. I would be able to search each town just clicking on its name in he combobox and to see the poligon zoomed and highlighted in red.
The shape file used is called "campanianew.shp"
Anyways if u want help me i can send to u a zip file with complete project.
Thanx in advance.
Steve Alba
-------------------initialisation file omitted--------------------------------
-------------------Legend file omitted (legend.html)-------------------
------------------map file (comuni.map.map)--------------------------------------------------------
#
# Start of map file - created Mon Feb 28 03:04:52 2005
#
NAME 'Comuni.map'
STATUS ON
PROJECTION
'init=epsg:4326'
END
SIZE 550 716
EXTENT 2407592.810 4418363.643 2597206.421 4603867.357
UNITS meters
SYMBOLSET 'C:/Programmi/Apache Group/Apache2/htdocs/avein2/symbols/symbset.sym'
FONTSET 'C:/Programmi/Apache Group/Apache2/htdocs/avein2/fonts/fonts.fnt'
IMAGECOLOR 255 255 255
#
# Start of web interface definition
#
WEB
LOG Comuni.map.log
TEMPLATE comuni.html
IMAGEPATH 'C:/Programmi/Apache Group/Apache2/htdocs/temp/'
IMAGEURL 'http://localhost/temp/'
EMPTY 'http://localhost/avein2/nothing.html'
# change this value to match your setup
METADATA
WMS_ONLINERESOURCE 'http://localhosthttp://localhost/cgi-bin/mapserv.exe?map=C:/Programmi/Apache Group/Apache2/htdocs/avein2/Comuni.map.map'
'WMS_SRS' 'epsg:4326'
WMS_ACCESSCONSTRAINTS 'none'
WMS_TITLE 'Comuni.map'
WMS_FEATURE_INFO_MIME_TYPE 'text/html'
WMS_ABSTRACT ''
END #METADATA
END #HEADER
#
# Properties for the querymap
#
QUERYMAP
SIZE 200 200
STATUS ON #OFF
STYLE HILITE
COLOR 255 0 0
END
#
# Start of reference map
#
REFERENCE
STATUS ON
IMAGE graphics/ref_map.jpg
SIZE 80 120
EXTENT 2407592.810 4418363.643 2597206.421 4603867.357
COLOR -1 -1 -1
OUTLINECOLOR 255 0 0
END #REFERENCE
#
# Start of legend
#
LEGEND
STATUS ON
KEYSIZE 16 8
TEMPLATE 'legend.html'
LABEL
COLOR 120 120 120
END # ENDE LABEL
END #LEGEND
#
# Start of scalebar
#
SCALEBAR
STATUS EMBED
POSITION lr
STYLE 0
INTERVALS 4
IMAGECOLOR 255 255 255
LABEL
COLOR 0 0 0
SIZE SMALL
END #ENDE LABEL
SIZE 200 3
TRANSPARENT ON
COLOR 0 0 0
BACKGROUNDCOLOR 255 170 0
OUTLINECOLOR 100 100 100
UNITS KILOMETERS
END #SCALEBAR
#
# Start of layer definitions #
#
LAYER
NAME 'Comuni'
GROUP 'Comuni'
DATA 'c:/programmi/apache group/apache2/htdocs/avein2/data/campanianew'
STATUS ON
TYPE Polygon
TEMPLATE 'Campanianew.shp_query.html'
METADATA
'WMS_SRS' 'epsg:4326'
WMS_TITLE 'Comuni'
WMS_FEATURE_INFO_MIME_TYPE 'text/html'
END
PROJECTION
'init=epsg:4326'
END
CLASSITEM 'Pr'
CLASS
NAME 'AV'
EXPRESSION /^AV/
COLOR 192 101 73
OUTLINECOLOR 0 0 0
END # CLASS
CLASS
NAME 'BN'
EXPRESSION /^BN/
COLOR 255 215 0
OUTLINECOLOR 0 0 0
END # CLASS
CLASS
NAME 'CE'
EXPRESSION /^CE/
COLOR 189 183 107
OUTLINECOLOR 0 0 0
END # CLASS
CLASS
NAME 'NA'
EXPRESSION /^NA/
COLOR 247 181 103
OUTLINECOLOR 0 0 0
END # CLASS
CLASS
NAME 'SA'
EXPRESSION /^SA/
COLOR 206 195 149
OUTLINECOLOR 0 0 0
END # CLASS
CLASS
NAME 'No Data'
EXPRESSION /^/
# COLOR -1 -1 -1
OUTLINECOLOR 0 0 0
END # CLASS
END # END OF LAYERFILE
LAYER # START OF ANNOTATION LAYERFILE
NAME 'Comuni'
DATA 'c:/programmi/apache group/apache2/htdocs/avein2/data/campanianew'
STATUS DEFAULT
TYPE ANNOTATION
METADATA
WMS_SRS 'epsg:4326'
WMS_TITLE 'Comuni.map'
WMS_FEATURE_INFO_MIME_TYPE 'text/html'
END
PROJECTION
'init=epsg:4326'
END
CLASSITEM 'Pr'
LABELITEM 'Campan2_id'
CLASS
NAME 'Comuni'
EXPRESSION /./
LABEL
TYPE TRUETYPE
FONT bluehigh
SIZE 8
ANGLE 0
COLOR 0 0 0
BUFFER 0
POSITION cc
PARTIALS TRUE
END
END # CLASS
END # END OF LAYERFILE
END # MAPFILE
-----------------------------------html file where map is shown (comuni.html)---------------------------------------
<html>
<head>
<meta http-equiv=Content-Language content=de>
<meta http-equiv=Content-Type content=text/html; charset=windows-1252>
<title>Comuni Campania</title>
<link rel=stylesheet type="text/css" href="http://localhost/avein2/java/map.css">
<style type='text/css'>
</style>
<script language="JavaScript" type="text/javascript" src="file:///C:/Programmi/Apache Group/Apache2/htdocs/avein2/java/codesnips.js"></script>
<script language="JavaScript" type="text/javascript" src="http://localhost/avein2/java/codesnips.js"></script>
<script language="JavaScript" type="text/javascript">
function knopfstatus(form)
{
var a = form.zoomdir.value;
with (document)
{
if (form.mode.value == "query") butinfo.src='http://localhost/avein2/graphics/icon_info_1.gif';
else if (a == "0") butpan.src='http://localhost/avein2/graphics/icon_recentre.png';
else if (a == "-1") butzoomout.src='http://localhost/avein2/graphics/icon_zoomout.png';
else if (a == "1") butzoomin.src='http://localhost/avein2/graphics/icon_zoomin.png';
else butinfo.src='http://localhost/avein2/graphics/icon_info.png';
}
}
</script>
<script language="JavaScript" type="text/javascript">
function kartengroesse()
{
var kartenmasse = '550 716';
var massarray = kartenmasse.split(' ');
if (ns4)
{
objContainer.width = massarray[0];
objContainer.height = massarray[1];
}
else
{
objContainer.style.width = massarray[0] + 'px';
objContainer.style.height = massarray[1] + 'px';
}
}
</script>
<script language="JavaScript" type="text/javascript">
function bilddaten(img)
{
if (ns4) return new fobjekt(img.x, img.y, 550, 716);
else
{
var canvas = new fobjekt(0, 0, 550, 716);
while(img)
{
canvas.x += img.offsetLeft;
canvas.y += img.offsetTop;
img = img.offsetParent;
}
return canvas;
}
}
</script>
</head>
<body onload="initialisierung('karte'); bildladen('ladestatus','hidden'); knopfstatus(document.mapserv); kartengroesse();" bgcolor='#DDDDDD' text='#3399FF' link='#3399FF' vlink='#3399FF' alink='#3399FF' leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'>
<div id=kartenlayer onmouseup="bildladen('ladestatus','visible');" style='width: 902; height: 21'></div>
<div id=zoomlayer><img src='img/dot.gif' width='1' height='1' border='0'></div>
<div id=ladestatus style='width: 90px; border: 1px none #000000; left: 350px; top: 335px;'>
<img src='http://localhost/avein2/graphics/smilies.gif' width='90' height='20'></div>
<!-- start Formular -->
<form method='post' action='http://localhost/cgi-bin/mapserv.exe' name='mapserv'>
<!-- start table 1 -->
<table border='0' width='800' height='570' bgcolor='#F4F4F4'>
<tr>
<!-- start table 2 -->
<td width='798'>
<table border='1' height='490' cellspacing='0' bgcolor='#FFFFEC'>
<tr>
<td height='30' colspan='5' bgcolor='#497ABC'>
<center><font face='Tahoma' color='#000000' size='2'><b>Comuni Campania</b></font></center>
</td>
</tr>
<tr>
<td height='22' colspan='5' bgcolor='#DDDDDD'>
<!-- start table 3 -->
<table align='center' bgcolor='#FFFFAA' border='1'>
<tr>
<td height='20' width='95' align='right'>
<b><font size='1' face='Tahoma' color='#000000'>Query
<a href="javascript:document.butinfo.src='http://localhost/avein2/graphics/icon_info_1.gif';document.butpan.src='http://localhost/avein2/graphics/icon_recentre.png';document.butzoomin.src='http://localhost/avein2/graphics/icon_zoomin.png';document.butzoomout.src='http://localhost/avein2/graphics/icon_zoomout.png';aktion('query',1);">
<img name='butinfo' src='http://localhost/avein2/graphics/icon_info.png' border='0' onLoad='' width='19' height='19' alt='Query attributes of theme'></a>
</font></b>
</td>
<td height='20' width='95' align='right'>
<b><font size='1' face='Tahoma' color='#000000'>Pan<a href="javascript:document.butinfo.src='http://localhost/avein2/graphics/icon_info.png';document.butpan.src='http://localhost/avein2/graphics/icon_recentre_1.png';document.butzoomin.src='http://localhost/avein2/graphics/icon_zoomin.png';document.butzoomout.src='http://localhost/avein2/graphics/icon_zoomout.png';aktion('browse',0);">
<img name='butpan' src='http://localhost/avein2/graphics/icon_recentre.png' border='0' onLoad='' alt='recenter map' width='19' height='19'></a></font></b>
</td>
<td height='20' width='95' align='right' >
<b><font face='Tahoma' size='1' color='#000000'>Zoom in<a href="javascript:document.butinfo.src='http://localhost/avein2/graphics/icon_info.png';document.butpan.src='http://localhost/avein2/graphics/icon_recentre.png';document.butzoomin.src='http://localhost/avein2/graphics/icon_zoomin_1.png';document.butzoomout.src='http://localhost/avein2/graphics/icon_zoomout.png';aktion('browse',1);">
<img name='butzoomin' src='http://localhost/avein2/graphics/icon_zoomin.png' border='0' onLoad='' alt='Zoom into map' width='19' height='19'></a></font></b>
</td>
<td height='20' width='95' align='right' >
<b><font face='Tahoma' size='1' color='#000000'>Zoom out<a href="javascript:document.butinfo.src='http://localhost/avein2/graphics/icon_info.png';document.butpan.src='http://localhost/avein2/graphics/icon_recentre.png';document.butzoomin.src='http://localhost/avein2/graphics/icon_zoomin.png';document.butzoomout.src='http://localhost/avein2/graphics/icon_zoomout_1.png';aktion('browse',-1);">
<img name='butzoomout' src='http://localhost/avein2/graphics/icon_zoomout.png' border='0' onLoad='' width='19' height='19' alt='Zoom out'></a></font></b>
</td>
<td height='20' width='95' align='right' >
<font color='#000000' size='1' face='Tahoma'><b>Zoom size</b></font><input type='text' name='zoomsize' size='1' value='2'>
</td>
<td height='20' width='95' align='right' >
<b><font size='1' face='Tahoma' color='#000000'>Reload<a href="javascript:neuladen();"><img src='http://localhost/avein2/graphics/icon_redraw.gif' width='19' height='19' name='butreload' border='0' alt='Karte aktualisieren'></a>
</font></b>
</td>
<td height='20' width='95' align='right' >
<b><font face='Tahoma' size='1' color='#000000'>Full extent<a href="javascript:startansicht();"><img name='butreload' src='http://localhost/avein2/graphics/icon_full.png' border='0' onLoad='' alt='Volle Ausdehnung' width='19' height='19'></a>
</font></b>
</td>
<td height='20' width='95' align='right' >
<b><font face='Tahoma' size='1' color='#000000'>Help<a href='http://localhost/avein2/hilfe.html','','scrollbars="yes,toolbar=no,menubar=no,width=520,height=400')'" target='blank_'><img src='http://localhost/avein2/graphics/icon_help.gif' width='19' height='19' border='0' name='Image1' alt='Mapserver-Hilfe'></a>
</font></b>
</td>
</table>
</td>
</tr>
<tr>
<td height='20' bgcolor='#DDDDDD'>
<p align='center'> </p>
</td>
<!-- start map & navigation window -->
<td height='20' bgcolor='#FFFFEC'>
<a href='javascript:move(-0.5,0.5)'>
<font color='#000000'>
<img border='0' src='http://localhost/avein2/graphics/nw.gif' width='15' height='15'></font></a>
</td>
<td height='20' bgcolor='#FFFFEC'>
<a href='javascript:move(0,0.5)'>
<p align='center'><font color='#000000'><img border='0' src='http://localhost/avein2/graphics/n.gif' width='15' height='15'></font></a>
</td>
<td height='20' bgcolor='#FFFFEC'>
<a href='javascript:move(0.5,0.5)'>
<font color='#000000'>
<img border='0' src='http://localhost/avein2/graphics/ne.gif' width='15' height='15'></font></a>
</td>
<td height='21' valign='top' align='center' bgcolor='#DDDDDD'>
<!-- link to GetCapabilities here -->
<font size='1' face='Tahoma' vlink='#000080' color='#000000'>WMS:
<a href='http://localhosthttp://localhost/cgi-bin/mapserv.exe?map=C:/Programmi/Apache Group/Apache2/htdocs/avein2/Comuni.map.map&request=getcapabilities&wmtver=1.0.0'>
GetCapabilities</font></a>
</td>
</tr>
<!-- reference map here -->
<tr>
<td bgcolor='#DDDDDD' valign='top' width='120' height='716'>
<font color='#000000'>
<input name='ref' type='image' src='[ref]' width='80' height='120' align = 'top' border='0' onClick="bildladen('ladestatus','visible');" alt='click here to navigate'>
</font></br>
<font size='1' face='Tahoma' color='#000000'><b>
</b></font>
</td>
<td rowspan='1' height='716' bgcolor='#FFFFEC'>
<a href='javascript:move(-0.5,0)'>
<font color='#000000'>
<img src='http://localhost/avein2/graphics/w.gif' width='15' height='15' border='0' alt='nach W'></font></a>
</td>
<!-- map window here -->
<td height='716' rowspan='1' valign='middle' align='center'>
<p align='center'><font color='#000000'>
<img name='karte' src='[img]' border='0' width='550' height='716'></font></td>
<td rowspan='1' height='716' bgcolor='#FFFFEC'>
<a href='javascript:move(0.5,0)'>
<font color='#000000'>
<img border='0' src='http://localhost/avein2/graphics/e.gif' width='15' height='15'></font></a>
</td>
<!-- legend window here -->
<td width='120' rowspan='2' valign='top' bgcolor='#DDDDDD'>
<div style=' width:160px; height: 716px;overflow-x:auto; overflow-y:auto;'>
<p align='left'><font color='#000000'><b><font face='Tahoma' size='1'>[legend]</font>
</div>
</td>
</tr>
<tr>
<td bgcolor='#DDDDDD' height='20'>
<font color='#000000'><b><font face='Tahoma' size='1'>
Scale 1 : <script>document.write(Math.round('[scale]'));</script></font>
</b></font>
</td>
<td height='20' bgcolor='#FFFFEC'>
<a href='javascript:move(-0.5,-0.5)'>
<font color='#000000'>
<img border='0' src='http://localhost/avein2/graphics/sw.gif' width='15' height='15'>
</font></a>
</td>
<td height='20' bgcolor='#FFFFEC'>
<a href='javascript:move(0,-0.5)'>
<p align='center'><font color='#000000'>
<img border='0' src='http://localhost/avein2/graphics/s.gif' width='15' height='15'>
</font></a>
</td>
<td bgcolor='#FFFFEC' height='20'>
<p align='center'>
<a href='javascript:move(0.5,-0.5)'>
<font color='#000000'>
<img border='0' src='http://localhost/avein2/graphics/se.gif' width='15' height='15'>
</font></a>
</td>
</tr>
<tr>
<td colspan='1' height='30' bgcolor='#DDDDDD'>
<b><font face='Tahoma' size='1' color='#000000'>©Engeo Studio</font></b><font size='2' face='Tahoma'>
</font>
</td>
<td colspan='3' height='30' bgcolor='#DDDDDD'>
<font color='#000000'>
</font>
</td>
<td colspan='1' height='30' bgcolor='#DDDDDD'>
<p align='center'><b><font color='#000000' size='2' face='Tahoma'>
<a href='http://mapserver.gis.umn.edu/index.html' target='_blank'>
<img border='0' src='http://localhost/avein2/graphics/ms_logo.png' width='35' height='19' align='right'></a></font><font color='#000000' face='Tahoma' size='1'>powered
by</font></b>
</p>
</td>
</tr>
</table>
</tr>
</table>
<input type='hidden' name='imgxy' value=''>
<input type='hidden' name='mapext' value=''>
<input type='hidden' name='imgext' value='[mapext]'>
<!-- [mapext] -->
<input type='hidden' name='map' value='C:/Programmi/Apache Group/Apache2/htdocs/avein2/Comuni.map.map'>
<input type='hidden' name='savequery' value='false'>
<input type='hidden' name='program' value='http://localhosthttp://localhost/cgi-bin/mapserv.exe'>
<!-- <input type='hidden' name='program' value='[program]'> -->
<input type='hidden' name='map_web_imagepath' value='[map_web_imagepath]'>
<input type='hidden' name='map_web_imageurl' value='[map_web_imageurl]'>
<input type='hidden' name='zoomdir' value='-1'>
<input type='hidden' name='mode' value='browse'>
<input type='hidden' name='imgbox' value=''>
<input type='hidden' name='imgsize' value='550 716'>
<input type='hidden' name='mapsize' value='550 716'>
</form>
</html>
-----------------------------------------query file for actual query funtion (clicking on element u can see attributes)-----------------------------------(Campanianew.shp_query.html)----------------
<div align='left'>
<table border='1' width='350' height='461' style='font-family: Tahoma; font-size: 10pt'><font face='Tahoma' size='2'>
<tr>
<td width='360' height='22' colspan='2' bordercolor='#CCCCCC' bgcolor='#E9E9E9'>
<p align='center'>
<b>Queryresults</b></font></p>
</td>
</tr>
<tr>
<td width='360' height='30' colspan='2' bordercolor='#CCCCCC' bgcolor='#E9E9E9'>
<align = 'center'>queried themeComuni</center>
</td>
</tr>
<tr>
<td width='180' height='30' bordercolor='#CCCCCC' bgcolor='#E9E9E9'>
Istat
</td>
<td width='180' height='30' bordercolor='#CCCCCC' bgcolor='#E9E9E9'>
[ISTAT]
</td>
</tr>
<tr>
<td width='180' height='30' bordercolor='#CCCCCC' bgcolor='#E9E9E9'>
Comune
</td>
<td width='180' height='30' bordercolor='#CCCCCC' bgcolor='#E9E9E9'>
[COMUNE]
</td>
</tr>
<tr>
<td width='180' height='30' bordercolor='#CCCCCC' bgcolor='#E9E9E9'>
Pr
</td>
<td width='180' height='30' bordercolor='#CCCCCC' bgcolor='#E9E9E9'>
[PR]
</td>
</tr>
<tr>
<td width='180' height='113'>
<p align='center'><img border='2' src='[img]' width='150' height='150'></p>
</td>
<td width='180' height='113'>
<p align='center'><b>The queried object
is colored in red</b></p>
</td>
</tr>
<tr>
<td width='360' height='30' colspan='2' bordercolor='#CCCCCC' bgcolor='#E9E9E9'>
<p align='center'>contact <b> <a href='http://www.terrestris.de/index_e.html' target='_blank'>www.terrestris.de</a>
</b>#<b> <a href='mailto:info at terrestris.de'>info at terrestris.de</a></b>
</td>
--------------------------------------------
Dott. Geol. Stefano Albanese
Via S. Giacomo 6
83022 Baiano (AV)
Italia
Tel.: +390818243143
+393471982279
---------------------------------
Do you Yahoo!?
Yahoo! Mail - Easier than ever with enhanced search. Learn more.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/mapserver-users/attachments/20050228/46b4e7be/attachment.html
More information about the mapserver-users
mailing list