ol-ext

Class: Popup

ol.Overlay. Popup

A popup element to be displayed over the map and attached to a single map location. The popup are customized using CSS.

Parameters:
Name Type Description
options

Extend Overlay options

Properties
Name Type Argument Default Description
popupClass String <optional>

the a class of the overlay to style the popup.
anim Animate boolean <optional>
 false

the popup the popup, default false.
closeBox bool <optional>
 false

popup has a close box, default false.
onclose function | undefined <optional>

callback function when popup is closed
onshow function | undefined <optional>

callback function when popup is shown
offsetBox Number | Array.<number> <optional>

an offset box
positioning ol.OverlayPositioning | string | undefined

the 'auto' positioning var the popup choose its positioning to stay on the map.
minibar boolean <optional>
 false

add a mini vertical bar
Fires:
  • event:show
  • event:hide
Example
var popup = new ol.Overlay.Popup();
map.addOverlay(popup);
popup.show(coordinate, "Hello!");
popup.hide();

Extends

Methods

addPopupClass(c)

Add a CSS class to the popup.

Parameters:
Name Type Description
c string

class name.

getVisible()

Check if popup is visible

Returns:
Type
boolean

hide()

Hide the popup

removePopupClass(c)

Remove a CSS class to the popup.

Parameters:
Name Type Description
c string

class name.

setClosebox(b)

Set a close box to the popup.

Parameters:
Name Type Description
b bool

setPopupClass(c)

Set the CSS class of the popup.

Parameters:
Name Type Description
c string

class name.

setPositioning(pos)

Set positionning of the popup

Parameters:
Name Type Description
pos ol.OverlayPositioning | string | undefined

an ol.OverlayPositioning or 'auto' to var the popup choose the best position

show(coordinate, html)

Set the position and the content of the popup.

Parameters:
Name Type Description
coordinate ol.Coordinate | string

the coordinate of the popup or the HTML content.
html string | undefined

the HTML content (undefined = previous content).
Example
var popup = new ol.Overlay.Popup();
  // Show popup
  popup.show([166000, 5992000], "Hello world!");
  // Move popup at coord with the same info
  popup.show([167000, 5990000]);
  // set new info
  popup.show("New informations");