From 9229a38ef36c7f663f9eb5329afb34d179d61852 Mon Sep 17 00:00:00 2001
From: Andrew Harvey <andrew.harvey4@gmail.com>
Date: Sat, 23 Jul 2016 20:13:12 +1000
Subject: [PATCH] add popup offset option closes #1962

---
 js/ui/popup.js                               |  56 ++++++++++-
 test/manual/marker.png                       | Bin 0 -> 2653 bytes
 test/manual/popup-offset-multiple-fixed.html | 100 +++++++++++++++++++
 test/manual/popup-offset-radius.html         |  97 ++++++++++++++++++
 4 files changed, 248 insertions(+), 5 deletions(-)
 create mode 100644 test/manual/marker.png
 create mode 100644 test/manual/popup-offset-multiple-fixed.html
 create mode 100644 test/manual/popup-offset-radius.html

diff --git a/js/ui/popup.js b/js/ui/popup.js
index 46bd8d55254..773c543a30e 100644
--- a/js/ui/popup.js
+++ b/js/ui/popup.js
@@ -6,6 +6,7 @@ var util = require('../util/util');
 var Evented = require('../util/evented');
 var DOM = require('../util/dom');
 var LngLat = require('../geo/lng_lat');
+var Point = require('point-geometry');
 
 /**
  * A popup component.
@@ -16,10 +17,19 @@ var LngLat = require('../geo/lng_lat');
  *   top right corner of the popup.
  * @param {boolean} [options.closeOnClick=true] If `true`, the popup will closed when the
  *   map is clicked.
- * @param {string} options.anchor - A string indicating the popup's location relative to
+ * @param {string} [options.anchor] - A string indicating the popup's location relative to
  *   the coordinate set via [Popup#setLngLat](#Popup#setLngLat).
  *   Options are `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`,
- * `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
+ *   `'top-right'`, `'bottom-left'`, and `'bottom-right'`. If unset the anchor will be
+ *   dynamically set to ensure the popup falls within the map container with a preference
+ *   for `'bottom'`.
+ *  @param {number|PointLike|Object} [options.offset] - The offset in pixels to apply
+ *  from the geographical location of the popup. This can be a single number representing
+ *  the radius of circular offsets, [`PointLike`](#PointLike) for a fixed `[x,y]` offset
+ *  regardless of the anchor, or an Object mapping anchor to a [`PointLike`](#PointLike)
+ *  objects to apply a different offsets for each anchor, eg. `{top: [0,-10], bottom: [0,0]}`.
+ *  For the offset values represented by a [`PointLike`](#PointLike), negatives indicate
+ *  left and up.
  * @example
  * var popup = new mapboxgl.Popup()
  *   .setLngLat(e.lngLat)
@@ -187,15 +197,48 @@ Popup.prototype = util.inherit(Evented, /** @lends Popup.prototype */{
         }
 
         var pos = this._map.project(this._lngLat).round(),
-            anchor = this.options.anchor;
+            anchor = this.options.anchor,
+            offset = this.options.offset;
+
+        // a fixed offset regardless of the anchor
+        var offsetFixed = [0, 0];
+        // an object of offsets per each anchor
+        var offsets;
+
+        if (offset) {
+            if (typeof offset === 'number') {
+                // when offset is a fixed radius
+                var cornerOffset = Math.round(Math.sqrt(0.5 * Math.pow(offset, 2)));
+                offsets = {
+                    'top': [0, offset],
+                    'top-left': [cornerOffset, cornerOffset],
+                    'top-right': [-cornerOffset, cornerOffset],
+                    'bottom': [0, -offset],
+                    'bottom-left': [cornerOffset, -cornerOffset],
+                    'bottom-right': [-cornerOffset, -cornerOffset],
+                    'left': [offset, 0],
+                    'right': [-offset, 0]
+                };
+            } else if (offset.length && offset.length === 2) {
+                // when the offset is a fixed [x,y]
+                offsetFixed = offset;
+            } else {
+                // when the offset is preset for each anchor
+                offsets = offset;
+            }
+        }
+
+        // maximum offsets for each anchor configuration: top, bottom
+        var offsetTop = (offsets && offsets.top || offsetFixed)[1];
+        var offsetBottom = (offsets && offsets.bottom || offsetFixed)[1];
 
         if (!anchor) {
             var width = this._container.offsetWidth,
                 height = this._container.offsetHeight;
 
-            if (pos.y < height) {
+            if (pos.y + offsetBottom < height) {
                 anchor = ['top'];
-            } else if (pos.y > this._map.transform.height - height) {
+            } else if (pos.y + offsetTop > this._map.transform.height - height) {
                 anchor = ['bottom'];
             } else {
                 anchor = [];
@@ -214,6 +257,9 @@ Popup.prototype = util.inherit(Evented, /** @lends Popup.prototype */{
             }
         }
 
+        // apply the offset to the Popup pos
+        pos = pos._add(Point.convert(offsets && offsets[anchor] || offsetFixed));
+
         var anchorTranslate = {
             'top': 'translate(-50%,0)',
             'top-left': 'translate(0,0)',
diff --git a/test/manual/marker.png b/test/manual/marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ff92111b70fef6167270ddcb728ff5f4481af8f
GIT binary patch
literal 2653
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
LNkvXXu0mjf@C5po

literal 0
HcmV?d00001

diff --git a/test/manual/popup-offset-multiple-fixed.html b/test/manual/popup-offset-multiple-fixed.html
new file mode 100644
index 00000000000..29342b2b9b0
--- /dev/null
+++ b/test/manual/popup-offset-multiple-fixed.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+
+    <link rel='stylesheet' href='../../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+<script src='../../dist/mapbox-gl-dev.js'></script>
+<script>
+    mapboxgl.accessToken = 'pk.eyJ1IjoiamZpcmUiLCJhIjoiZTFlNmQ3N2MzYmM2YzVjMzhkOTM2NTRhYzNiNGZiNGYifQ.1W47kmoEUpTJa3YIFefxUQ';
+
+    /* map with grey background to increase legibility of white popups */
+    var map = new mapboxgl.Map({
+        container: 'map',
+        style: {
+            'version': 8,
+            'sources': {},
+            'layers': [
+                {
+                    'id': 'background',
+                    'type': 'background',
+                    'paint': {
+                        'background-color': '#999'
+                    }
+                }
+            ]
+        }
+    });
+
+    var width = map.getContainer().offsetWidth,
+        height = map.getContainer().offsetHeight;
+
+    /* create a set of LngLat locations for all parts of the map which relate to a popup anchor option */
+    var lngLatLocations = {
+        'top-left': map.unproject([10, 10]),
+        'top': map.unproject([width / 2, 10]),
+        'top-right': map.unproject([width - 10, 10]),
+        'right': map.unproject([width - 10, height / 2]),
+        'bottom-right': map.unproject([width - 10, height - 10]),
+        'bottom': map.unproject([width / 2, height - 10]),
+        'bottom-left': map.unproject([10, height - 10]),
+        'left': map.unproject([10, height / 2]),
+        'center': map.unproject([width / 2, height / 2])
+    };
+
+    /* we have a complex marker which we'll need to define popup offsets for each of the popup anchors */
+    var markerWidth = 76;
+    var markerHeight = 101;
+    var markerRadius = markerWidth / 2;
+    var linearOffset = Math.round(Math.sqrt(0.5 * Math.pow(markerRadius, 2)));
+
+    var popupOffsets = {
+        'top': [0, 0],
+        'top-left': [0,0],//[linearOffset, (markerHeight - markerRadius - linearOffset) * -1],
+        'top-right': [0,0],//[-linearOffset, (markerHeight - markerRadius - linearOffset) * -1],
+        'bottom': [0, -markerHeight],
+        'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
+        'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
+        'left': [markerRadius, (markerHeight - markerRadius) * -1],
+        'right': [-markerRadius, (markerHeight - markerRadius) * -1]
+    };
+
+    map.on('load', function () {
+        /* create the markers */
+        Object.keys(lngLatLocations).map(function(loc) {
+            var img = document.createElement('img');
+            img.src = 'marker.png';
+            img.style.width = markerWidth + 'px';
+            img.style.height = markerHeight + 'px';
+            var marker = new mapboxgl.Marker(img, {
+                offset: {
+                    x: Math.round(-markerWidth / 2),
+                    y: -markerHeight
+                }
+            })
+            .setLngLat(lngLatLocations[loc])
+            .addTo(map);
+        });
+    });
+
+    /* create the popups */
+    /* this is a complex marker, so the popup offset is an object of positions for each anchor */
+    Object.keys(lngLatLocations).map(function(loc) {
+        (new mapboxgl.Popup({ offset: popupOffsets }))
+            .setLngLat(lngLatLocations[loc])
+            .setText(loc)
+            .addTo(map);
+    });
+</script>
+</body>
+</html>
diff --git a/test/manual/popup-offset-radius.html b/test/manual/popup-offset-radius.html
new file mode 100644
index 00000000000..67db027bad8
--- /dev/null
+++ b/test/manual/popup-offset-radius.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+
+    <link rel='stylesheet' href='../../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+<script src='../../dist/mapbox-gl-dev.js'></script>
+<script>
+    mapboxgl.accessToken = 'pk.eyJ1IjoiamZpcmUiLCJhIjoiZTFlNmQ3N2MzYmM2YzVjMzhkOTM2NTRhYzNiNGZiNGYifQ.1W47kmoEUpTJa3YIFefxUQ';
+
+    /* map with black background to increase legibility of white popups */
+    var map = new mapboxgl.Map({
+        container: 'map',
+        style: {
+            'version': 8,
+            'sources': {},
+            'layers': [
+                {
+                    'id': 'background',
+                    'type': 'background',
+                    'paint': {
+                        'background-color': '#000'
+                    }
+                }
+            ]
+        }
+    });
+
+    var width = map.getContainer().offsetWidth,
+        height = map.getContainer().offsetHeight;
+
+    /* create a set of LngLat locations for all parts of the map which relate to a popup anchor option */
+    var lngLatLocations = {
+        'top-left': map.unproject([10, 10]),
+        'top': map.unproject([width / 2, 10]),
+        'top-right': map.unproject([width - 10, 10]),
+        'right': map.unproject([width - 10, height / 2]),
+        'bottom-right': map.unproject([width - 10, height - 10]),
+        'bottom': map.unproject([width / 2, height - 10]),
+        'bottom-left': map.unproject([10, height - 10]),
+        'left': map.unproject([10, height / 2]),
+        'center': map.unproject([width / 2, height / 2])
+    };
+
+    /* size of marker to use */
+    var markerRadius = 50;
+
+    map.on('load', function () {
+        /* create the markers */
+        map.addSource('markers', {
+            'type': 'geojson',
+            'data': {
+                'type': 'FeatureCollection',
+                'features': Object.keys(lngLatLocations).map(function(loc) {
+                    return {
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Point',
+                            'coordinates': lngLatLocations[loc].toArray()
+                        }
+                    };
+                })
+            }
+        });
+
+        map.addLayer({
+            'id': 'marker-fill',
+            'type': 'circle',
+            'source': 'markers',
+            'paint': {
+                'circle-color': '#aaf',
+                'circle-radius': markerRadius
+            }
+        });
+    });
+
+    /* create the popups */
+    /* this is a circular marker, so the popup offset is a radius */
+    Object.keys(lngLatLocations).map(function(loc) {
+        (new mapboxgl.Popup({ offset: markerRadius }))
+            .setLngLat(lngLatLocations[loc])
+            .setText(loc)
+            .addTo(map);
+    });
+</script>
+</body>
+</html>