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