[GIS] Adding WFS info popups on three WFS layers in Openlayers

Question

Am doing a project using OpenLayers + Geoserver and am having four WFS layers that am using to display grids for each(schools,towns,hospitals).

I wanted to know whether its possible to display featureinfo popups for the WFS layers when clicked on map.

If so, how should I do it?

Answer 1

Unless your doing some fancy client side geometry editing or client side styling you should use WMS instead. GetFeatureInfo is a WMS request. If you use WMS you can make a custom template in Geoserver to return formatted HTML with your attributes:

http://docs.geoserver.org/latest/en/user/tutorials/GetFeatureInfo/index.html

The GetFeatureInfo HTML (if you use HTML templates) can easily be rendered to a popup dialog.

Not a popup, but shows the concept of GetFeatureInfo: http://openlayers.org/en/v3.2.0/examples/getfeatureinfo-tile.html

Some HTML to get you started:

    <div class="span12">
        <div id="map" class="map">
            <div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-content"></div>
            </div>
        </div>

    </div>
</div>

And Javascript:

var content = document.getElementById('popup-content');

map.on('singleclick', function(evt) {
  var viewResolution = /** @type {number} */ (view.getResolution());
  var url = pointWmsSource.getGetFeatureInfoUrl(
      evt.coordinate, viewResolution, 'EPSG:3857',
      {'INFO_FORMAT': 'text/html'});
  if (url) {
    var coordinate = evt.coordinate;
    overlay.setPosition(coordinate);

    content.innerHTML = '<iframe seamless id="infoiframe" src="' + url + '"></iframe>';
    container.style.display = 'block';
  }
});