<table cellspacing="0" cellpadding="0" border="0" ><tr><td valign="top" style="font: inherit;"><DIV>Dear Andreas,</DIV>
<DIV> </DIV>
<DIV>Formerly, I call go() function (see snippet below) which handles the map.setCenter, it seems that this function doesn't react to the change of lonlat value in drop down list. I have two layers, my base layer is a big quickbird image tiled into 6 zoom levels and other layer is WMS layer with hundreds of river names. Drop down list should help user to pin point selected river in the quickbird image.</DIV>
<DIV> </DIV>
<DIV>When I call init() function it doeas react, but create a series of map which doesn't overwrite each other. I certainly do not want to create new map every time I change lonlat value, it will double/tripple processing time.</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>-----------------</DIV>
<DIV> </DIV>
<DIV>function init(){ </DIV>
<DIV> </DIV>
<DIV>var options = { </DIV>
<DIV>theme: null, </DIV>
<DIV>maxExtent: new OpenLayers.Bounds(225389.527874, 9627709.46055, 244613.714826, 9639853.34683 ),</DIV>
<DIV>maxResolution: 103.338482,</DIV>
<DIV>projection: 'EPSG:4326',</DIV>
<DIV>units: 'm',</DIV>
<DIV>controls: [ </DIV>
<DIV>new OpenLayers.Control.LayerSwitcher(), </DIV>
<DIV>new OpenLayers.Control.MousePosition(), </DIV>
<DIV>new OpenLayers.Control.PanZoom(), </DIV>
<DIV>new OpenLayers.Control.ScaleLine() </DIV>
<DIV>] </DIV>
<DIV>}; //option</DIV>
<DIV> </DIV>
<DIV>var mapBounds = new OpenLayers.Bounds( 225389.527874, 9627709.46055, 244613.714826, 9639853.34683 );</DIV>
<DIV> </DIV>
<DIV>var map = new OpenLayers.Map('map', options ); </DIV>
<DIV> </DIV>
<DIV>var layer = new OpenLayers.Layer.TMS( "TMS Layer","",</DIV>
<DIV>{ url: '', serviceVersion: '.', layername: '.', alpha: true,</DIV>
<DIV>type: 'png', getURL: overlay_getTileURL });</DIV>
<DIV> </DIV>
<DIV></DIV>
<DIV>var river = new OpenLayers.Layer.WMS(</DIV>
<DIV>"topp:sungai_nr - river", "http://localhost:8080/geoserver/wms", {layers: 'topp:sungai_nr',</DIV>
<DIV>format: 'image/png',transparent:'true'},{'opacity': 0.2}); </DIV>
<DIV> </DIV>
<DIV></DIV>
<DIV>map.addLayers([layer, river]); </DIV>
<DIV> </DIV>
<DIV>map.addControl(new OpenLayers.Control.Scale($('scale')));</DIV>
<DIV>map.setCenter(new OpenLayers.LonLat(231064.944,9631783.43),4);</DIV>
<DIV>} //function init</DIV>
<DIV> </DIV>
<DIV>function go() {</DIV>
<DIV>//Get the selected value for lonlat</DIV>
<DIV>var lonlat = document.getElementById('lonlat').options[document.getElementById('lonlat').selectedIndex].value;</DIV>
<DIV>// Parse the lonlat to get the longitude</DIV>
<DIV>var longitude = lonlat.substring(0,lonlat.indexOf(','));</DIV>
<DIV>// Parse the lonlat to get the latitude</DIV>
<DIV>var latitude = lonlat.substring(lonlat.indexOf(',')+1,lonlat.length);</DIV>
<DIV>// set Center</DIV>
<DIV>map.setCenter(new OpenLayers.LonLat(longitude,latitude),zoom); </DIV>
<DIV>}</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>function overlay_getTileURL(bounds) {</DIV>
<DIV>var res = this.map.getResolution();</DIV>
<DIV>var x = Math.round((bounds.left - this.maxExtent.left) / (res * this...tileSize.w));</DIV>
<DIV>var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));</DIV>
<DIV>var z = this.map.getZoom();</DIV>
<DIV>if (x >= 0 && y >= 0) {</DIV>
<DIV>return this.url + z + "/" + x + "/" + y + "." + this.type; </DIV>
<DIV>} else {</DIV>
<DIV>return <A href="http://www.maptiler.org/img/none.png" target=_blank rel=nofollow><SPAN class=yshortcuts id=lw_1252067997_0>http://www.maptiler.org/img/none.png</SPAN></A>;</DIV>
<DIV>}</DIV>
<DIV>}</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV></DIV>
<DIV>function getWindowHeight() {</DIV>
<DIV>if (self.innerHeight) return self.innerHeight;</DIV>
<DIV>if (document.documentElement && document.documentElement.clientHeight)</DIV>
<DIV>return document.documentElement.clientHeight;</DIV>
<DIV>if (document.body) return document.body.clientHeight;</DIV>
<DIV>return 0;</DIV>
<DIV>}</DIV>
<DIV>function getWindowWidth() {</DIV>
<DIV>if (self.innerWidth) return self.innerWidth;</DIV>
<DIV>if (document.documentElement && document.documentElement.clientWidth)</DIV>
<DIV>return document.documentElement.clientWidth;</DIV>
<DIV>if (document.body) return document.body.clientWidth;</DIV>
<DIV>return 0;</DIV>
<DIV>}</DIV>
<DIV> </DIV>
<DIV>function resize() { </DIV>
<DIV>var map = document.getElementById("map"); </DIV>
<DIV>var header = document.getElementById("header"); </DIV>
<DIV>var subheader = document.getElementById("subheader"); </DIV>
<DIV>map.style.height = (getWindowHeight()-80) + "px";</DIV>
<DIV>map.style.width = (getWindowWidth()-20) + "px";</DIV>
<DIV>header.style.width = (getWindowWidth()-20) + "px";</DIV>
<DIV>subheader.style.width = (getWindowWidth()-20) + "px";</DIV>
<DIV>if (map.updateSize) { map.updateSize(); };</DIV>
<DIV>} </DIV>
<DIV> </DIV>
<DIV>onresize=function(){ resize(); };</DIV>
<DIV></script> </DIV>
<DIV></head> </DIV>
<DIV> </DIV>
<DIV><body onload="init()"></DIV>
<DIV><p>River Name:</DIV>
<DIV><select id="lonlat" onchange="go()"></DIV>
<DIV><option value="232064.944, 9631783.43">River A</option></DIV>
<DIV><option value="231064.944, 9631783.43">River B</option></DIV>
<DIV><option value="230064.944, 9631783.43">River C</option></DIV>
<DIV><option value="229064.944, 9631783.43">River D</option></DIV>
<DIV><option value="228064.944, 9631783.43">River E</option></DIV>
<DIV></select></DIV>
<DIV></p></DIV>
<DIV></body></DIV>
<DIV></html> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>Kind regards,</DIV>
<DIV> </DIV>
<DIV>surya<BR><BR>--- On <B>Tue, 9/8/09, Andreas Hocevar <I><ahocevar@opengeo.org></I></B> wrote:<BR></DIV>
<BLOCKQUOTE style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: rgb(16,16,255) 2px solid"><BR>From: Andreas Hocevar <ahocevar@opengeo.org><BR>Subject: Re: [OpenLayers-Users] Ovewriting previous map<BR>To: "Surya Tarigan" <surya.tarigan@yahoo.com><BR>Cc: users@openlayers.org<BR>Date: Tuesday, September 8, 2009, 8:54 AM<BR><BR>
<DIV class=plainMail>What do you do with the lonlat values in your init function? I assume<BR>you just center the map there.<BR><BR>If that is the case, change the onchange handler of your dropdown to do<BR>something like<BR><BR>map.setCenter(<lon, lat from your selected option here>);<BR><BR>If you have something like map = new OpenLayers.Map(...); in your init<BR>function, you will create a new map instance every time you run it,<BR>which you obviously do not want.<BR><BR>Regards,<BR>Andreas.<BR><BR>Surya Tarigan wrote:<BR>> Dear List,<BR>> <BR>> I need help, when I,m passing lonlat value to init() function from<BR>> html drop downlist see snippet below), the next map will be displayed<BR>> beneath previous map whithout overwriting it. What statement do I <BR>> have to ad to the script to overwite previous map every time I' select<BR>> new latlon value from dropdownlist?<BR>> <BR>>
sincerely<BR>> <BR>> surya<BR>></DIV></BLOCKQUOTE></td></tr></table><br>