Tiles images loaded but gray map (NextJS)

[benbenpetit]

Bug report in v4

Expected behavior

Map should show up loaded with tiles visible

Actual behavior

All tiles stay gray.

Steps to reproduce

Next : 13.4.3 React : 18.2.0 Leaflet : 1.9.3 React-leaflet : 4.2.0 In NextJS, traditionally declare a MapContainer with a TileLayer inside. Import the component with NextJS's dynamic component to lazy load component client side.

<MapContainer
  center={[DEFAULT_COORDINATES[1], DEFAULT_COORDINATES[0]]}
  zoom={DEFAULT_ZOOM}
  className={styles.mapWrapper}
  ref={setMap}
  dragging={!L.Browser.mobile}
  zoomAnimationThreshold={6}
  zoomControl={false}
>
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>' />
</MapContainer>

When I inspect DOM or Network devtools tab, images are well loaded and in the HTML, but appear gray. It seems that the tiles are not getting set the ".leaflet-tile-loaded" class that add "visibility: inherit" property.

Tiles are sometimes visible in production on desktop but almost always fail to appear on mobile or tablet. I have no clue how the "leaflet-tile-loaded" class is added to the tile and how I could resolve this bug

[magicspon]

@benbenpetit did you manage to solve this?

[magicspon]

I've just added the <TileLayer /> component from the example and now it's working as expected.

'use client'
import 'leaflet/dist/leaflet.css'
import { TeaserRecord } from 'cms/queries/selection/listing.selection'
import * as React from 'react'
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'

export interface TMapViewProps {
  results: TeaserRecord[]
}

export function MapView(props: TMapViewProps) {
  console.info(`<MapView />`, props)
  return (
    <MapContainer
      className="aspect-square w-full"
      center={[51.505, -0.09]}
      zoom={13}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  )
}

[benbenpetit]

I didn't work at all in dev environnement, and it didn't work properly in production. I think we finally made a switch to react-leaflet-google-layer and it's working fine