Currently doing a map with React-Leaflet. On desktop everthing works fine, but on mobile(iPhone X) the layercontrol and zoom control flicker/disappear while moving the map.
function Osm() {
const [map, setMap] = useState(null)
return (<main>
{map ? <header><img src={logo} />map <img id={'loc'} src={currentLoc} onClick={(e) => goToLoc(map)} /></header> : null}
<MapContainer center={center as any} zoom={13} style={{ height: "100vh" }} zoomAnimation={false} fadeAnimation={false} markerZoomAnimation={false} doubleClickZoom={false}
scrollWheelZoom={true} zoomControl={false} attributionControl={false} whenCreated={(map) => setMap(map as any)}>
<TileLayer
attribution='<a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>'
url="https://api.maptiler.com/maps/streets/256/{z}/{x}/{y}.png?key="
maxZoom={19}
minZoom={12}
/>
<LayersControl position="topright" collapsed={false}>
<LayersControl.BaseLayer name="E5" checked>
<FeatureGroup key={'e5'}>
<TankstellenNoReactQuery fuel={'e5'} />
</FeatureGroup >
</LayersControl.BaseLayer >
<LayersControl.BaseLayer name="E10" >
<FeatureGroup key={'e10'}>
<TankstellenNoReactQuery fuel={'e10'} />
</FeatureGroup >
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Diesel" >
<FeatureGroup key={'diesel'}>
<TankstellenNoReactQuery fuel={'diesel'} />
</FeatureGroup >
</LayersControl.BaseLayer>
</LayersControl>
<ZoomControl position='topleft' />
{/* <ScaleControl metric={true} imperial={false} /> */}
<AttributionControl position='bottomleft' prefix={false} />
<MapHandler />
</MapContainer>
</main >
)
}
For the <main> I used display: flex with height: 100vh. But I dont think this is the orgin of the problem. Could this be a problem of webkit broweser or else. As far as I tested it, it only happends on a mobile device.
Thank you for your help
Carlo
