[OpenLayers-Users] What is the easiest way to search a vector layer(s)?

[Greg Allensworth]

On 2/26/2013 5:13 AM, boesiii wrote:
> I would like to add a search function to my map using javascript only.

I did something like that, and you can see it here:

http://www.mapsportal.org/ggnpc/finder/?controls=1&thumbmap=1&customize=1&find=events&layers=ggnpc-events


Specifically, the campgrounds and trailheads are searched by scanning 
the in-memory features, and listing their attributes to a DIV.
It goes something like this:


// the layer "campgrounds" has a setting "searchfields" which is an 
array of attribute names which are searched for the keyword, and 
"titlefield" which defines which attribute is the item's Title.

new OpenLayers.Layer.Vector("campgrounds", {
         searchfields: [ 'name', 'description', 'location' ],
         titlefield: 'name',
         styleMap: new OpenLayers.StyleMap({
             'default' : new OpenLayers.Style({
                 externalGraphic: 'campground.png',
                 graphicOpacity:1, graphicWidth:20, graphicHeight:28
             })
         })
     });

// searchVector is the function to do a search, takes these 4 arguments
layer = MAP.getLayersByName('campgrounds')[0]
keyword = "Creek"
titlediv = $('#search_title');
resultdiv = $('#search_results');
searchVector(layer,keyword,titlediv,resultdiv);


// the search function. Loop over the searchfields and see
// whether it matches the searchterm. For your own need you may want to 
elaborate on this: the version here is a somewhat primitive search for 
your entire keyword, and doesn't handle searching for multiple words

function searchVector(layer,searchterm,title_div,results_div) {
     // no features? hide the output section and bail
     if (! layer.features.length) {
         title_div.hide();
         results_div.hide();
         handleNoResultsFound();
         return;
     }

     // iterate over each feature, assume it is NOT a match for the filter
     // iterate over the filter fields, see if this feature's value for 
that field fits the filter
     // if so, tag as a match and quit iterating for this feature
     var findcount = 0;
     searchterm = searchterm.toLowerCase();
     for (var p=0, fl=layer.features.length; p<fl; p++) {
         var feature = layer.features[p];
         var matched = false;
         for (var q=0, sl=layer.searchfields.length; q<sl; q++) {
             var field = layer.searchfields[q];
             try {
                 if 
(feature.attributes[field].toLowerCase().indexOf(searchterm) != -1) { 
matched = true; break; }
             } catch (e) {
                 true;
                 //console.error('Trying to use nonexistent searchfield: 
Layer ' + layer.name + ', Field: ' + field);
             }
         }
         if (! matched) continue;

         // if we got here, then the feature IS a match
         findcount++;
         var title  = feature.attributes[layer.titlefield];
         var bbox   = feature.geometry.getBounds();
         addToSearchResults(results_div,title,bbox);
     }

     // no matches? hide the output section and bail
     if (! findcount) {
         title_div.hide();
         results_div.hide();
     }
}




function addToSearchResults(results_div,title,bbox) {
     // make up the basic HTML of the title
     // optionally add something to do with the bbox, e.g. zoom the map
     var row  = $('<tr></tr>');
     var cell = $('<td></td>').text(title);
     row.append(cell);
}


-- 
Greg Allensworth, Web GIS Developer
BS  A+  Network+  Security+  Linux+  Server+
GreenInfo Network - Information and Mapping in the Public Interest
564 Market Street, Suite 510  San Francisco CA 94104
PH: 415-979-0343 x302  FX: 415-979-0371    email: gregor at greeninfo.org
Web: www.GreenInfo.org     www.MapsPortal.org

Subscribe to MapLines, our e-newsletter, at www.GreenInfo.org