1

I'm trying to create a custom popup overlay using Openlayers 3 and Jquery UI dialog boxes. (I want use the dialog box as a popup window).

I'm a bit stuck though as my Jquery coding isn't good. I was wondering if anyone has done this already, and if so could they point me in the right direction? The code I have so far is:

 var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.transform([-0.06, 51.55], 'EPSG:4326', 'EPSG:3857'),
      zoom: 13
    })
  });

 map.on('click', function(evt) {

        var popup = document.getElementById('popupContainer');
        popup.innerHTML= "<div id='dialogTest' style='position:relative;'>Hello</div>";
        var coordinate = evt.coordinate;
        $(function() {
        $( "#dialogTest" ).dialog({
                   //autoOpen: false,
                  minWidth: 200,                           
                  minHeight: 200
                  position: {'within':popup}
             }
        );
        });

         var overlay = new ol.Overlay({
            element:popup

            });

          overlay.setPosition(coordinate);  

          map.addOverlay(overlay);
          popup.style.display = 'block';
              $( "#dialogTest" ).dialog( "open" );           

    });
2

There are a number of ways to do a popup, but jQueryUI's dialog is pretty simple set up with OL3.

map.on('click', function (e) {
  var $pop = $("#popup").dialog({
    minWidth: 100,
    minHeight: 100,
    position: {
      'of':  e.browserEvent.getBrowserEvent()
    }
  });

  $pop.html('<h3>clicked on <strong>'+ e.pixel +'</strong></h3>');

  map.addOverlay({
    element: $pop
  });
});

I think the hardest part with this is getting the positioning right. The of param of the position option can take a browserEvent object. So to get this object, we can pull it from the click event that was fired: e.browserEvent.getBrowserEvent(). Pass that to the of and you can add more options to move it around from there.

Fiddle: http://jsfiddle.net/timh06/mdkan3ss/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.