Giter Club home page Giter Club logo

ol3-popup's Introduction

OpenLayers 3 Popup

Basic popup overlay for an OL3 map. By default the map is centred so that the popup is entirely visible.

Examples

The examples demonstrate usage and can be viewed online thanks to RawGit:

  • 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

The source for all examples can be found in examples.

API

new ol.Overlay.Popup(opt_options)

OpenLayers 3 Popup Overlay. See the examples for usage. Styling can be done via CSS.

Parameters:

Name Type Description
opt_options Object Overlay options, extends olx.OverlayOptions adding: panMapIfOutOfView Boolean - Should the map be panned so that the popup is entirely within view.

Extends

ol.Overlay

Methods

show(coord,html)

Show the popup.

Parameters:
Name Type Description
coord ol.Coordinate Where to anchor the popup.
html String String of HTML to display within the popup.
hide()

Hide the popup.

License

MIT (c) Matt Walker.

Credit

Based on an example by Tim Schaub posted on the OL3-Dev list.

Also see

If you find the popup useful you might also like the ol3-layerswitcher.

ol3-popup's People

Contributors

walkermatt avatar fiendish avatar jonataswalker avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.