Skip to content
This repository was archived by the owner on Dec 15, 2018. It is now read-only.

update the infobubble autopan functionality: #14

Open
gigmaps wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open

update the infobubble autopan functionality: #14

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
17b2040
update the infobubble autopan functionality:
gigmaps Oct 27, 2015
59f0e4f
update the infobubble autopan functionality:
gigmaps Oct 28, 2015
76bbdcd
update 'panToView()' comments and formatting to match existing style
gigmaps Nov 3, 2015
fc08a18
update the infobubble autopan functionality
gigmaps Nov 5, 2015
2d961e1
update the infobubble autopan functionality
gigmaps Nov 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 39 additions & 23 deletions src/infobubble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -1092,6 +1103,7 @@ InfoBubble.prototype['position_changed'] =
* Pan the InfoBubble into view
*/
InfoBubble.prototype.panToView = function() {

var projection = this.getProjection();

if (!projection) {
Expand All @@ -1104,40 +1116,44 @@ 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)
Copy link
Contributor

@skarEE skarEE Oct 29, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please follow the same style that already existed.

This is mainly around position of comments and keeping to 80 character line limits.

Copy link
Contributor Author

@gigmaps gigmaps Nov 3, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok no worries - comments shifted to line above and line length limited to ~80 char.

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

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 - 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
}
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);
Copy link
Contributor

@skarEE skarEE Nov 23, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

var newMapCenterLatLng

Copy link
Contributor Author

@gigmaps gigmaps Nov 24, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated


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.
*
Expand Down