The shapes do not match the Google Map layer

[fariba1981]

function App() {
return (

Atlantis Internet Services

<ReactLeafletGoogleLayer googleMapsLoaderConf={{ KEY: 'sample' }} type={"hybrid"} />




;

Hello


nologo


skule

);
}

[aviklai]

@fariba1981 Hi,

Can you please add a codesandbox with the issue and explain it?

[fariba1981]

Hi,

sure, here is the link
https://codesandbox.io/s/thirsty-water-2egu8?file=/src/App.js:131-157
I use react-leaflet-google-layer library as well as react-leaflet
polygons are fit on the 'open street map', but not on the 'google maps'

[aviklai]

I don't see there the import of react-leaflet-google-layer and the polygons. Can you please check?

[tomerpaz]

Hi, I had similar issue. The fix was ro wrap the MapContainer

[aviklai]

@tomerpaz Hi,

Can you please add a codesandbox?

[tomerpaz]

adding the < div > around the MapContainer solved rthe issue. Othewise the map was offset. and polygon not in the right place

https://codesandbox.io/s/competent-poitras-lgvd8x?file=/src/App.js

before the wrapper div it worked fine with OSM and ESRI but not google. Now it works fine with all tiles.

s

[aviklai]

@tomerpaz Hi,

It looks like something similar to this issue:
#12
But it's already fixed in here:
https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant/-/commit/8f738c12f0a4c529140607df0e1c01b281cbe075

I tried to reproduce with the example from the above issue and it looks o.k without specifying a div around the map container:
https://codesandbox.io/s/dry-morning-mr63fe

Another example:
https://codesandbox.io/s/focused-cerf-ejwlsn

I use here the latest version of this library which uses the latest version of Leaflet.GridLayer.GoogleMutant.
Can you please try to reproduce a full example of the problem in codesandbox?