ol-popup-umd

Popup overlay for OpenLayers with UMD wrapper

Basic popup for an OpenLayers lib. By default the map is centered so that the popup is entirely visible. This project originally forked from ol3-popup by Matt Walker and extended with new features like event emitting, additional methods and others, also packed as UMD package.

Installation

Install it thought NPM:

npm install ol-popup-umd

Or download the latest version archive and add it with script tag:

<script src="ol-popup-umd/dist/bundle.min.js"></script>

Usage

Plugin is packed into UMD wrapper, import it with CommonJS or ES6:

import PopupOverlay from 'ol-popup-umd';
const PopupOverlay = require('ol-popup-umd');

In Browser environment it is available as ol.PopupOverlay.

Demo

Clone or download the repository and open html files from examples directory in a browser. Click on the map to display a popup, click close to the edge of the map to see it pan into view.

API Reference

Typedef

PopupOptions : Object

Properties

Name	Type	Description
id	number | string | undefined	Set the overlay id. The overlay id can be used with the ol.Map#getOverlayById method.
offset	number[] | undefined	Offsets in pixels used when positioning the overlay. The first element in the array is the horizontal offset. A positive value shifts the overlay right. The second element in the array is the vertical offset. A positive value shifts the overlay down. Default is [0, 0].
position	ol.Coordinate | undefined	The overlay position in map projection.
positioning	ol.Overlay.Positioning | string | undefined	Defines how the overlay is actually positioned with respect to its position property. Possible values are bottom-left, bottom-center, bottom-right, center-left, center-center, center-right, top-left, top-center, and top-right. Default is top-left.
stopEvent	boolean | undefined	Whether event propagation to the map viewport should be stopped. Default is true. If true the overlay is placed in the same container as that of the controls (CSS class name ol-overlaycontainer-stopevent); if false it is placed in the container with CSS class name ol-overlaycontainer.
insertFirst	boolean | undefined	Whether the overlay is inserted first in the overlay container, or appended. Default is true. If the overlay is placed in the same container as that of the controls (see the stopEvent option) you will probably set insertFirst to true so the overlay is displayed below the controls.
autoPan	boolean | undefined	If set to true the map is panned when calling setPosition, so that the overlay is entirely visible in the current viewport. The default is true.
autoPanAnimation	olx.animation.PanOptions | undefined	The options used to create a ol.animation.pan animation. This animation is only used when autoPan is enabled. Default is { duration: 300, easing: easeInOutCubic }. If set to null the panning is not animated.
autoPanMargin	number | undefined	The margin (in pixels) between the overlay and the borders of the map when autopanning. The default is 20.
content	Element | HTMLCollection | string | undefined	Popup initial content.
beforeShow	function | undefined	Function that called before popup show. Can be used for show animation.
beforeHide	function | undefined	Function that called before popup hide. Can be used for hide animation.

Classes

Popup(options : PopupOptions)

Extends:

• openlayers~ol.Overlay

Params:

Name	Type	Description
options	PopupOptions	Popup options.

Members

set content : HTMLCollection

get content : Element

Methods

setContent(content : Element | HTMLCollection | string)

Params:

Name	Type	Description
content	Element | HTMLCollection | string	Update popup inner content.

---

getContent() : Element

Returns:

Element - Inner content of popup.

---

setMap(map : ol.Map)

Params:

Name	Type	Description
map	ol.Map	OpenLayers map object.

---

bringToFront() Show on top of other popups.

---

show(coordinate : ol.Coordinate,content : Element | HTMLCollection | string) : Promise Shows popup.

Params:

Name	Type	Description
coordinate	ol.Coordinate	New popup position.
content	Element | HTMLCollection | string	Replace inner content.

Returns:

Promise - Returns Promise that resolves when showing completes.

Events:

• Popup#show Show event.

---

hide() : Promise Hides popup.

Returns:

Promise - Returns Promise that resolves when hiding completes.

Events:

• Popup#hide Hide event.

---

Credit

Based on ol3-popup by Matt Walker and an example by Tim Schaub posted on the OL3-Dev list.

License

MIT 2016 (c) Matt Walker, Vladimir Vershinin