[GIS] Filtering a loaded kml file in OpenLayers

errorfilterkmlopenlayers-2

I'm trying to create an interactive search engine (for finding event tickets) of which one of its features is a visual map that shows related venues using OpenLayers. I have a plethora of venues (3000+) in a kml file that I would like to selectively show a filtered subsection of. Below is the code I have but when I try to run it has a JavaScript error. Running firebug and chrome developer tools makes me think that it is not getting passed the parameters I give because it says that the variables are null. However, I cannot figure out why they are not getting passed. Any insight is greatly appreciated.

var map, drawControls, selectControl, selectedFeature, select;
$('#kml').load('venuesComplete.kml');
kml=$('#kml').html();
function showVenues(state, city, venue){
    filterStrategy = new OpenLayers.Strategy.Filter({});
    var kmllayer = new OpenLayers.Layer.Vector("KML", {
    strategies: [filterStrategy,
        new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "venuesComplete.kml",
        format: new OpenLayers.Format.KML({
        extractStyles: true,
        extractAttributes: true
        })
    })
    });
    select = new OpenLayers.Control.SelectFeature(kmllayer);
    kmllayer.events.on({
        "featureselected": onFeatureSelect,
        "featureunselected": onFeatureUnselect
    });
    map.addControl(select);
    select.activate();
    filter = new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.LIKE,
        property: "",
        value: ""
    });
    function clearFilter(){
        filterStrategy.setFilter(null);
    }
    function setFilter(property, value){
        filter.value = value;
        filter.property = property;
        filterStrategy.setFilter(filter);
    }
    var vector_style = new OpenLayers.Style();
    if(venue!=""){
        setFilter('name', venue);
    }else if(city!=""){
        setFilter('description', city);
    }else if(state!=""){
        setFilter('description', state);
    }
    map.addLayer(kmllayer);
    function onPopupClose(evt) {
        select.unselectAll();
    }
    function onFeatureSelect(event) {
        var feature = event.feature;
        var selectedFeature = feature;
        var popup = new OpenLayers.Popup.FramedCloud("chicken", 
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(100,100),
            "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description +'<br>'+feature.attributes, 
            null, 
            true, 
            onPopupClose
        );
        document.getElementById('venueName').value=feature.attributes.name;
        document.getElementById("output").innerHTML=event.feature.id;
        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;
        }
    }
}
function init() {
    map = new OpenLayers.Map('map');
    var google_map_layer = new OpenLayers.Layer.Google(
        'Google Map Layer',
        {type: google.maps.MapTypeId.HYBRID}
    );
    map.addLayer(google_map_layer);
    state="";
    state+=document.getElementById('stateProvDesc').value;
    city="";
    city+=document.getElementById('cityZip').value;
    venue="";
    venue+=document.getElementById('venueName').value;
    showVenues(state,city,'Michie Stadium');
    map.addControl(new OpenLayers.Control.LayerSwitcher({}));
    map.zoomToMaxExtent();

}

Best Answer

i would recommend that you see this example of filtering strategy for openlayers.

this snippet from original code:

filter = new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.BETWEEN,
  property: "when",
  lowerBoundary: startDate,
  upperBoundary: new Date(startDate.getTime() + (parseInt(spanEl.value, 10) * 1000))
});

var flights = new OpenLayers.Layer.Vector("Aircraft Locations", {
  projection: geographic,
  strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy],
  protocol: new OpenLayers.Protocol.HTTP({
    url: "kml-track3b.kml",
    format: new OpenLayers.Format.KML({

...

this is the original kml file, using feature with nodes.

Related Question