[OpenLayers-Users] Automatic zooming to map points based on elements selected from drop-down lists

Fri Sep 4 08:44:57 EDT 2009

Dear Jerome,

I don't know what is wrong with my script, the function go() in the script below doesn't react to the event on the dropdown list (onchange). I have two layers one wms from Geoserver and the other one tiling quickbird as a base layers. Could you please so  kindly take a look at my script below. 

Thank you, surya

........................

<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js" type="text/javascript">
</script> 

<script type="text/javascript"> 
var map;

// avoid pink tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

function init(){ 
var options = { 
theme: null, 
maxExtent: new OpenLayers.Bounds(225389.527874, 9627709.46055, 244613.714826, 9639853.34683 ),
maxResolution: 103.338482,
projection: 'EPSG:4326',
units: 'm',
controls: [ 
new OpenLayers.Control.LayerSwitcher(), 
new OpenLayers.Control.MousePosition(), 
new OpenLayers.Control.PanZoom(), 
new OpenLayers.Control.ScaleLine() 
] 
}; //option

var mapBounds = new OpenLayers.Bounds( 225389.527874, 9627709.46055, 244613.714826, 9639853.34683 );
var map = new OpenLayers.Map('map', options ); 
var layer = new OpenLayers.Layer.TMS( "TMS Layer","",
{ url: '', serviceVersion: '.', layername: '.', alpha: true,
type: 'png', getURL: overlay_getTileURL });

var river = new OpenLayers.Layer.WMS(
"topp:sungai_nr - river", "http://localhost:8080/geoserver/wms", {layers: 'topp:sungai_nr',
format: 'image/png',transparent:'true'},{'opacity': 0.2}); 

map.addLayers([layer, river]); 
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.setCenter(new OpenLayers.LonLat(231064.944,9631783.43),4);
} //function init

function go() {
//Get the selected value for lonlat
var lonlat = document.getElementById('lonlat').options[document.getElementById('lonlat').selectedIndex].value;
// Get the selected value for zoom level
var zoom = document.getElementById('zoom').options[document.getElementById('zoom').selectedIndex].value;
// Parse the lonlat to get the longitude
var longitude = lonlat.substring(0,lonlat.indexOf(','));
// Parse the lonlat to get the latitude
var latitude = lonlat.substring(lonlat.indexOf(',')+1,lonlat.length);
// set Center
map.setCenter(new OpenLayers.LonLat(longitude,latitude),zoom); 
}

function overlay_getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
var z = this.map.getZoom();
if (x >= 0 && y >= 0) {
return this.url + z + "/" + x + "/" + y + "." + this.type; 
} else {
return http://www.maptiler.org/img/none.png;
}
}

function getWindowHeight() {
if (self.innerHeight) return self.innerHeight;
if (document.documentElement && document.documentElement.clientHeight)
return document.documentElement.clientHeight;
if (document.body) return document.body.clientHeight;
return 0;
}
function getWindowWidth() {
if (self.innerWidth) return self.innerWidth;
if (document.documentElement && document.documentElement.clientWidth)
return document.documentElement.clientWidth;
if (document.body) return document.body.clientWidth;
return 0;
}

function resize() { 
var map = document.getElementById("map"); 
var header = document.getElementById("header"); 
var subheader = document.getElementById("subheader"); 
map.style.height = (getWindowHeight()-80) + "px";
map.style.width = (getWindowWidth()-20) + "px";
header.style.width = (getWindowWidth()-20) + "px";
subheader.style.width = (getWindowWidth()-20) + "px";
if (map.updateSize) { map.updateSize(); };
} 

onresize=function(){ resize(); };
</script> 
</head> 

<body onload="init()">
<p>River Name:
<select id="lonlat" onchange="go()">
<option value="232064.944, 9631783.43">River A</option>
<option value="231064.944, 9631783.43">River B</option>
<option value="230064.944, 9631783.43">River C</option>
<option value="229064.944, 9631783.43">River D</option>
<option value="228064.944, 9631783.43">River E</option>
</select>
</p>
<p>Tentukan besar zoom :
<select id="zoom" onchange="go()">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</p>
</body>
</html> 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20090904/37b55623/attachment.html