Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

}
share|improve this question

1 Answer 1

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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