title: OpenLayers 3 and Geoserver: Create popup on marker click
body: <p>I have an OpenLayers 3 map with WMS layers from my Geoserver. I am trying to create a popup window on marker click (from the WMS layer) with the popup's content data from WFS GetFeature method. I have a JsFiddle <a href="https://jsfiddle.net/liostse/737tdcz1/4/" rel="nofollow noreferrer">here</a>.</p>
  <p>The code is rather simple and based on other SO posts.</p>
  <pre><code>var baselayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });
  var layer1 = new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: 'http://88.99.13.199:8080/geoserver/agristats/wms',
      params: {
        'LAYERS': 'agriculture:megaladimosia',
        'STYLES': 'point',
        'TILED': true
      },
      serverType: 'geoserver'
    })
  });
  var map = new ol.Map({
    layers: [baselayer, layer1],
    controls: ol.control.defaults().extend([
      new ol.control.ScaleLine({
        units: 'metric'
      }),
      new ol.control.FullScreen()
    ]),
    target: 'mymap',
    view: new ol.View({
      center: [2687148, 4556999],
      zoom: 6.5
    })
  });
  var element = document.getElementById('popup');
  var popup = new ol.Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false
  });
  map.addOverlay(popup);
  map.on('click', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
      return feature;
    });
    if (feature) {
      var coord = feature.getGeometry().getCoordinates();
      var props = feature.getProperties();
      var info = &quot;&lt;h2&gt;bvnvb&lt;/h2&gt;&quot;;
      // Offset the popup so it points at the middle of the marker not the tip
      popup.setOffset([0, -22]);
      popup.show(coord, info);
    } else {
      var url = layer1
        .getSource()
        .getGetFeatureInfoUrl(
          evt.coordinate,
          map.getView().getResolution(),
          map.getView().getProjection(), {
            'INFO_FORMAT': 'application/json',
            'propertyName': 'total_budget'
          }
        );
      reqwest({
        url: url,
        type: 'json',
      }).then(function(data) {
        var feature = data.features[0];
        var props = feature.properties;
        console.log(props.total_budget);
        var info = &quot;&lt;h2&gt;&quot; + props.total_budget + &quot;&lt;/h2&gt;&quot;;
        console.log(info);
        popup.show(evt.coordinate, info);
      });
    };
  });
  </code></pre>
  <p>However, this always gives me an error of <em>Uncaught TypeError: popup.show is not a function</em>.
  I added the ol-popup js and css files and still nothing. If anyone could help, I would be very thankful.</p>