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


        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) {

        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", 
            new OpenLayers.Size(100,100),
            null, true, onPopupClose);
        feature.popup = popup;
        function onFeatureUnselect(event) {
        var feature = event.feature;
        if(feature.popup) {
            delete feature.popup;

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

//--------------------------------Pop Ups for Vector 3 end--------------------//

//--------------------------------Loader start---------------------------------------//



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




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.

|improve this answer|||||

you can use getFeatureBy method:

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

var ft = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(10, 10),


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.

|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

I'm using OpenStreetMaps (with OpenLayers 2.0 I think) and nothing of the above worked for me. After many hours of trial and error, I found this page.

A for loop through all the features worked. Now I can move the feature (once called marker) and look at its position on the map.

for (var i = overlay.features.length - 1; i >= 0; i--)
 var feature = overlay.features[i];
 console.log(feature.geometry.x + ";" + feature.geometry.y);
 //myLocation = new OpenLayers.Geometry.Point(lat, lon).transform('EPSG:4326', 'EPSG:3857');
 myLocation = new OpenLayers.LonLat(lon, lat).transform('EPSG:4326', 'EPSG:3857');

The marker goes in the wrong position, but at least it moves!

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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