From 17b204092523a6d194b930e107120d5e0f676408 Mon Sep 17 00:00:00 2001 From: gigmaps Date: Tue, 27 Oct 2015 16:42:09 -0700 Subject: [PATCH 1/5] update the infobubble autopan functionality: - so map is only panned enough for the infobubble window to be visible with an edge margin - as per google.maps.InfoWindow() - add an `autopanMargin` option to set the margin between the map edge and the infobubble window (with default = 10px) - update variable naming & comments in panToView() function remove comment about the use of `anchorPoint` being a hack - since `pixelBounds` has been deprecated --- src/infobubble.js | 61 +++++++++++++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 23 deletions(-) diff --git a/src/infobubble.js b/src/infobubble.js index 0f8f82b..def8e72 100755 --- a/src/infobubble.js +++ b/src/infobubble.js @@ -70,6 +70,10 @@ function InfoBubble(opt_options) { options['disableAutoPan'] = false; } + if (options['autopanMargin'] == undefined) { + options['autopanMargin'] = this.AUTOPAN_MARGIN_; + } + if (options['disableAnimation'] == undefined) { options['disableAnimation'] = false; } @@ -179,6 +183,13 @@ InfoBubble.prototype.BORDER_RADIUS_ = 10; */ InfoBubble.prototype.BACKGROUND_COLOR_ = '#fff'; +/** + * Default autopan margin (from any edge) + * @const + * @private + */ +InfoBubble.prototype.AUTOPAN_MARGIN_ = 10; + /** * Default close image source * @const @@ -1092,6 +1103,7 @@ InfoBubble.prototype['position_changed'] = * Pan the InfoBubble into view */ InfoBubble.prototype.panToView = function() { + var projection = this.getProjection(); if (!projection) { @@ -1104,40 +1116,43 @@ InfoBubble.prototype.panToView = function() { return; } - var anchorHeight = this.getAnchorHeight_(); - var height = this.bubble_.offsetHeight + anchorHeight; - var map = this.get('map'); - var mapDiv = map.getDiv(); - var mapHeight = mapDiv.offsetHeight; + var autopanMargin = this.get('autopanMargin'); // get the edge margin from options (or default) + var anchorHeight = this.getAnchorHeight_(); // height of the marker icon - pixels + var infobubbleHeight = this.bubble_.offsetHeight; // height of the infobubble - pixels + var infobubbleWidth = this.bubble_.offsetWidth; // width of the infobubble - pixels - var latLng = this.getPosition(); - var centerPos = projection.fromLatLngToContainerPixel(map.getCenter()); - var pos = projection.fromLatLngToContainerPixel(latLng); - - // Find out how much space at the top is free - var spaceTop = centerPos.y - height; + var map = this.get('map'); + var mapDiv = map.getDiv(); // the div containing the map + var mapHeight = mapDiv.offsetHeight; // height of the div containing the map - pixels + var mapWidth = mapDiv.offsetWidth; // height of the div containing the map - pixels - // Fine out how much space at the bottom is free - var spaceBottom = mapHeight - centerPos.y; + var markerLatLng = this.getPosition(); // coordinate of the marker - lat/lng + var markerPosition = projection.fromLatLngToContainerPixel(markerLatLng); // the marker position - pixels - var needsTop = spaceTop < 0; - var deltaY = 0; + var mapCenter = projection.fromLatLngToContainerPixel(map.getCenter()); // centre of the map - pixels - if (needsTop) { - spaceTop *= -1; - deltaY = (spaceTop + spaceBottom) / 2; + var spaceTop = markerPosition.y - infobubbleHeight - anchorHeight - autopanMargin; // Find out how much space at the top is free (including the autopan margin) - pixels + var spaceRight = mapWidth - markerPosition.x - infobubbleWidth/2 - autopanMargin; // Find out how much space at the top is free (including the autopan margin) - pixels + var spaceLeft = markerPosition.x - infobubbleWidth/2 - autopanMargin; // Find out how much space at the top is free (including the autopan margin) - pixels + + if(spaceTop<0){ + mapCenter.y += spaceTop; // if spaceTop is -ve, we have to move the map centre UP (ie delete the difference from the y-axis value) - hence we add the -ve spaceTop value + } + if(spaceRight<0){ + mapCenter.x -= spaceRight; // if spaceRight is -ve, we have to move the map centre RIGHT (ie add the difference to the x-axis value) - hence we minus the -ve spaceRight value + } + if(spaceLeft<0){ + mapCenter.x += spaceLeft; // if spaceLeft is -ve, we have to move the map centre LEFT (ie delete the difference to the x-axis value) - hence we add the -ve spaceRight value } - pos.y -= deltaY; - latLng = projection.fromContainerPixelToLatLng(pos); + newMapCenterlatLng = projection.fromContainerPixelToLatLng(mapCenter); - if (map.getCenter() != latLng) { - map.panTo(latLng); + if (map.getCenter() != newMapCenterlatLng) { + map.panTo(newMapCenterlatLng); } }; InfoBubble.prototype['panToView'] = InfoBubble.prototype.panToView; - /** * Converts a HTML string to a document fragment. * From 59f0e4f16a3e0a3b9bc55dcbbdb14a0c77599cb0 Mon Sep 17 00:00:00 2001 From: gigmaps Date: Tue, 27 Oct 2015 20:36:15 -0700 Subject: [PATCH 2/5] update the infobubble autopan functionality: - add infobubble `arrowHeight` variable to take into account the (variable) height of the bottom pointer / arrow - update spaceTop formula and associated comments --- src/infobubble.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/infobubble.js b/src/infobubble.js index def8e72..57c6b9a 100755 --- a/src/infobubble.js +++ b/src/infobubble.js @@ -1118,6 +1118,7 @@ InfoBubble.prototype.panToView = function() { var autopanMargin = this.get('autopanMargin'); // get the edge margin from options (or default) var anchorHeight = this.getAnchorHeight_(); // height of the marker icon - pixels + var arrowHeight = this.getArrowSize_(); // height of the infobubble bottom arrow - pixels var infobubbleHeight = this.bubble_.offsetHeight; // height of the infobubble - pixels var infobubbleWidth = this.bubble_.offsetWidth; // width of the infobubble - pixels @@ -1131,9 +1132,9 @@ InfoBubble.prototype.panToView = function() { var mapCenter = projection.fromLatLngToContainerPixel(map.getCenter()); // centre of the map - pixels - var spaceTop = markerPosition.y - infobubbleHeight - anchorHeight - autopanMargin; // Find out how much space at the top is free (including the autopan margin) - pixels - var spaceRight = mapWidth - markerPosition.x - infobubbleWidth/2 - autopanMargin; // Find out how much space at the top is free (including the autopan margin) - pixels - var spaceLeft = markerPosition.x - infobubbleWidth/2 - autopanMargin; // Find out how much space at the top is free (including the autopan margin) - pixels + var spaceTop = markerPosition.y - infobubbleHeight - arrowHeight - anchorHeight - autopanMargin; // calculate free space or overrun at the top (including the autopan margin) - pixels + var spaceRight = mapWidth - markerPosition.x - infobubbleWidth/2 - autopanMargin; // calculate free space or overrun on the right (including the autopan margin) - pixels + var spaceLeft = markerPosition.x - infobubbleWidth/2 - autopanMargin; // calculate free space or overrun on the left (including the autopan margin) - pixels if(spaceTop<0){ mapCenter.y += spaceTop; // if spaceTop is -ve, we have to move the map centre UP (ie delete the difference from the y-axis value) - hence we add the -ve spaceTop value From 76bbdcd3d6a2db5cf7d28adea4472cbce8c8c33e Mon Sep 17 00:00:00 2001 From: gigmaps Date: Mon, 2 Nov 2015 16:44:26 -0800 Subject: [PATCH 3/5] update 'panToView()' comments and formatting to match existing style --- src/infobubble.js | 73 ++++++++++++++++++++++++++++++----------------- 1 file changed, 47 insertions(+), 26 deletions(-) diff --git a/src/infobubble.js b/src/infobubble.js index 57c6b9a..ab1d17e 100755 --- a/src/infobubble.js +++ b/src/infobubble.js @@ -1115,35 +1115,56 @@ InfoBubble.prototype.panToView = function() { // No Bubble yet so do nothing return; } - - var autopanMargin = this.get('autopanMargin'); // get the edge margin from options (or default) - var anchorHeight = this.getAnchorHeight_(); // height of the marker icon - pixels - var arrowHeight = this.getArrowSize_(); // height of the infobubble bottom arrow - pixels - var infobubbleHeight = this.bubble_.offsetHeight; // height of the infobubble - pixels - var infobubbleWidth = this.bubble_.offsetWidth; // width of the infobubble - pixels + // get the edge margin from options (or default) + var autopanMargin = this.get('autopanMargin'); + // height of the marker icon - pixels + var anchorHeight = this.getAnchorHeight_(); + // height of the infobubble bottom arrow - pixels + var arrowHeight = this.getArrowSize_(); + // height of the infobubble - pixels + var infobubbleHeight = this.bubble_.offsetHeight; + // width of the infobubble - pixels + var infobubbleWidth = this.bubble_.offsetWidth; var map = this.get('map'); - var mapDiv = map.getDiv(); // the div containing the map - var mapHeight = mapDiv.offsetHeight; // height of the div containing the map - pixels - var mapWidth = mapDiv.offsetWidth; // height of the div containing the map - pixels - - var markerLatLng = this.getPosition(); // coordinate of the marker - lat/lng - var markerPosition = projection.fromLatLngToContainerPixel(markerLatLng); // the marker position - pixels - - var mapCenter = projection.fromLatLngToContainerPixel(map.getCenter()); // centre of the map - pixels - - var spaceTop = markerPosition.y - infobubbleHeight - arrowHeight - anchorHeight - autopanMargin; // calculate free space or overrun at the top (including the autopan margin) - pixels - var spaceRight = mapWidth - markerPosition.x - infobubbleWidth/2 - autopanMargin; // calculate free space or overrun on the right (including the autopan margin) - pixels - var spaceLeft = markerPosition.x - infobubbleWidth/2 - autopanMargin; // calculate free space or overrun on the left (including the autopan margin) - pixels + // the div containing the map + var mapDiv = map.getDiv(); + // height of the div containing the map - pixels + var mapHeight = mapDiv.offsetHeight; + // height of the div containing the map - pixels + var mapWidth = mapDiv.offsetWidth; + + // coordinate of the marker - lat/lng + var markerLatLng = this.getPosition(); + // the marker position - pixels + var markerPosition = projection.fromLatLngToContainerPixel(markerLatLng); + + // centre of the map - pixels + var mapCenter = projection.fromLatLngToContainerPixel(map.getCenter()); + // calculate top free space or overrun (incl autopan margin) - pixels + var spaceTop = markerPosition.y - infobubbleHeight - arrowHeight - anchorHeight - autopanMargin; + // calculate right side free space or overrun (incl autopan margin) - pixels + var spaceRight = mapWidth - markerPosition.x - infobubbleWidth/2 - autopanMargin; + // calculate left side free space or overrun (incl autopan margin) - pixels + var spaceLeft = markerPosition.x - infobubbleWidth/2 - autopanMargin; - if(spaceTop<0){ - mapCenter.y += spaceTop; // if spaceTop is -ve, we have to move the map centre UP (ie delete the difference from the y-axis value) - hence we add the -ve spaceTop value - } - if(spaceRight<0){ - mapCenter.x -= spaceRight; // if spaceRight is -ve, we have to move the map centre RIGHT (ie add the difference to the x-axis value) - hence we minus the -ve spaceRight value - } - if(spaceLeft<0){ - mapCenter.x += spaceLeft; // if spaceLeft is -ve, we have to move the map centre LEFT (ie delete the difference to the x-axis value) - hence we add the -ve spaceRight value + if(spaceTop < 0){ + /* if spaceTop is -ve, we have to move the map centre UP + (ie delete the difference from the y-axis value) + hence we add the -ve spaceTop value */ + mapCenter.y += spaceTop; + } + if(spaceRight < 0){ + /* if spaceRight is -ve, we have to move the map centre RIGHT + (ie add the difference to the x-axis value) + hence we minus the -ve spaceRight value */ + mapCenter.x -= spaceRight; + } + if(spaceLeft < 0){ + /* if spaceLeft is -ve, we have to move the map centre LEFT + (ie delete the difference to the x-axis value) + hence we add the -ve spaceRight value */ + mapCenter.x += spaceLeft; } newMapCenterlatLng = projection.fromContainerPixelToLatLng(mapCenter); From fc08a18adf918e5079daa99a642b78c6bfa49fb9 Mon Sep 17 00:00:00 2001 From: gigmaps Date: Wed, 4 Nov 2015 16:23:08 -0800 Subject: [PATCH 4/5] update the infobubble autopan functionality - remove comment about the use of `anchorPoint` being a hack - since `pixelBounds` has been deprecated --- src/infobubble.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/infobubble.js b/src/infobubble.js index ab1d17e..b68e8e9 100755 --- a/src/infobubble.js +++ b/src/infobubble.js @@ -1779,8 +1779,6 @@ InfoBubble.prototype.figureOutSize_ = function() { /** * Get the height of the anchor * - * This function is a hack for now and doesn't really work that good, need to - * wait for pixelBounds to be correctly exposed. * @private * @return {number} The height of the anchor. */ From 2d961e17aa0659bb8c40ec60bebe2d19a33b28d2 Mon Sep 17 00:00:00 2001 From: gigmaps Date: Mon, 23 Nov 2015 16:48:17 -0800 Subject: [PATCH 5/5] update the infobubble autopan functionality - keep to the 80 char line length - spaces around '/' - space between ')' and '{' - comment indentation 2 spaces instead of 4 - add 'var' to define 'newMapCenterLatLng' as local variable --- src/infobubble.js | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/infobubble.js b/src/infobubble.js index b68e8e9..8798bde 100755 --- a/src/infobubble.js +++ b/src/infobubble.js @@ -1107,12 +1107,12 @@ InfoBubble.prototype.panToView = function() { var projection = this.getProjection(); if (!projection) { - // The map projection is not ready yet so do nothing + // The map projection is not ready yet so do nothing return; } if (!this.bubble_) { - // No Bubble yet so do nothing + // No Bubble yet so do nothing return; } // get the edge margin from options (or default) @@ -1142,32 +1142,34 @@ InfoBubble.prototype.panToView = function() { // centre of the map - pixels var mapCenter = projection.fromLatLngToContainerPixel(map.getCenter()); // calculate top free space or overrun (incl autopan margin) - pixels - var spaceTop = markerPosition.y - infobubbleHeight - arrowHeight - anchorHeight - autopanMargin; + var spaceTop = markerPosition.y - infobubbleHeight - arrowHeight + - anchorHeight - autopanMargin; // calculate right side free space or overrun (incl autopan margin) - pixels - var spaceRight = mapWidth - markerPosition.x - infobubbleWidth/2 - autopanMargin; + var spaceRight = mapWidth - markerPosition.x - infobubbleWidth / 2 + - autopanMargin; // calculate left side free space or overrun (incl autopan margin) - pixels - var spaceLeft = markerPosition.x - infobubbleWidth/2 - autopanMargin; + var spaceLeft = markerPosition.x - infobubbleWidth / 2 - autopanMargin; - if(spaceTop < 0){ - /* if spaceTop is -ve, we have to move the map centre UP - (ie delete the difference from the y-axis value) - hence we add the -ve spaceTop value */ + if(spaceTop < 0) { + /* if spaceTop is -ve, we have to move the map centre UP + (ie delete the difference from the y-axis value) + hence we add the -ve spaceTop value */ mapCenter.y += spaceTop; } - if(spaceRight < 0){ - /* if spaceRight is -ve, we have to move the map centre RIGHT - (ie add the difference to the x-axis value) - hence we minus the -ve spaceRight value */ + if(spaceRight < 0) { + /* if spaceRight is -ve, we have to move the map centre RIGHT + (ie add the difference to the x-axis value) + hence we minus the -ve spaceRight value */ mapCenter.x -= spaceRight; } - if(spaceLeft < 0){ - /* if spaceLeft is -ve, we have to move the map centre LEFT - (ie delete the difference to the x-axis value) - hence we add the -ve spaceRight value */ + if(spaceLeft < 0) { + /* if spaceLeft is -ve, we have to move the map centre LEFT + (ie delete the difference to the x-axis value) + hence we add the -ve spaceRight value */ mapCenter.x += spaceLeft; } - newMapCenterlatLng = projection.fromContainerPixelToLatLng(mapCenter); + var newMapCenterlatLng = projection.fromContainerPixelToLatLng(mapCenter); if (map.getCenter() != newMapCenterlatLng) { map.panTo(newMapCenterlatLng);