OpenLayers WFS Layer with OpenLayers.Request.Get
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">
<p>OpenLayers WFS with invisible 10px stroke to make selection easier
<div id="map"></div>
</body>
CSS
#map {
width: 100%;
height: 500px;
}
JavaScript
var map;
var layer, wms, selectControl;
function init() {
map = new OpenLayers.Map('map');
wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
layers: 'basic'
});
layer = new OpenLayers.Layer.Vector("WFS", {
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
"pointRadius": 3,
fill: true,
fillColor: "#8d006a",
strokeColor: "#000000",
strokeOpacity: 0,
strokeWidth: 10
})
})
});
map.addLayers([wms, layer]);
map.setCenter(new OpenLayers.LonLat(146.7, -41.8), 6);
OpenLayers.Request.GET({
url: 'http://demo.opengeo.org/geoserver/wfs',
params: {
service: 'WFS',
version: '1.0.0',
request: 'GetFeature',
typeName: 'ne_10m_populated_places',
featureNS: "http://openstreemap.org",
bbox: '137.9109375,-54.98359375,155.4890625,-28.61640625'
// using bbox for the request because the layer has a huge amount of features
},
//proxy: "/cgi-bin/proxy.cgi?url=",
success: function (response) {
var gmlReader = new OpenLayers.Format.GML({
extractAttributes: true
});
var features = gmlReader.read(response.responseText);
layer.addFeatures(features);
}
});
selectControl = new OpenLayers.Control.SelectFeature(map.layers[1], {
onSelect: onFeatureSelect,
onUnselect: onFeatureUnselect
});
map.addControl(selectControl);
selectControl.activate();
}
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new...