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 thought you could give me some advice regarding my problem. I have a working WFS Layer and I want to be able to type in some text which then should be used as the filter value. Afterwards the map should be refreshed, however only with the features selected through my input text. For Example I want to see Restaurants, so I type it in and it refreshes my map.

This is my code so far. In advance - thanks for your help.

<html>
   <head>
     <title>OpenLayers Demo</title>
<style type="text/css">
  html, body, #basicMap {
      width: 100%;
      height: 100%;
      margin: 0;
  }

</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>

 var apiKey = "xxxx";

 function init() {

    var WGS84 = new OpenLayers.Projection("EPSG:900913");
    var WGS84_1 = new OpenLayers.Projection("EPSG:4326");
    var mapextent = new OpenLayers.Bounds(796863, 6702845, 817558, 6690164);

 var rule = new OpenLayers.Rule({
    symbolizer: {
       fillColor: "#ff0000",
       strokeColor: "#ffcccc",
       fillOpacity: "0.5"
     }    
  });   


  var mapoptions = {
            projection: WGS84,
            displayProjection: WGS84_1
    };

   var map = new OpenLayers.Map("basicMap", mapoptions);
   map.addControl(new OpenLayers.Control.LayerSwitcher());
   map.addControl(new OpenLayers.Control.MousePosition());


    var road = new OpenLayers.Layer.Bing({
                name: "Road",
                key: apiKey,
                type: "Road"
            });
    var hybrid = new OpenLayers.Layer.Bing({
                name: "Hybrid",
                key: apiKey,
                type: "AerialWithLabels"
            });
    var aerial = new OpenLayers.Layer.Bing({
                name: "Aerial",
                key: apiKey,
                type: "Aerial"
            });


    var filter =  new OpenLayers.Filter.Logical({
                type: OpenLayers.Filter.Logical.OR,
                filters: [
                    new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "ukat",
                        value: document.getElementById('searchText1').value
                    })
                                       ]
            }) 


var wfsLayer = new OpenLayers.Layer.Vector("WFS", {
    strategies: [new OpenLayers.Strategy.BBOX()],
    styleMap: new OpenLayers.StyleMap({
    "default": new OpenLayers.Style(null, {rules:    [rule]})}),
        protocol: new OpenLayers.Protocol.WFS({
                    url:  "http://localhost:8080/geoserver/wfs",
                    featureType: "xx",
                    featureNS: "xx",
        featurePrefix: "xx",
                    geometryName: "the_geom",
                    srsName: "EPSG:900913",
                    version: "1.1.0"                    
            }),
            filter : filter

    });


   map.addLayers([road, hybrid, aerial, wfsLayer]);

   map.zoomToExtent(mapextent);

   var select = new OpenLayers.Control.SelectFeature(wfsLayer);
       map.addControl(select);
       select.activate();

  wfsLayer.events.on({
    featureselected: function(event) {
        var feature = event.feature;
        feature.popup = new OpenLayers.Popup.FramedCloud("pop",
        feature.geometry.getBounds().getCenterLonLat(),
        null,
        '<div>bez: '+feature.attributes.bez+                               feature.attributes.name+'</div>',
        null,
        true 
     );

 map.addPopup(feature.popup);  
        }
  });

  }

</script>

<body onload="init();">
       <div id="basicMap">
    <form name="form" id="form">
        <input type="text"  name="Search" id="searchText1" value="" />
    <input type="submit"  />
      </form>
    </div>
    </body>
   </html>
share|improve this question

2 Answers 2

What is the exact error in the console? Run it with firebug or chrome, please.

What I suppose is the reference to

value: document.getElementById('searchText1').value

is failing because the code is loaded before your code and those the input element doesn't exists yet when the JS runs.

Try to put your code at bottom before close the .

Cheers.

share|improve this answer

did u put it in a function as following code:

function addNewWFS(){

     if(newLayer){
        newLayer.removeAllFeatures();
     };

     var val = document.getElementById('searchText1').value;

     var newLayer = new OpenLayers.Layer.Vector("WFS", {
            strategies: [new OpenLayers.Strategy.BBOX()],
            protocol: new OpenLayers.Protocol.WFS({
                url:  "http://demo.opengeo.org/geoserver/wfs",
                featureType: "tasmania_roads",
                featureNS: "http://www.openplans.org/topp"
            }),
            styleMap: new OpenLayers.StyleMap({
                strokeWidth: 3,
                strokeColor: "#333333"
            }),
            filter: new OpenLayers.Filter.Logical({
                type: OpenLayers.Filter.Logical.OR,
                filters: [
                    new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "ukat",
                        value: val
                    });                       
                ]
            })
        });

   map.addLayers(newLayer);
};

i hope it helps you...

share|improve this answer
    
Hi Aragon, I am not 100% sure where to insert this code. Should this replace my code or shall I add your function beneath? –  TimothyDalton Aug 14 '12 at 21:46
    
call this function when you click your search button... –  Aragon Aug 15 '12 at 10:24
    
Thanks - worked ;-) –  TimothyDalton Aug 19 '12 at 15:58
    
You're welcome... –  Aragon Aug 19 '12 at 20:38

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.