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: gre...@greeninfo.org
Web: www.GreenInfo.org www.MapsPortal.org
Subscribe to MapLines, our e-newsletter, at www.GreenInfo.org
_______________________________________________
Users mailing list
us...@lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users
