1

I created a webpage which adds map layers from GeoServer as well as running a query for a specific object in a table "urbanaddress". It then adds it as a wfs, then finally zooms to that object on the map. However, all the other layers are being added and displayed except for the query result. It seems to be appearing on the layer switcher but you can't see it on the map. I'm using OpenLayers 2 as a client to GeoServer 2.6.2. The layers were imported into GeoServer from a PostGRES/PostGIS database.

Firstly, the code adds 5 WMS layers onto the webpage and when it loads, it filters through GeoServer layer called "urbanaddress" for instance where the field "housenum" has a value of 45. Thereafter, it should add that result as a wfs layer on top of the other layers and at that point, it implments the zoomIt function which makes sure the map is focused on the bounding box containing the wfs layer.

My webpage is being hosted on port 8080, using apache webserver to diplay the webpage. I checked the firebug console and it says:

Cross-Origin Request Blocked.

How can I get around this?

<html>
    <head>
        <title>Address Map</title>
        <script type="text/javascript" src="OpenLayers/OpenLayers.js"></script>
        <script type="text/javascript" src="OpenLayers/lib/deprecated.js"></script>

        <script type="text/javascript">

        var roadz,localityz, districts, map, sechLayer, sechExtnt;
        function init()
        {
            map = new OpenLayers.Map('maps');

            districts = new OpenLayers.Layer.WMS(
            "districtname", "http://localhost:1025/geoserver/wms/myproject",
            {
                layers: 'myproject:districtname'
            },
            {
                singleTile:true,
                isBaseLayer: true

            }
            );

            localityz = new OpenLayers.Layer.WMS(
            "locality", "http://localhost:1025/geoserver/wms/myproject",
            {
                layers: 'myproject:locality',
                transparent: true
            },
            {
                singleTile:true,
                isBaseLayer: false

            }
            );

            roadz = new OpenLayers.Layer.WMS(
            "road", "http://localhost:1025/geoserver/wms/myproject",
            {
                layers: 'myproject:road',
                transparent: true
            },
            {
                singleTile:true,
                isBaseLayer: false

            }
            );

            sectorz = new OpenLayers.Layer.WMS(
            "sector", "http://localhost:1025/geoserver/wms/myproject",
            {
                layers: 'myproject:sector',
                transparent: true
            },
            {
                singleTile:true,
                isBaseLayer: false

            }
            );

            addressez = new OpenLayers.Layer.WMS(
            "urbanaddress", "http://localhost:1025/geoserver/wms/myproject",
            {
                layers: 'myproject:urbanaddress',
                transparent: true
            },
            {
                singleTile:true,
                isBaseLayer: false

            }
            );
                var bounds = new OpenLayers.Bounds(
                        31.05268, -17.77168,
                        31.05929, -17.78

                 );
                map.addLayers([districts, localityz,roadz,addressez]);
                 map.addControl(new OpenLayers.Control.PanZoomBar({
                         position: new OpenLayers.Pixel(2, 34)
                 }));
                map.addControl(new OpenLayers.Control.Navigation());
                map.addControl(new OpenLayers.Control.Scale());
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.MousePosition());
                map.zoomToExtent(bounds);

                    sechLayer = new OpenLayers.Layer.Vector("Postcode Zone and Address",
                            {
                                strategies: [new OpenLayers.Strategy.BBOX()],
                                protocol: new OpenLayers.Protocol.WFS({
                                version: "1.1.0",
                                url: "http://localhost:1025/geoserver/wfs/myproject",
                                featureType: "urbanaddress",
                                featureNS: "http://myproject",
                                geometryName:"geom",
                                srsName: "EPSG:4326"
                                }),

                                filters: new OpenLayers.Filter.Comparison({

                                                                            type: OpenLayers.Filter.Comparison.LIKE,
                                                                            property: 'housenum',
                                                                            value: "45"
                                                                        })

                            });
            map.addLayer(sechLayer);

            sechLayer.events.register("loadend",sechLayer,zoomIt);
        }
                    function zoomIt()
            {
                 sechExtnt = sechLayer.getDataExtent();
                map.zoomToExtent(sechExtnt);
            }
        </script>

        <style type="text/css">

            #maps
            {
                width:950px; 
                height:500px; 
                border:2px solid black;
            }

        </style>

        </head>
    <body onload="init()">
      <div id="maps" ></div>

    </body>

</html>
3
  • 2
    You may get better responses if you point out the relevant parts of your code and explain what you have tried already. – Evil Genius Apr 28 '15 at 16:38
  • 1
    Just an idea but is the web page hosted on the same port, 1025, as your geoserver ? The issue could be due to cross site scripting restrictions. Check the network tab of your debugger (firebug/chrome) and see if a request is being made to the WFS for the urbanaddress query, and if you are getting a response. You can then track down if the problem is with the query to the server, or Openlayers handling the response. – kes Apr 29 '15 at 13:55
  • nope its being hosted on port 8080, using apache webserver to diplay the webpage. how could i get around those scripting restrictions? i checked the firebug console and it says Cross-Origin Request Blocked. how can i get around this. – lalamufoyah May 1 '15 at 10:26
1
url: "http://localhost:1025/geoserver/wfs/myproject"

...its being hosted on port 8080, using apache webserver to diplay the webpage. how could i get around those scripting restrictions...

The problem is to do with your WFS which is on port 1025, whilst your service is on port 8080. To get over your Cross-Origin issue, your WFS must be served on the same port (not just same server) as your web application.

As you are using Apache HTTP to provide your web service you can do this by proxying your GeoServer service through Apache.

In your Apache .conf file enable the proxying modules for example

Change

#LoadModule proxy_module modules/mod_proxy.so
#LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
#LoadModule proxy_http_module modules/mod_proxy_http.so

To:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_http_module modules/mod_proxy_http.so 

Then add

<Proxy /geoserver>
  Order deny,allow
  Allow from all
</Proxy>

and for HTTP proxying:

ProxyPass /geoserver http://localhost:1025/geoserver
ProxyPassReverse /geoserver http://localhost:1025/geoserver

or for ajp proxying:

ProxyPass /geoserver ajp://localhost:8009/geoserver
ProxyPassReverse /geoserver ajp://localhost:8009/geoserver

Then you call your WFS like:

 url: "http://localhost:8080/geoserver/wfs/myproject"

and WMS like:

http://localhost:8080/geoserver/wms/myproject

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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