[OpenLayers-Users] Best Practice

[Donald Kerr]

Hi all,

I've been working with OpenLayers for a short time and am a bit confused as
to how to approach the task I have due to the fact that there appears to be
so many ways of achieving my goal.

Currently I get the data from an asp.net asmx web service and parse through
the XML returned. This seems fine in terms of collecting the date but is
very slow in Internet Explorer - no surprise. I want to add markers to a
layer or layers with the ability to destroy each set of markers and reload
them as the user drags the map. I am using the following code:

//======================================
	for(var i=0; i<nodes.length; ++i) {
		var uniqueID =
nodes[i].getElementsByTagName('UniqueID')[0].firstChild.nodeValue;
		var category
=nodes[i].getElementsByTagName('Category')[0].firstChild.nodeValue;
		var description =
nodes[i].getElementsByTagName('Description')[0].firstChild.nodeValue;
		var easting =
nodes[i].getElementsByTagName('GridRef')[0].getElementsByTagName('Easting')[
0].firstChild.nodeValue;
		var northing =
nodes[i].getElementsByTagName('GridRef')[0].getElementsByTagName('Northing')
[0].firstChild.nodeValue;
		var lonLat = new OpenLayers.LonLat(easting, northing);
		var feature = new OpenLayers.Feature.Vector(
			new OpenLayers.Geometry.Point(lonLat.lon,
lonLat.lat),
			{
				uniqueID: uniqueID,
				category: category,
				description: description
			}
		);
		features.push(feature);
	}
	myDataLayer.addFeatures(features);
//======================================

This all works fine and I am showing different icons based on a StyleMap
that has the following code:

//======================================
	var lookup = {
		'Full': { externalGraphic: 'images/full.png' },
		'Partial': { externalGraphic: 'images/partial.png' },
		'Historic': { externalGraphic: 'images/historic.png' },
		'MSF': { externalGraphic: 'images/msf.png', graphicWidth:
25, graphicHeight: 25 }
	}
	vmdsDataStyleMap.addUniqueValueRules('default', 'category', lookup);
//======================================

I can detroy all features in the layer using the following code:

//======================================
	myDataLayer.removeFeatures(vmdsDataLayer.features);
//======================================

I have a list of things that I need to do and I am not sure of the best way
to achieve this is. In the first instance, I want to be able to destroy only
those features that are tagged, for example, 'Full' under 'category'. So
that I can toggle on/off the features that I want to view. Is adding these
all to one layer the best way to achieve this or should I each category to a
new vector layer? Indeed, is a vector layer the best way to achieve this?

In addidion to the above, I need to do the following:

1. Add a label to each icon that I can toggle on and off using some external
javascript.

2. Change the css of the above label to show it bigger on mouseover or, if
the labels aren't toggled on, simply show the label onmouseover.

3. Redirect the browser to a different url using the onclick of the icon.

4. I can already set the icon up to be draggable but I need to save new
coordinates to a database onmouseup. I need to capture the icon's 'UniqueID'
onmouseup to do that, I assume. How is this done.

Is a vector layer suitable for what I am trying to do or is there a better
an easier way to do the above?

Any help or advice would be very much appreciated.

Many thanks.

Regards,

Donald