[OpenLayers-Users] Ovewriting previous map

Tue Sep 8 05:40:47 EDT 2009

Dear Andreas,

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

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

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>
</body>
</html> 

Kind regards,

surya

--- On Tue, 9/8/09, Andreas Hocevar <ahocevar at opengeo.org> wrote:

From: Andreas Hocevar <ahocevar at opengeo.org>
Subject: Re: [OpenLayers-Users] Ovewriting previous map
To: "Surya Tarigan" <surya.tarigan at yahoo.com>
Cc: users at openlayers.org
Date: Tuesday, September 8, 2009, 8:54 AM

What do you do with the lonlat values in your init function? I assume
you just center the map there.

If that is the case, change the onchange handler of your dropdown to do
something like

map.setCenter(<lon, lat from your selected option here>);

If you have something like map = new OpenLayers.Map(...); in your init
function, you will create a new map instance every time you run it,
which you obviously do not want.

Regards,
Andreas.

Surya Tarigan wrote:
> Dear List,
>  
> I need help, when I,m passing lonlat value to init() function from
> html drop downlist see snippet below), the next map will be displayed
> beneath previous map whithout overwriting it.  What statement do I 
> have to ad to the script to overwite previous map every time I' select
> new latlon value from dropdownlist?
>  
> sincerely
>  
> surya
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20090908/0d187e55/attachment.html