Zoom issue when passing styles to GoogleLayers

[aqueiros]

Greetings,

I have the following working code which works fine:

import { Map, ZoomControl } from 'react-leaflet'
import { GoogleLayer} from 'react-leaflet-google';

export class MapContainer extends React.Component {
  (...)
  render() {
    return (
      <Map id="map" ref={this.mapRef} zoomControl={false}>
        <ZoomControl position="bottomright" />
        <GoogleLayer
          googlekey={my_key}
          maptype='ROADMAP'
        />
      </Map>
    );
  }
}

However, when I try to create a GoogleLayer with only labels like this:

import { Map, ZoomControl } from 'react-leaflet'
import { GoogleLayer} from 'react-leaflet-google';

export class MapContainer extends React.Component {
  (...)
  render() {
    return (
      <Map id="map" ref={this.mapRef} zoomControl={false}>
        <ZoomControl position="bottomright" />
        <GoogleLayer
          googlekey={my_key}
          maptype='ROADMAP'
          styles ={[
            {elementType: 'all', stylers: [{visibility: 'off'}]},
            {elementType: 'labels', stylers: [{visibility: 'on'}]},
          ]}
        />
      </Map>
    );
  }
}

I run into a problem with the zoom. After zooming out, and then zooming in again, I end up with a mix of labels from the previous zoom and the new one:

This clears out, after I do one or two more zoom ins

I'm using
react-leaflet-google@3.3.1
react-leaflet@1.9.1
leaflet@1.3.1

Anyone experienced this before?

Thank you!

EDIT:

This is reproducible event if I try disabling only landscape features:

styles ={[ 
     {featureType:"landscape", stylers: [{visibility: 'off'}]},
]}

[Charmatzis]

Hi @aqueiros, very interesting.

Have you try it, without using react-leaflet? just leaflet and google maps

[aqueiros]

@Charmatzis I was holding on until I did a bit more testing, but It looks like I worked around it by setting keepBuffer to 0

<GoogleLayer
     googlekey={my_key}
     maptype='ROADMAP'
     styles ={[
       {featureType:"landscape", stylers: [{visibility: 'off'}]},
     ]}
     keepBuffer={0}
/>