The shapes do not match the Google Map layer

[fariba1981]

function App() { return ( <div className="App">

Atlantis Internet Services

<MapContainer center={center} zoom={zoom}> <LayersControl position="topleft"> <BaseLayer name="GoogleMap"> <ReactLeafletGoogleLayer googleMapsLoaderConf={{ KEY: 'sample' }} type={"hybrid"} /> </BaseLayer> <BaseLayer name="Open Street"> <TileLayer attribution='&copy OpenStreetMap contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> </BaseLayer> </LayersControl>; <Marker position={hanePlus}> <Popup>Hello</Popup> </Marker> <Polygon color='blue' positions={nlogoPolygon} > <Popup>nologo</Popup> </Polygon> <Circle color='magenta' center={eskuleCircle} radius={50} > <Popup>skule</Popup> </Circle> </MapContainer> ); }

[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: https://github.com/aviklai/react-leaflet-google-layer/issues/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?