Initial commit

walkermatt · Sep 18, 2014 · 10708ff · 10708ff
commit 10708ff
Show file tree

Hide file tree

Showing 6 changed files with 242 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+# OpenLayers 3 Popup
+
+Basic popup for an OL3 map. By default the map is centered so that the popup is
+entirely visible.
+
+## Demo
+
+Clone or download the repository and open
+[examples/popup.html](examples/popup.html) in a browser or [view the example on
+RawGit](http://rawgit.com/walkermatt/ol3-popup/master/examples/popup.html)
+
+## Credit
+
+Based on an example by [Tim Schaub](https://github.com/tschaub) posted on the
+[OL3-Dev list](https://groups.google.com/forum/#!forum/ol3-dev).
+
+## License
+
+MIT (c) Matt Walker.
diff --git a/examples/popup.css b/examples/popup.css
@@ -0,0 +1,12 @@
+html, body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: small;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+}
diff --git a/examples/popup.html b/examples/popup.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>OpenLayers 3 - Popup</title>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" />
+    <link rel="stylesheet" href="../src/ol3-popup.css" />
+    <link rel="stylesheet" href="popup.css" />
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
+    <script src="../src/ol3-popup.js"></script>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/examples/popup.js b/examples/popup.js
@@ -0,0 +1,20 @@
+var map = new ol.Map({
+    target: 'map',
+    layers: [
+        new ol.layer.Tile({
+            source: new ol.source.OSM()
+        })
+    ],
+    view: new ol.View({
+        center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
+        zoom: 6
+    })
+});
+
+var popup = new ol.Overlay.Popup();
+map.addOverlay(popup);
+
+map.on('singleclick', function(evt) {
+    var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
+    popup.show(evt.coordinate, '<div><h2>Coordinates</h2><p>' + prettyCoord + '</p></div>');
+});
diff --git a/src/ol3-popup.css b/src/ol3-popup.css
@@ -0,0 +1,68 @@
+.ol-popup {
+    display: none;
+    position: absolute;
+    background-color: white;
+    padding: 15px;
+    border: 1px solid #cccccc;
+    bottom: 12px;
+    left: -50px;
+}
+
+.ol-popup:after, .ol-popup:before {
+    top: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.ol-popup:after {
+    border-top-color: white;
+    border-width: 10px;
+    left: 48px;
+    margin-left: -10px;
+}
+
+.ol-popup:before {
+    border-top-color: #cccccc;
+    border-width: 11px;
+    left: 48px;
+    margin-left: -11px;
+}
+
+.ol-popup-content {
+    min-width: 170px;
+    max-height: 200px;
+    overflow-x: auto;
+}
+
+.ol-popup-closer {
+    color: gray;
+    text-decoration: none;
+    position: absolute;
+    top: 2px;
+    right: 8px;
+}
+
+.ol-popup-closer:after {
+    content: "✖";
+}
+
+.ol-popup div.infoResult {
+    min-width: 130px;
+}
+
+.ol-popup div.infoResult p {
+    padding: 0.1em;
+    margin: 0;
+}
+
+.ol-popup-content h3 {
+    margin: 0.25em 0;
+}
+
+.ol-popup.marker {
+    margin-bottom: 30px;
+}
diff --git a/src/ol3-popup.js b/src/ol3-popup.js
@@ -0,0 +1,106 @@
+ol.Overlay.Popup = function(opt_options) {
+
+    var options = opt_options || {};
+
+    this.panMapIfOutOfView = options.panMapIfOutOfView;
+    if (this.panMapIfOutOfView === undefined) {
+        this.panMapIfOutOfView = true;
+    }
+
+    this.ani = options.ani;
+    if (this.ani === undefined) {
+        this.ani = ol.animation.pan;
+    }
+
+    this.ani_opts = options.ani_opts;
+    if (this.ani_opts === undefined) {
+        this.ani_opts = {'duration': 250};
+    }
+
+    this.container = document.createElement('div');
+    this.container.className = 'ol-popup';
+
+    this.closer = document.createElement('a');
+    this.closer.className = 'ol-popup-closer';
+    this.closer.href = '#';
+    this.container.appendChild(this.closer);
+
+    var that = this;
+    this.closer.addEventListener('click', function(evt) {
+        that.container.style.display = 'none';
+        that.closer.blur();
+        evt.preventDefault();
+    }, false);
+
+    this.content = document.createElement('div');
+    this.content.className = 'ol-popup-content';
+    this.container.appendChild(this.content);
+
+    ol.Overlay.call(this, {
+        element: this.container,
+        stopEvent: true
+    });
+
+};
+
+ol.inherits(ol.Overlay.Popup, ol.Overlay);
+
+ol.Overlay.Popup.prototype.show = function(coord, html) {
+    this.setPosition(coord);
+    this.content.innerHTML = html;
+    this.container.style.display = 'block';
+    if (this.panMapIfOutOfView) {
+        this.panIntoView(coord);
+    }
+    return this;
+};
+
+ol.Overlay.Popup.prototype.panIntoView = function(coord) {
+
+    var popSize = {
+            width: this.getElement().clientWidth + 20,
+            height: this.getElement().clientHeight + 20
+        },
+        mapSize = this.getMap().getSize(),
+        center = this.getMap().getView().getCenter().slice(0),
+        res = this.getMap().getView().getResolution();
+
+    var tailHeight = 20,
+        tailOffsetLeft = 60,
+        tailOffsetRight = popSize.width - tailOffsetLeft,
+        popPx = this.getMap().getPixelFromCoordinate(coord);
+
+    var fromLeft = (popPx[0] - tailOffsetLeft),
+        fromRight = mapSize[0] - (popPx[0] + tailOffsetRight),
+        x = center[0];
+
+    var fromTop = popPx[1] - popSize.height,
+        fromBottom = mapSize[1] - (popPx[1] + tailHeight),
+        y = center[1];
+
+    if (fromRight < 0) {
+        x -= fromRight * res;
+    } else if (fromLeft < 0) {
+        x += fromLeft * res;
+    }
+
+    if (fromTop < 0) {
+        y -= fromTop * res;
+    } else if (fromBottom < 0) {
+        y += fromBottom * res;
+    }
+
+    if (this.ani && this.ani_opts) {
+        this.ani_opts.source = center;
+        this.getMap().beforeRender(this.ani(this.ani_opts));
+    }
+    this.getMap().getView().setCenter([x, y]);
+
+    return this.getMap().getView().getCenter();
+
+};
+
+ol.Overlay.Popup.prototype.hide = function() {
+    this.container.style.display = 'none';
+    return this;
+};