capacitor-plugins icon indicating copy to clipboard operation
capacitor-plugins copied to clipboard

feat(google-maps): Extend methods to calculate map center with pixel offset

Open AE1NS opened this issue 3 years ago • 0 comments

Feature Request

Plugin

"@capacitor/google-maps": "1.0.0"

Description

I am using a page with a map and a draggable sheet with 3 breakpoints. When the breakpoint of the sheet changes, I also resize the map with just setting a padding to the bottom of the page container. When set the padding, the map would 'jump', because its centered aligned. Therefore I also have to change the map center after the padding was changed. Then I can move the sheet, and on each breakpoint the map would adjust to the rest of the page view without any internal map movement. grafik

The use case: When I click on a marker, the map gets centered. When I move to sheet to 50%, I see a list with item, that contains a center button, so I could also center the items with this actions. If I would always leave the map at 100% height of the whole page, the center point would be the top border of the sheet. Therefore I always adjust the map size, so I can easily use the 'setCenter' method of the map without any offset needed.

To achieve this I use the following implementation:

@HostBinding('style.padding-bottom') paddingBottom: string = '0';
...
// Adjust position

// 1. Change padding bottom to get final map position + size
this.paddingBottom = NEW_OFFSET + 'px';

// 2. Update the center of the map, so the map does not 'jump'
const point = mapRef.getProjection().fromLatLngToPoint(mapRef.getCenter());
point.y += DIFF_TO_OLD_OFFSET / (2 * Math.pow(2, mapRef.getZoom()));
mapRef.setCenter(map.getProjection().fromPointToLatLng(point));

Platform(s)

all platforms

Preferred Solution

The methods getCenter() and getZoom() should be extended. Also the methods getProjection() with its sub-methods fromLatLngToPoint() and fromPointToLatLng() should be extended. https://developers.google.com/maps/documentation/javascript/reference/map#Map.getProjection And setCenter is the plugins setCamera method?

Alternatives

Maybe there is also another solution for this use case. I am also open to other ideas 🙂

AE1NS avatar May 28 '22 05:05 AE1NS