gistfile1.js

/**
 * Add all your dependencies here.
 *
 * @require Popup.js
 * @require LayersControl.js
 */

// ========= config section ================================================
var url = '/geoserver/ows?';
var infoFormat = 'application/vnd.ogc.gml/3.1.1'; // can also be 'text/html'
var center = [16523793.703807741, -5121134.055529997];
var zoom = 6;
// =========================================================================

// override the axis orientation for WMS GetFeatureInfo
ol.proj.addProjection(
    new ol.proj.EPSG4326('http://www.opengis.net/gml/srs/epsg.xml#4326', 'enu')
);

// create a new popup with a close box
// the popup will draw itself in the popup div container
// autoPan means the popup will pan the map if it's not visible (at the edges of the map).
var popup = new app.Popup({
  element: document.getElementById('popup'),
  closeBox: true,
  autoPan: true
});

// in recent ol3 version this is not needed, featureNS and featureType will be determined on the fly
// create a GML format to read WMS GetFeatureInfo response
var gfiFormats = {
  'topp:tasmania_state_boundaries': new ol.format.GML({featureNS: 'http://www.openplans.org/topp', featureType: 'tasmania_state_boundaries'}),
  'topp:tasmania_water_bodies': new ol.format.GML({featureNS: 'http://www.openplans.org/topp', featureType: 'tasmania_water_bodies'})
};

// create a vector layer to contain the feature to be highlighted
var highlight = new ol.layer.Vector({
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#00FFFF',
      width: 3
    })
  }),
  source: new ol.source.Vector()
});

// when the popup is closed, clear the highlight
$(popup).on('close', function() {
  highlight.getSource().clear();
});

// create the OpenLayers Map object
// we add a layer switcher to the map with two groups:
// 1. background, which will use radio buttons
// 2. default (overlays), which will use checkboxes

var layers = [
  // MapQuest streets
  new ol.layer.Tile({
    title: 'Street Map',
    group: "background",
    source: new ol.source.MapQuest({layer: 'osm'})
  }),
  // MapQuest imagery
  new ol.layer.Tile({
    title: 'Aerial Imagery',
    group: "background",
    visible: false,
    source: new ol.source.MapQuest({layer: 'sat'})
  }),
  // MapQuest hybrid (uses a layer group)
  new ol.layer.Group({
    title: 'Imagery with Streets',
    group: "background",
    visible: false,
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
      }),
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'hyb'})
      })
    ]
  }),
  new ol.layer.Tile({
    title: "Tasmania State Boundaries",
    source: new ol.source.TileWMS({
      url: url,
      params: {'LAYERS': 'topp:tasmania_state_boundaries', 'TILED': true},
      serverType: 'geoserver'
    })
  }),
  new ol.layer.Tile({ 
    title: "Tasmania Water Bodies",
    source: new ol.source.TileWMS({
      url: url,
      params: {'LAYERS': 'topp:tasmania_water_bodies', 'TILED': true},
      serverType: 'geoserver'
    })
  }),
  highlight
];

var map = new ol.Map({
  controls: ol.control.defaults().extend([
    new app.LayersControl({
      groups: {
        background: {
          title: "Base Layers",
          exclusive: true
        },
        'default': {
          title: "Overlays"
        }
      }
    })
  ]),
  // add the popup as a map overlay
  overlays: [popup],
  // render the map in the 'map' div
  target: document.getElementById('map'),
  // use the Canvas renderer
  renderer: 'canvas',
  layers: layers,
  // initial center and zoom of the map's view
  view: new ol.View2D({
    center: center,
    zoom: zoom
  })
});

// register a single click listener on the map and show a popup
// based on WMS GetFeatureInfo
map.on('singleclick', function(evt) {
  var viewResolution = map.getView().getView2D().getResolution();
  var layers = map.getLayers();
  var gfi = [];
  var formats = [], titles = [];
  layers.forEach(function(layer) {
    if (layer.getVisible() === true && layer instanceof ol.layer.Tile && layer.getSource() instanceof ol.source.TileWMS) {
      var url = layer.getSource().getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, map.getView().getView2D().getProjection(),
        {'INFO_FORMAT': infoFormat});
      if (url) {
        gfi.push($.ajax({url: url}));
        titles.push(layer.get('title'));
        formats.push(gfiFormats[layer.getSource().getParams()['LAYERS']]);
      }
    }
  });
  $.when.apply($, gfi).then(function() {
    var features = [];
    var i, ii;
    for (i=0, ii=arguments.length; i<ii; ++i) {
      var f = formats[i].readFeatures(arguments[i][0]);
      if (f[0] !== null) {
        features.push(f[0]);
      }
    }
    highlight.getSource().clear();
    var html = '', hasContent = false;
    for (i=0, ii=features.length; i<ii; ++i) {
      var feature = features[i];
      feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
      highlight.getSource().addFeature(feature);
      html += '<p style="font-weight: bold; margin-top: 5px; margin-bottom:5px">' + titles[i] + '</p>';
      html += '<table class="table table-striped table-bordered table-condensed">';
      var values = feature.getProperties();
      for (var key in values) {
        if (key !== 'the_geom' && key !== 'boundedBy') {
          html += '<tr><td>' + key + '</td><td>' + values[key] + '</td></tr>';
          hasContent = true;
        }
      }
      html += '</table>';
    }
    if (hasContent === true) {
      popup.setPosition(evt.coordinate);
      popup.setContent(html);
      popup.show();
    } else {
      popup.hide();
    }
  });
});