Merge pull request #81 from anderswi/feature/google-tilt-support

fix: corrected project/unproject when tilting/rotating a google vector map
JamesLMilner · Sep 17, 2023 · b0a69c5 · b0a69c5
2 parents 6d1e079 + 25fe7a2
commit b0a69c5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 53 deletions.
diff --git a/development/src/index.ts b/development/src/index.ts
@@ -334,6 +334,7 @@ const example = {
 					center: { lat: this.lat, lng: this.lng },
 					zoom: this.zoom,
 					clickableIcons: false,
+					mapId: process.env.GOOGLE_MAP_ID,
 				}
 			);
 

diff --git a/src/adapters/google-maps.adapter.ts b/src/adapters/google-maps.adapter.ts
@@ -105,36 +105,20 @@ export class TerraDrawGoogleMapsAdapter extends TerraDrawBaseAdapter {
 			throw new Error("cannot get bounds");
 		}
 
-		const northWest = new this._lib.LatLng(
-			bounds.getNorthEast().lat(),
-			bounds.getSouthWest().lng()
-		);
-
-		const projection = this._map.getProjection();
+		const projection = this._overlay.getProjection();
 		if (projection === undefined) {
 			throw new Error("cannot get projection");
 		}
 
-		const projectedNorthWest = projection.fromLatLngToPoint(northWest);
-		if (projectedNorthWest === null) {
-			throw new Error("cannot get projectedNorthWest");
-		}
-
-		const projected = projection.fromLatLngToPoint({ lng, lat });
-		if (projected === null) {
-			throw new Error("cannot get projected lng lat");
-		}
+		const point = projection.fromLatLngToContainerPixel(
+			new google.maps.LatLng(lat, lng)
+		);
 
-		const zoom = this._map.getZoom();
-		if (zoom === undefined) {
-			throw new Error("cannot get zoom");
+		if (point === null) {
+			throw new Error("cannot project coordinates");
 		}
 
-		const scale = Math.pow(2, zoom);
-		return {
-			x: Math.floor((projected.x - projectedNorthWest.x) * scale),
-			y: Math.floor((projected.y - projectedNorthWest.y) * scale),
-		};
+		return { x: point.x, y: point.y };
 	}
 
 	/**
@@ -144,44 +128,20 @@ export class TerraDrawGoogleMapsAdapter extends TerraDrawBaseAdapter {
 	 * @returns An object with 'lng' and 'lat' properties representing the longitude and latitude coordinates.
 	 */
 	unproject(x: number, y: number) {
-		const projection = this._map.getProjection();
+		const projection = this._overlay.getProjection();
 		if (projection === undefined) {
 			throw new Error("cannot get projection");
 		}
 
-		const bounds = this._map.getBounds();
-		if (bounds === undefined) {
-			throw new Error("cannot get bounds");
-		}
-
-		const topRight = projection.fromLatLngToPoint(bounds.getNorthEast());
-		if (topRight === null) {
-			throw new Error("cannot get topRight");
-		}
-
-		const bottomLeft = projection.fromLatLngToPoint(bounds.getSouthWest());
-		if (bottomLeft === null) {
-			throw new Error("cannot get bottomLeft");
-		}
-
-		const zoom = this._map.getZoom();
-		if (zoom === undefined) {
-			throw new Error("zoom get bounds");
-		}
-
-		const scale = Math.pow(2, zoom);
-
-		const worldPoint = new google.maps.Point(
-			x / scale + bottomLeft.x,
-			y / scale + topRight.y
+		const latLng = projection.fromContainerPixelToLatLng(
+			new google.maps.Point(x, y)
 		);
-		const lngLat = projection.fromPointToLatLng(worldPoint);
 
-		if (lngLat === null) {
-			throw new Error("zoom get bounds");
+		if (latLng === null) {
+			throw new Error("cannot unproject coordinates");
 		}
 
-		return { lng: lngLat.lng(), lat: lngLat.lat() };
+		return { lng: latLng.lng(), lat: latLng.lat() };
 	}
 
 	/**