1

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>

2 Answers 2

1

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...

2
  • Hi Aragon, I am not 100% sure where to insert this code. Should this replace my code or shall I add your function beneath? Aug 14, 2012 at 21:46
  • call this function when you click your search button...
    – urcm
    Aug 15, 2012 at 10:24
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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