[GIS] Some Help to select some features from a vector layer

Question

I have a vector layer (kml) that has some point with scientific name of plants and animals, some description of the place where the people saw them and the coordinates.

Basically the table associated with the kml is something like this:

scientific name//description//lat//long

I'm working with OpenLayers, and I really appreciate if you can help to figure out about how to write the correct code:

application needed:

When I select a feature (from vector 3), All other features that share the same scientific name are highlighted too.

Here is my html code:

///////////////////////////////////////////////

<script src="http://www.openlayers.org/dev/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBm6IRXcFDkoNusHY6tK_eJacDjMLJevyU&sensor=true"></script>
<script type="text/javascript">

    var lat = 10.42500;
    var lon = -84.0160;
    var zoom = 15;
    var map; //complex object of type OpenLayers.Map

//—————————————General map start—————————-//

    function init() {
        map = new OpenLayers.Map("map", {
            controls: [new OpenLayers.Control.Navigation(),
                       new OpenLayers.Control.PanZoomBar(),
                       new OpenLayers.Control.Attribution(),
                       new OpenLayers.Control.MousePosition()],
            maxResolution: 156543.0399,
            numZoomLevels: 20,
            units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
        });

//—————————————General Mapa end—————————-//

//—————————————APIs Start—————————-//

        var capaGoogle = new OpenLayers.Layer.Google("Google Streets", 
                             { numZoomLevels: 20 });
        var llave = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

        var capaBing = new OpenLayers.Layer.Bing({ key: llave, type: "Aerial" });

        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Open Street Maps: Caminos");

//—————————————APIs END—————————-//

//——————————–Vector 1 start———————————–//

        var contornoLaselva = new OpenLayers.Layer.Vector(
            "Contorno La Selva",
            {
                projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP(
                {
                    url: "La Selva_contorno_poli.kml",
                    format: new OpenLayers.Format.KML(
                    {
                        extractStyles: true,
                        extractAttributes: true,
                        maxDepth: 1

                    })
                })
            });

//——————————–Vector 1 end—————————————–//

//——————————–Vector 2 Start————————————–//

        var senderosLaSelva = new OpenLayers.Layer.Vector(
            "Senderos de la Selva",
            {
                projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP(
                {
                    url: "LaSelvaSenderos.kml",
                    format: new OpenLayers.Format.KML(
                    {
                        //extractStyles: true,
                        extractAttributes: true,
                        maxDepth: 1

                    })
                })
            });

//——————————–Vector 2 end—————————————//

//——————————–Vector 2 stlye start——————————-//

      var senderosLaSelva_estilo = new OpenLayers.Style ({
          'strokeColor': '#000000',  //Define el color de la capa
          'strokeWidth': 1  //Grosor de la linea
          });

      var senderosLaSelva_estilo_mapa = new OpenLayers.StyleMap ({
          'default': senderosLaSelva_estilo
          });          
      senderosLaSelva.styleMap = senderosLaSelva_estilo_mapa;

//——————————–Vector 2 style end——————————-//

//——————————–Vector 3 and style start————————-//

        var ocurrenciasLaselva = new OpenLayers.Layer.Vector("Especies Registradas La Selva",{           
                projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "Especies.kml",
                    format: new OpenLayers.Format.KML({
                        extractStyles: true,
                        extractAttributes: true,
                        maxDepth: 1
                    })
                })
            })

 //-------------------Style------------------------//

        var ocurrenciasLaselva_estilo = new OpenLayers.Style({           
              'fill color': '#800080',
              'fill opacity': .5,
              'strokeColor': '#FFA500',
              'strokeWidth': 4,
              'pointRadius': 6                
              });

        var ocurrenciasLaselva_estilo_mapa = new OpenLayers.StyleMap({
              'default': ocurrenciasLaselva_estilo
              });                 
        ocurrenciasLaselva.styleMap = ocurrenciasLaselva_estilo_mapa;

//——————————–Vector 3 and style end————————-//

//——————————–Vector 3 highlight start———————–//

        var report = function(e) {
            OpenLayers.Console.log(e.type, e.feature.id);
        };

        var sombreadoOcurrencias = new OpenLayers.Control.SelectFeature(ocurrenciasLaselva, {  
            hover: true,
            highlightOnly: true,
            renderIntent: "temporary",
            eventListeners: {
                beforefeaturehighlighted: report,
                featurehighlighted: report,
                featureunhighlighted: report
            }
        });

//——————————–Vector 3 highlight end———————–//

//——————————–Pop Ups for Vector 3 start——————–//

        var controlSeleccion = new OpenLayers.Control.SelectFeature(ocurrenciasLaselva,
            {clickout: true}
        );

        function onPopupClose(evt) {
                  select.unselectAll();
        }

        function onFeatureSelect(event) {
        var feature = event.feature;
        var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
        if (content.search("<script") != -1) {
            content = "Content contained Javascript! Escaped content below.<br>" + content.replace(/</g, "&lt;");
        }
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(100,100),
            content,
            null, true, onPopupClose);
        feature.popup = popup;
        map.addPopup(popup);
        }
        function onFeatureUnselect(event) {
        var feature = event.feature;
        if(feature.popup) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            delete feature.popup;
            }
        }

       ocurrenciasLaselva.events.on({
                  "featureselected": onFeatureSelect,
                  "featureunselected": onFeatureUnselect
       });
       selectControl = new OpenLayers.Control.SelectFeature(ocurrenciasLaselva);                                    

//——————————–Pop Ups for Vector 3 end——————–//

//——————————–Loader start—————————————//

        map.addLayer(capaBing);
        map.addLayer(capaGoogle);    
        map.addLayer(layerMapnik);
        map.addLayer(contornoLaselva);            
        map.addLayer(senderosLaSelva);
        map.addLayer(ocurrenciasLaselva);

        map.addControl(sombreadoOcurrencias);
        map.addControl(controlSeleccion);
        sombreadoOcurrencias.activate();
        controlSeleccion.activate();             

        map.addControl(new OpenLayers.Control.LayerSwitcher());

//——————————–Loader end————————————–//

        if (!map.getCenter()) {
            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            map.setCenter(lonLat, zoom);
        }
    }

</script>

init();

Answer 1

Try using getFeaturesByAttribute() instead of getFeature().

The former looks up using attributes (I think this is what you are trying to do), while the latter looks up using properties.