Merge 943138a into 32c4c0e

visgl · Feb 11, 2020 · a4092af · a4092af
2 parents 32c4c0e + 943138a
commit a4092af
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/modules/google-maps/src/google-maps-overlay.js b/modules/google-maps/src/google-maps-overlay.js
@@ -79,15 +79,15 @@ export default class GoogleMapsOverlay {
       this._overlay
     );
 
-    const canSyncWithGoogleMaps = zoom >= 0 && pitch === 0;
+    const canSyncWithGoogleMaps = pitch === 0;
 
     deck.canvas.style.left = `${left}px`;
     deck.canvas.style.top = `${top}px`;
 
     deck.setProps({
       width,
       height,
-      viewState: {latitude, longitude, zoom},
+      viewState: {latitude, longitude, zoom, repeat: true},
       // deck.gl cannot sync with the base map with zoom < 0 and/or tilt
       layerFilter: canSyncWithGoogleMaps ? this.props.layerFilter : HIDE_ALL_LAYERS
     });

diff --git a/modules/google-maps/src/utils.js b/modules/google-maps/src/utils.js
@@ -1,6 +1,9 @@
 /* global document, google */
 import {Deck} from '@deck.gl/core';
 
+// https://en.wikipedia.org/wiki/Web_Mercator_projection#Formulas
+const MAX_LATITUDE = 85.05113;
+
 /**
  * Get a new deck instance
  * @param map (google.maps.Map) - The parent Map instance
@@ -76,6 +79,7 @@ export function destroyDeckInstance(deck) {
   deck.canvas.parentNode.removeChild(deck.canvas);
 }
 
+/* eslint-disable max-statements */
 /**
  * Get the current view state
  * @param map (google.maps.Map) - The parent Map instance
@@ -105,28 +109,44 @@ export function getViewState(map, overlay) {
   const nwContainerPx = new google.maps.Point(0, 0);
   const nw = projection.fromContainerPixelToLatLng(nwContainerPx);
   const nwDivPx = projection.fromLatLngToDivPixel(nw);
+  let leftOffset = nwDivPx.x;
+  let topOffset = nwDivPx.y;
+
+  // Adjust horizontal offset - position the viewport at the map in the center
+  const mapWidth = projection.getWorldWidth();
+  const mapCount = Math.ceil(width / mapWidth);
+  leftOffset -= Math.floor(mapCount / 2) * mapWidth;
 
   // Compute fractional zoom.
-  const scale = (topRight.x - bottomLeft.x) / width;
+  const scale = (bottomLeft.y - topRight.y) / height;
   const zoom = Math.log2(scale) + map.getZoom() - 1;
 
   // Compute fractional center.
-  const centerPx = new google.maps.Point(width / 2, height / 2);
+  let centerPx = new google.maps.Point(width / 2, height / 2);
   const centerContainer = projection.fromContainerPixelToLatLng(centerPx);
-  const latitude = centerContainer.lat();
+  let latitude = centerContainer.lat();
   const longitude = centerContainer.lng();
 
+  // Adjust vertical offset - limit latitude
+  if (Math.abs(latitude) > MAX_LATITUDE) {
+    latitude = latitude > 0 ? MAX_LATITUDE : -MAX_LATITUDE;
+    const center = new google.maps.LatLng(latitude, longitude);
+    centerPx = projection.fromLatLngToContainerPixel(center);
+    topOffset += centerPx.y - height / 2;
+  }
+
   return {
     width,
     height,
-    left: nwDivPx.x,
-    top: nwDivPx.y,
+    left: leftOffset,
+    top: topOffset,
     zoom,
     pitch: map.getTilt(),
     latitude,
     longitude
   };
 }
+/* eslint-enable max-statements */
 
 // Triggers picking on a mouse event
 function handleMouseEvent(deck, type, event) {

diff --git a/test/modules/google-maps/mock-maps-api.js b/test/modules/google-maps/mock-maps-api.js
@@ -40,11 +40,20 @@ export class Projection {
     this._viewport = new WebMercatorViewport(opts);
   }
 
+  getWorldWidth() {
+    return 512 * this._viewport.scale;
+  }
+
   fromLatLngToDivPixel(latLng) {
     const p = this._viewport.project([latLng.lng(), latLng.lat()]);
     return new Point(p[0], p[1]);
   }
 
+  fromLatLngToContainerPixel(latLng) {
+    const p = this._viewport.project([latLng.lng(), latLng.lat()]);
+    return new Point(p[0], p[1]);
+  }
+
   fromContainerPixelToLatLng(point) {
     const coord = this._viewport.unproject([point.x, point.y]);
     return new LatLng(coord[1], coord[0]);