[OpenLayers-Users] popup dynamic positioning

[Giuseppe Falcone]

Hi all,

I have to display a popup onto a map, on mouse hover event and I want that
popup is displayed according to the position of the feature on the page;
i.e. if the feature is on the right border of the page, the popup is shown
on the left of the point, if the feature is on the top of the page, the
popup is shown on the bottom of the point, so that it is always visible.

It is possible to do that?

Thanks a lot.

Giuseppe


This is an extract of my code:

m_Map = new ol.Map({
    layers : DLLayers.base.concat(DLLayers.info),
    target: 'map',
    controls:
    [
      new ol.control.Zoom(),
      new ol.control.ScaleLine(),
      new ol.control.MousePosition({
        projection: DLConfig.map.coordProjection
      }),
      new ol.control.ZoomToExtent({
        extent: ol.proj.transformExtent(
          DLConfig.map.initialExtent, DLConfig.map.coordProjection,
DLConfig.map.projection)
      })
    ],
    overlays:
    [
      new ol.Overlay({
        element: $("#mapPopup")
      })
    ],
    view: new ol.View({
      center: ol.proj.transform(
        DLConfig.map.centerCoord, DLConfig.map.coordProjection,
DLConfig.map.projection),
      extent: ol.proj.transformExtent(
        DLConfig.map.initialExtent, DLConfig.map.coordProjection,
DLConfig.map.projection),
      zoom: DLConfig.map.initialZoom,
      minZoom: DLConfig.map.minZoom,
      maxZoom:DLConfig.map.maxZoom
    })
  });


var select = new ol.interaction.Select({
    condition: ol.events.condition.mouseMove,
    layers: function(layer) {return layer.get("selectable");},
    style: function(feature, resolution){
      var size = feature.get('features').length;
      var style = styleHoverCache[size];
      if (!style)
      {
        style = [
          new ol.style.Style({
            image: new ol.style.Circle({
              radius: 12,
              stroke: new ol.style.Stroke({
                color: '#235e41',
                width: 2
              }),
              fill: new ol.style.Fill({
                color: '#46bc83'
              })
            }),
            text: new ol.style.Text({
              text: size.toString() > 1 ? size.toString() : "",
              fill: new ol.style.Fill({
                color: '#fff'
              })
            })
          })
        ];
        styleHoverCache[size] = style
      }
      return style;
    }
  });

  // add map interaction on mouse hover
  m_Map.addInteraction(
    select
  );

$(m_Map.getViewport()).on('mousemove', function(evt) {
    var pixel = m_Map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
  });


/*
 * Show feature popup
 */
function displayFeatureInfo(pixel)
{
  $("#mapPopupContent").empty();
  $("#mapPopup").hide();

  var feature = m_Map.forEachFeatureAtPixel(pixel, function(feature, layer){
    return feature;
  });

  if (isCluster(feature))
  {
    var content = buildClusterPopup(feature);

    $("#mapPopupContent").append(content);

m_Map.getOverlays().item(0).setPosition(m_Map.getCoordinateFromPixel(pixel));
//     m_Map.getOverlays().item(0).setPositioning(new
ol.OverlayPositioning('bottom-right'));
    $("#mapPopup").show();
  }
  else if (feature)
  {
    var content = buildFeaturePopup(feature);

    $("#mapPopupContent").append(content);

m_Map.getOverlays().item(0).setPosition(m_Map.getCoordinateFromPixel(pixel));
    $("#mapPopup").show();
  }
  else
    $("#mapPopupContent").empty();
};
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20150119/10b1f9b2/attachment.html>