How to rotate a google.maps.LatLngBounds? - google-maps-api-3

Question

I would like to verify if a google.maps.LatLngBounds contains a specific point.
I use a custom overlay like:
export class RotateOverlay extends google.maps.OverlayView {
private _bounds$ = new Subject<google.maps.LatLngBounds>();
get bounds$(): Observable<google.maps.LatLngBounds> {
return this._bounds$.asObservable();
}
private div: HTMLDivElement;
constructor(
private bounds: google.maps.LatLngBounds,
private image: string,
private rotation: number,
private map: google.maps.Map,
private dragEnabled: boolean = false
) {}
onAdd() {
const div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
const img = document.createElement('img');
img.src = this.image;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div = div;
// Add the element to the "overlayLayer" pane.
const panes = this.getPanes();
const sw = this.getProjection().fromLatLngToDivPixel(
this.bounds.getSouthWest()
);
const ne = this.getProjection().fromLatLngToDivPixel(
this.bounds.getNorthEast()
);
const bounds = new google.maps.LatLngBounds(
this.getProjection().fromDivPixelToLatLng(
new google.maps.Point(sw.x, sw.y)
),
this.getProjection().fromDivPixelToLatLng(
new google.maps.Point(ne.x, ne.y)
)
);
this._bounds$.next(bounds);
panes.overlayLayer.appendChild(div);
}
draw() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
const overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
const sw = overlayProjection.fromLatLngToDivPixel(
this.bounds.getSouthWest()
);
const ne = overlayProjection.fromLatLngToDivPixel(
this.bounds.getNorthEast()
);
// Resize the image's div to fit the indicated dimensions.
const div = this.div;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = ne.x - sw.x + 'px';
div.style.height = sw.y - ne.y + 'px';
div.style.transform = 'rotate(' + this.rotation + 'deg)';
}
}
And in the "parent", I use this to verify if my position is in the bounds:
this.rotateOverlay.bounds$.subscribe((bounds) => {
bounds.contains(this.position);
});
The image is correctly display. but the bounds$ receive the position of the point without the rotation included.
How could I get the correct LatLngBounds including the rotation inside?
Thanks
EDIT 1:
following the advices in comment, I created a polygon which is display uppon my custom overlay. But the rotation is not applied, here is the code:
const sw = this.bounds.getSouthWest();
const ne = this.bounds.getNorthEast();
const coordinates = [
ne,
{ lat: ne.lat(), lng: sw.lng() },
sw,
{ lat: sw.lat(), lng: ne.lng() },
];
//debugger;
var polygon = new google.maps.Polygon({
paths: coordinates,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(this.map);
const rotatePolygon = (polygon, angle) => {
var map = polygon.getMap();
var prj = map.getProjection();
var origin = this.bounds.getCenter(); //rotate around first point
var coords = polygon.getPath().getArray().map((latLng) => {
var point = prj.fromLatLngToPoint(latLng);
var rotatedLatLng = prj.fromPointToLatLng(rotatePoint(point, origin, angle));
return { lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng() };
});
polygon.setPath(coords);
return coords;
}
const rotatePoint = (point, origin, angle) => {
var angleRad = angle * Math.PI / 180.0;
return {
x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
};
}
debugger;
const coords = rotatePolygon(polygon, this.rotation);
//polygon.setPath(coords);
//polygon.setMap(this.map);
this._polygon$.next(polygon);
panes.overlayLayer.appendChild(div);
and in the parent:
this.rotateOverlay.polygon$.subscribe(polygon => {
this.map.googleMap.addListener("click", (data) => {
const isInsidePolygon = google.maps.geometry.poly.containsLocation(
data.latLng,
polygon
);
[..]

Answer 1

I was really close in my Edit 1, here is the working solution:
before the constructor:
private _polygon$ = new Subject<google.maps.Polygon>();
get polygon$(): Observable<google.maps.Polygon> {
return this._polygon$.asObservable();
}
in onAdd function:
const sw = this.bounds.getSouthWest();
const ne = this.bounds.getNorthEast();
const coordinates = [
ne,
{ lat: ne.lat(), lng: sw.lng() },
sw,
{ lat: sw.lat(), lng: ne.lng() },
];
//debugger;
var polygon = new google.maps.Polygon({
paths: coordinates,
strokeColor: 'transparent', // because I dont want to see it
fillColor: 'transparent', // because I dont want to see it
});
polygon.setMap(this.map);
const rotatePolygon = (polygon, angle) => {
var map = polygon.getMap();
var prj = map.getProjection();
var origin = prj.fromLatLngToPoint(this.bounds.getCenter()); // here was the error in the Edit 1
var coords = polygon.getPath().getArray().map((latLng) => {
var point = prj.fromLatLngToPoint(latLng);
var rotatedLatLng = prj.fromPointToLatLng(rotatePoint(point, origin, angle));
return { lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng() };
});
polygon.setPath(coords);
}
const rotatePoint = (point, origin, angle) => {
var angleRad = angle * Math.PI / 180.0;
return {
x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
};
}
rotatePolygon(polygon, this.rotation);
this._polygon$.next(polygon);
and in the parent, to handle the click on the map and in the polygon:
this.rotateOverlay.polygon$.subscribe(polygon => {
if (this.positionDevice) {
polygon.addListener("click", (data) => {
// inside
});
this.map.googleMap.addListener("click", (data) => {
// outside
});
}
});