Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
add comment

2 Answers

you can use getFeatureBy method:

var lyr = new OpenLayers.Layer.Vector("test"); 

var ft = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(10, 10),
           {scientific_name:'hydro'}); 

map.addLayer(lyr);
lyr.addFeatures([ft]);


var features = lyr.getFeatureBy('scientific_name', 'hydro'); 

and for highlighting them with scientific name you can delete all feature from map and then adding this new feature can help you....

i hope it helps you...

share|improve this answer
    
Ok I'm trying the getFeatureBy looks like it is all I need thank you I'll update the post as soon as I finally resolve this! –  Paul Vega Salas Jun 12 '12 at 18:25
    
ok , I tried but the map did not responde, it showed all the info already have but when I select one of my points nothing happen, I tryed to modify de getFeatureBy but it did not result, I was reading here dev.openlayers.org/docs/files/OpenLayers/Control/… but it think that I'm missing something! –  Paul Vega Salas Jun 12 '12 at 18:59
add comment

Have you tried 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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.