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.
Install it thought NPM:
npm install ol-popup-umdOr download the latest version archive and add it with script tag:
<script src="ol-popup-umd/dist/bundle.min.js"></script>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.
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.
###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. |
Extends:
- openlayers~ol.Overlay
Params:
| Name | Type | Description |
|---|---|---|
| options | PopupOptions | Popup options. |
set content : HTMLCollection
get content : Element
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.
Based on ol3-popup by Matt Walker and an example by Tim Schaub posted on the OL3-Dev list.
MIT 2016 (c) Matt Walker, Vladimir Vershinin