[OpenLayers-Dev] Select all features in a layer

Sat May 23 20:05:42 EDT 2009

I would like to draw several ploygons on a map then save the entire vector
layer out as a KML file.  I have hacked away at the code for the Vector
Formats example (http://openlayers.org/dev/examples/vector-formats.html), it
will do it for individual polygons but I can't seem to figure a way to do
the entire layer and the force the serialize function to run.  Any help (and
Code) would be greatly appreciated!

Here's what I've got so far...

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Josh's Openlayers Project</title>
        <style type="text/css">
        input, select, textarea {
            font: 0.9em Verdana, Arial, sans-serif;
        }

        #map {
            width: 512px;
            height: 225px;
            border: 1px solid #ccc;
        }
        #input {
            width: 512px;
        }
        #userkml {
            font-size: 0.85em;
            margin: 1em 0 1em 0;
            width: 100%;
            height: 10em;
        }
        #info {
            position: relative;
            padding: 2em 0;
            margin-left: 540px;
        }
        #output {
            font-size: 0.8em;
            width: 100%;
            border: 1px solid #ccc;
        }
        p {
            margin: 0;
            padding: 0.75em 0 0.75em 0;
        }
    </style>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>

    <script type="text/javascript">
        var map, vectors, formats;
		var proj = "EPSG:4326";
		alert(proj);
		var filetype = "kml";
		alert(filetype);
        function updateFormats() {
            var in_options = {
                'internalProjection': map.baseLayer.projection,
                'externalProjection': new
OpenLayers.Projection(OpenLayers.Util.getElement("proj"))
            };   
            var out_options = {
                'internalProjection': map.baseLayer.projection,
                'externalProjection': new
OpenLayers.Projection(OpenLayers.Util.getElement("proj"))
            };
            formats = {
              'in': {
                kml: new OpenLayers.Format.KML(in_options)
              }, 
              'out': {
                kml: new OpenLayers.Format.KML(out_options)
              } 
            };
        }
        function init(){
            map = new OpenLayers.Map('map');
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});

            vectors = new OpenLayers.Layer.Vector("Vector Layer");

            map.addLayers([wms, vectors]);
            map.addControl(new OpenLayers.Control.MousePosition());
            map.addControl(new OpenLayers.Control.EditingToolbar(vectors));

            var options = {
				multiple: true,
                onSelect: serialize
            };

            var select = new OpenLayers.Control.SelectFeature(vectors,
options);
            map.addControl(select);
            select.activate();

            updateFormats();

            map.setCenter(new OpenLayers.LonLat(0, 0), 1);
        }

        function serialize(feature) {
            var type = filetype;
			var shape = feature.geometry;
			var name = feature.attributes['Placemark','name'];
			alert(name);
			alert(shape);
            var str = formats['out'][type].write(feature);
            // not a good idea in general, just for this demo
            str = str.replace(/,/g, ', ');
            document.getElementById('output').value = str;
        }

		/*function clearMap() {
			var erase = new OpenLayers.Control.removeFeatures(features);
            map.addControl(erase);
            erase.activate();
			}*/

        function deserialize() {
            var element = document.getElementById('userkml');
            var type = filetype;
            var features = formats['in'][type].read(element.value);
            var bounds;
            if(features) {
                if(features.constructor != Array) {
                    features = [features];
                }
                for(var i=0; i<features.length; ++i) {
                    if (!bounds) {
                        bounds = features[i].geometry.getBounds();
                    } else {
                        bounds.extend(features[i].geometry.getBounds());
                    }

                }
                vectors.addFeatures(features);
                map.zoomToExtent(bounds);
                var plural = (features.length > 1) ? 's' : '';
                element.value = features.length + ' feature' + plural + '
added'
            } else {
                element.value = 'Bad input ' + type;
            }
        }

        // preload images
        (function() {
            var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
            var onImages = [];
            var offImages = [];
            for(var i=0; i<roots.length; ++i) {
                onImages[i] = new Image();
                onImages[i].src = "../images/" + roots[i] + "_on.png";
                offImages[i] = new Image();
                offImages[i].src = "../images/" + roots[i] + "_on.png";
            }
        })();

    </script>
  </head>
  <body onload="init()">
       <div id="map"></div>
        <div id="input">
            <p>Draw...</p>
           	<br />
			<textarea id="output"></textarea>
            <br /> 
            <textarea id="userkml">Paste Your KML Here...</textarea>

            <br />
            <input type="button" value="Add Your KML"
onclick="deserialize();" />
			<!--<input type="button" value="Clear Map" onclick="clearMap();" />-->
        </div>
</body>
</html>

-Josh
-- 
View this message in context: http://n2.nabble.com/Select-all-features-in-a-layer-tp2963573p2963573.html
Sent from the OpenLayers Dev mailing list archive at Nabble.com.