you can catch your opened(active) popup with this way:
map.popups[a]
you can change so update its content:
map.popups[a].contentHTML = 'Test Content';
map.popups[a].redraw();
or
map.popups[a].setContentHTML = 'Test Content'
you can show or hide your popup:
map.popups[a].show();
map.popups[a].hide();
you can update position of your popup:
map.popups[a].lonlat.lon = 10;
map.popups[a].lonlat.lat = 10;
map.popups[a].updatePosition();
for openlayers cluster you should check out Cluster Strategy Example here. Only one thing you should do is that define fillColor or externalGraphic for your cluster.
var style = new OpenLayers.Style({
pointRadius: "${radius}",
fillColor: "${getColor}",
fillOpacity: 0.8,
strokeColor: "#cc6633",
strokeWidth: 2,
strokeOpacity: 0.8
}, {
context: {
radius: function(feature) {
return Math.min(feature.attributes.count, 7) + 3;
},
getColor: function(feature) {
return // Your color selection logic;
}
}
});
As the last question, i dont understand very well what you want? but try to use removeFeatures instead of destroyFeatures....
i hope it helps you...
Use a Cluster Strategy in combination with a BBOX Strategy.
Perhaps you should come at this from a different angle. You are not far off with your Restrict Area idea. Don't dismiss this idea too soon as reducing the usefulness of the tool.
In your current approach you are loading all sites at once and then adding them to a vector layer. This means that at any one time there is the potential that the browser will contain more data than the user can see (depending on zoom level etc) as most data will be outside of their viewport bounds. You can utilise this fact to optimise the loading of the data into the user's browser by only requesting the data from the server that falls within the bounds of the user's current view.
You can implement a BBOX refresh strategy to your vector layer by adding a OpenLayers.Strategy.BBOX strategy object to your vector layer. When the view is invalidated (by a pan or zoom action) the BBOX strategy will cause the layer to request new data from the backend server. To implement this approach you will need to tweak your server side function to accept the additional parameters OpenLayers will add to the data request and you will also need to return the data in a format that can be read by OpenLayers. It is pretty straight forward to implement and you should notice a massive increase in performance across all browsers.
There is an example on the OpenLayers website of implementing the BBOX strategy. You could also consider adding a Cluster strategy for small scales when there is potentially large volumes of features returned from a request, or implement some scale dependent rendering of the layer.
Best Answer
I was using an outdated version of openlayers (2.01), updating to the latest version of openlayers solved the issue