[OpenLayers-Users] Ovewriting previous map

[Andreas Hocevar]

Hi,

see my comments inline, and use a javascript debugger like Firebug for
Firefox to see what is going on.

Surya Tarigan wrote:
>
> 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.
>  
> 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.
>  
>  
>  
>  
> -----------------
>  
> 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 );
>

map is local to the init function here, so it won't be available in the
go() function. Remove "var" to make it global.

>  
> 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;
> // 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);
>

The above will fail because your map is not known to the go() function.
See my comment above in the init function.

Also, save yourself some lines of code: instead of calculating longitude
and latitude like above, use

map.setCenter(OpenLayers.LonLat.fromString(lonlat);

Regards,
Andreas.

-- 
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.