Basic popup overlay for an 'ol' map. By default the map is centred so that the popup is entirely visible.
Compatible with OpenLayers version 5, 6, 7, 8 and 9 (see note in Install - Parcel,
Webpack etc. regarding installing the appropriate version
of ol-popup
for OpenLayers).
The examples demonstrate usage and can be viewed online thanks to raw.githack.com:
- Basic usage
- Create a popup instance, show it on single-click specifying the content
- DOM Events
- Handle DOM events triggered by interacting with elements within the popup content
- Scroll
- Controlling popup dimensions and scrolling overflowing content
- Multiple popups
- Add a new popup each time the maps is clicked
- ESM build
- To use the popup with the
ol
package and a module bundler such as Vite, Parcel, Webpack etc. see ol-popup sandbox.
- To use the popup with the
The source for all examples can be found in examples.
Load ol-popup.js
after OpenLayers. The popup overlay is available as Popup
or ol.Overlay.Popup
.
<script src="https://unpkg.com/ol-popup@latest/dist/ol-popup.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ol-popup@latest/dist/ol-popup.css" />
NPM package: ol-popup.
Install the package via npm
npm install ol-popup --save
ol
package prior to v5 you'll need to install ol-popup@v3.0.0
.
The CSS file ol-popup.css
can be found in ./node_modules/ol-popup/dist
Extends Overlay
OpenLayers Popup Overlay. See the examples for usage. Styling can be done via CSS.
opt_options
ol_Overlay_Options? OpenLayers Overlay options, defaults to{autoPan: {animation: {duration: 250}}}
Show the popup.
coord
ol_coordinate_Coordinate Where to anchor the popup.html
(String | HTMLElement) String or element of HTML to display within the popup.
Returns Popup The Popup instance
Hide the popup.
Returns Popup The Popup instance
Indicates if the popup is in open state
Returns Boolean Whether the popup instance is open
Contributions are welcome, please create an issue first to discuss any potential contributions.
The API section of the README.md
is generated from the JSDoc comments in the source code. To update the API docs edit the comments in the code then run:
npm run doc
In order to use the doc
npm script you will need to install the devDependencies
:
npm install --only=dev
MIT (c) Matt Walker.
Based on an example by Tim Schaub posted on the OL3-Dev list.
If you find the popup useful you might also like the ol-layerswitcher.