location of googlelayer is not matching other layers

[ehsan-sotoodeh]

Thanks for the awesome library.
I'm using it to with two geojson layers but the location of geojson layers doesn't match the location of the google layer.

      initLayers = (inputLayers) => {
      const outputLayers = inputLayers.map(layer =>{
        switch(layer.type){
          case 'geoJson':
            return (< GeoJSON key = {layer.name} data = {layer.data } onEachFeature = { this.onEachFeatureClosure(layer.style)  } />);
          break;
          case 'googleMap':
            return(
              <ReactLeafletGoogleLayer />
            )
          break;
        }
      });
      console.log(outputLayers)
      return outputLayers;
    }


    render() {
        let layers = this.initLayers(this.props.layers);
        return (
            <Map
            style={{ height: "400px", width: "100%" }}
            zoom={5}
            center={[51.51, -0.06]}
            >

        <Circle center={[51.51, -0.06]} radius={5000} />
              {layers}
          </Map>
        )
    }

[aviklai]

@ehsan-sotoodeh Hi,

Can you create a working example of this code at https://codesandbox.io/ ?
And what code does the function onEachFeatureClosure contain?

[ehsan-sotoodeh]

https://codesandbox.io/s/tender-brahmagupta-mpkc5
onEachFeatureClosure adds style

[aviklai]

@ehsan-sotoodeh It seems to be a bug in leaflet.gridlayer.googlemutant library:
https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant/issues/44

I checked the proposed solution and it works (adding text-align):

.leaflet-tile {
	text-align:left !important;
}

https://codesandbox.io/s/elegant-waterfall-edy2n

[ehsan-sotoodeh]

It worked!
Thank you so much