0

I have the following component showing a Leaflet map in a React app. Everything works fine in development but in production, the map doesn't show, it's just blank. The Markers render, but there are no tiles for the map.

const icon = L.icon({
    iconSize: [25, 41],
    iconAnchor: [10, 41],
    popupAnchor: [2, -40],
    iconUrl: 'https://unpkg.com/leaflet@1.6/dist/images/marker-icon.png',
    shadowUrl: 'https://unpkg.com/leaflet@1.6/dist/images/marker-shadow.png'
});

const group = L.featureGroup();

function Bounds({ coords }) {
    const map = useMap();
    useEffect(() => {
        if (!map) return;
        group.clearLayers();
        coords.forEach((marker) => group.addLayer(L.marker(marker)));
        map.fitBounds(group.getBounds());
}, [map, coords]);

return null;
}

export default function MapLeaflet({coords, setShowMap}) {

    const [appState, setAppState] = useContext(AppState)

    function TileLayerDark() {
        return (
            <TileLayer attribution='&amp;copy <a 
                href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
                url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png" 
            />
    )
}

    function TileLayerLight() {
        return (
            <TileLayer attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png" />
    )
}

function MyTileLayar() {
    // ONMOUNT GET THE COLOR THEME USED AND RETURN THE CORRECT MAP TILES
    const html = document.querySelector('html')
    if (html.classList.contains('dark')) {
        setAppState(prevState => ({...prevState,isMapDark:true}))

    } else {
        setAppState(prevState => ({...prevState,isMapDark:false}))
    }
}

useEffect(() => {
    MyTileLayar();
},[])

const position = [42.2974279, -85.628292];

return (
    <MapContainer
        className="h-full rounded-lg map"
        center={position}
    >
        {coords.length > 0 &&
            coords.map((coord, index) => {
            return (
                <Marker
                    key={index}
                    position={[coord[0], coord[1]]}
                    eventHandlers={{
                        click: (e) => {
                            const numLatitude = Number(coord[0]);
                            const numLongitude = Number(coord[1]);
                            setAppState(prevState => ({...prevState,latitude:numLatitude,longitude:numLongitude}));
                            //setShowMap(false)
                        },
                    }}
                    icon={icon}/>
            );
        })}
        {coords.length>0 && <Bounds coords={coords} />}
        {appState.isMapDark ? (
            <TileLayerDark/>
        ) : (
            <TileLayerLight/>
        )}
    </MapContainer>
)
}

The only thing I can think is that I return different map layers depending on whether the user is viewing in light or dark mode, though as this worked in development mode I don't know why it wouldn't in production. - I have tried removing the conditional statement:

{appState.isMapDark ? (
        <TileLayerDark/>
    ) : (
        <TileLayerLight/>
    )}

But it makes no difference. Can anybody see what I'm doing wrong, please?

Ray Purchase
  • 681
  • 1
  • 11
  • 37

1 Answers1

0

Answer: I'd forgotten to include the StadiaMaps API key. Please view react-leaflet not loading tiles and gilving 403 request error for the full answer

Ray Purchase
  • 681
  • 1
  • 11
  • 37