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>
