title: openlayers 3 wms getfeatureinfo popup
body: <p>I want to add an OSM map with WMS layers to my webpage, which includes some information about layers. The best way for me would be to create the popup with getFeatureInfoUrl request, but unfortunatelly I'm not that experienced to do this. I've tried a lot of codes and tutorials but it doesn't work.</p>
  
  <p>I wrote something like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var osm = new ol.layer.Tile({
   source: new ol.source.OSM()
  });
  var wms = new ol.layer.Tile({
   source: new ol.source.TileWMS(({
   url: 'http://localhost:8081/geoserver/KORTOWO/wms',
   params: {'LAYERS': 'roads', 'TILED': "true"},
   serverType: 'geoserver',
   })),
   title: "Roads"
  });
  
  
  var map = new ol.Map({
      target: 'map',
      layers: [osm,wms],
      view: new ol.View({
          center: ol.proj.transform([20.45, 53.75], 'EPSG:4326', 'EPSG:3857'),
          zoom: 14
      })
  });
  
  
  var popup = new ol.Overlay.Popup();
  map.addOverlay(popup);
  
  map.on('singleclick', function(evt) {
  popup.getElementById('info').innerHTML = '';
    var viewResolution = /** @type {number} */ (view.getResolution());
    var url = wms.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/html'});
    if (url) {
      popup.getElementById('info').innerHTML =
          '&lt;iframe seamless src="' + url + '"&gt;&lt;/iframe&gt;';
    }
      
      popup.show(evt.coordinate, url);
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can you help me how to modify the code to make it works? I'm using OpenLayers3. </p>
  
  <p>Greetings,
  Karolina</p>