[GIS] searching by property’s value of geoJSON in OpenLayers

geojsonjavascriptopenlayers-2

I have a map with 4 layers with the same attributes (not even the same values). an example of geoJSON is below:

{
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "id": 0, "properties": { "CODIF": "PBA177432V1", "Position_X": 397632.884, "Position_Y": 419958.3456, "Point_Kilo": 177000, "Type": "2CmPt", "Voie": "V1", "dist_rail": 2.75, "Status": "PBA 3.50m" }, "geometry": { "type": "Point", "coordinates": [ -6.511578939607725, 34.374296518950914 ] } }
,
{ "type": "Feature", "id": 1, "properties": { "CODIF": "PBA177437V1", "Position_X": 397633.7158, "Position_Y": 419952.8751, "Point_Kilo": 177000, "Type": "STM.TT (PA)", "Voie": "V1", "dist_rail": 2.75, "Status": "PBA 3.50m" }, "geometry": { "type": "Point", "coordinates": [ -6.51156926129586, 34.37424727692602 ] } }
,
{ "type": "Feature", "id": 2, "properties": { "CODIF": "PBA177457V1", "Position_X": 397636.6028, "Position_Y": 419933.597, "Point_Kilo": 177000, "Type": "STM.TT (PA)", "Voie": "V1", "dist_rail": 2.75, "Status": "PBA 3.50m" }, "geometry": { "type": "Point", "coordinates": [ -6.511535636308449, 34.374073743241354 ] } } 
]
}

I want to add a function that searches by value of property. ("CODIF" in this case). It means that when a user enters a value of property "CODIF" of a feature, he sees this feature.
I've added a function that searches by longitude and latitude values, but it has no relation with geoJSON properties (even if there are longitude and latitude properties in geoJSON file), as shown below:

$('#envoyer').click(function() {
    var lat = latitude.val();
    var long = longitude.val();

    if(long != '' && lat != '') {
        vectorSource.clear();
        vectorSource.addFeature(
            new ol.Feature({
                geometry: new ol.geom.Point([parseFloat(long), parseFloat(lat)]).transform('EPSG:4326', 'EPSG:3857')
            })
        );

        wkt.val('POINT(' + long + ' ' + lat + ')');
        map.getView().fit(vectorSource.getExtent(), map.getSize());
    }
    return false;
});

It responds to my need without being related to geoJSON properties values, and it's because of the nature of longitude and latitude properties, but for searching by "CODIF" property values, I must relate the function to geoJSON properties.

The HTML code of the function i should add is:

<div id="search">
  <input type="text" placeholder="Search PKs by CODIF">
  <button type="button">Search</button>
</div>

I started my function with something like:

$(document).on('click', '#search button', function() {
  var value = $('#search input').val();

What i need is to do a comparison of what a user entered as a value, with the values of "CODIF" property of geoJSON file, if it's found, the user will see the feature of this CODIF's value, and if not, he reads a message like: Not found.

Best Answer

In order to search for a feature based on a properties you can loop through your vector source and verify each feature's property "CODEIF" with the one desired like this:

yourVectorSource.forEachFeature( function(feature){
    if (feature.get('CODEIF')==yourDesiredValue){
        // add it on a temporary layer
        // and display it
        // while hiding yourVectorLayer
    }
});

Related Solutions

[GIS] Setting properties of geoJSON in OpenLayers

Edited:

There are several errors in your code, namely:

Your style functions uses feature.getGeometry().getType(); This will always return "Point" for a Point geometry.

A style function should be something like:

var styleFunction1 = function(feature, resolution) {
    if (feature.get("type")) {
      return styles1[feature.get("type")];
    }
    return styles1["Point"];
};

Your new ol.interaction.Select({}); has no style attribute, this means it will always use the default style for selected features

Pass it a style:

select = new ol.interaction.Select({
    condition: ol.events.condition.click,
    style: blueCircle
});

The find-button callback has several errors:
- when you find a matching feature, you store it's index in selectArray
- you should use set() to set a new attribute on a feature

A better function:

FindButton.addEventListener('click', function(){
        if (select) {
            //Get the name of the feature
            var features = select.getFeatures();
            var selectedFeature = features.item(0);
            var name = selectedFeature.get("NAME");
            //Find corresponding name in other layer
            var otherFeatures = Layer2Source.getFeatures();
            for (var i=0; i < otherFeatures.length; i++) {
                var feature = otherFeatures[i];
                if (feature.get("NAME") == name) {
                    feature.set("type", "SelectedPoint");
                } else {
                    feature.set("type", "Point");
                }
            }
        } else {
         window.alert("You have not selected anything");
        }
 });

Original answer (for context)

Although I'm not sure how I can get the found features to be redrawn using the same style (i guess you could assign it a new style using feature setStyle (http://openlayers.org/en/v3.1.1/apidoc/ol.Feature.html?unstable=true#setStyle)), I've managed to rewrite your code to set the attribute on similar features:

var FindButton = document.getElementById('find-sim-name');
FindButton.addEventListener('click', function(){
        if(select) {
            //Get the name of the feature
            var features = select.getFeatures();
            var feature = features.item(0);
            var id = feature.get("NAME");
            //Find corresponding name in other layer

            //this array holds matching features
            var selectArray = [];

            //loop through all features on layer 
            for(var i=0; i < Layer2Source.getFeatures().length; i++) {

                //get the feature
                var feature = Layer2Source.getFeatures()[i];

                //check if name matches
                if(feature.get("NAME") == id){
                    //add matching to the array
                    selectArray.push(feature);
                }
            }
            //Now do something to the found point
            if(selectArray.length > 0){
                for (var j = 0; j < selectArray.length; j++) {
                    var selectedFeature = selectArray[0];
                    selectedFeature.set("type", "SelectedPoint");
                    //perhaps
                    //selectedFeature.setStyle(selectedStyle); 
                }
            }
        } else {
         window.alert("You have not selected anything");
        }
 })r

[GIS] Selecting feature programmatically from GeoJSON using OpenLayers

You could use the method "getFeaturesByAttribute"

or iterate through all features:

 for(var i = 0; i < yourgeojsonlayer.features.length; i++) { 
    if(yourgeojsonlayer.features[i].attributes.searchedAttribute == 'searchedValue')
     { selectFeatureControl.select(yourgeojsonlayer.features[i]); break; } 
    }

Ps: makes necessary to create a select control first and assign the variable name you use in the for loop (here selectFeatureControl)

I just wrote down a quick example here: http://jsfiddle.net/expedio/sh9wv4m7/

Best Answer

Related Solutions

[GIS] Setting properties of geoJSON in OpenLayers

[GIS] Selecting feature programmatically from GeoJSON using OpenLayers

Related Question