Leaflet rendering issue - map overflows

Question

I have created a repo to reproduce the issue. I use Leaflet in React.js. The issue is that Leaflet map overflows in a mobile view and Navbar is not visible. It happens only when user logs in and is redirected to a route with map from log in page. When user refreshes the browser, the navbar is visible.

Map.tsx

 import type {
  Layer,
  LayerGroup,
  FitBoundsOptions,
  LatLngBoundsExpression,
  MapOptions,
} from "leaflet";
import { Control, Map as LeafletMap, tileLayer, control, Util } from "leaflet";
import "leaflet/dist/leaflet.css";
import type { HTMLProps } from "react";
import { useCallback, useEffect, useState } from "react";
import { useResizeObserverRef } from "rooks";

import "./Map.css";

export type ControlledLayer = {
  addLayer(layer: Layer): void;
  removeLayer(layer: Layer): void;
};

export type LeafletContextInterface = Readonly<{
  __version: number;
  map: LeafletMap;
  layerContainer?: ControlledLayer | LayerGroup;
  layersControl?: Control.Layers;
  overlayContainer?: Layer;
  pane?: string;
}>;

const CONTEXT_VERSION = 1;

function createLeafletContext(map: LeafletMap): LeafletContextInterface {
  return Object.freeze({ __version: CONTEXT_VERSION, map });
}

type DivProps = HTMLProps<HTMLDivElement>;

export interface MapContainerProps extends MapOptions, DivProps {
  bounds?: LatLngBoundsExpression;
  boundsOptions?: FitBoundsOptions;
  whenReady?: () => void;
  isDrawActive?: boolean;
  isGeoSearchActive?: boolean;
  onGetMapBounds?: () => void;
  containerClassName?: string;
}

export function Map({
  center = [0, 0],
  zoom = 1,
  bounds,
  boundsOptions = { padding: [500, 500], maxZoom: 21 },
  whenReady,
  containerClassName,
  className,
  ...options
}: MapContainerProps) {
  const [context, setContext] = useState<LeafletContextInterface | null>(null);

  const handleResizeMapContainer = Util.throttle(
    () => {
      console.log("invalidate size");
      context?.map.invalidateSize();
    },
    500,
    undefined
  );

  const [mapContainerRef] = useResizeObserverRef(handleResizeMapContainer);

  const mapRef = useCallback((node: HTMLDivElement | null) => {
    if (node !== null && context === null) {
      const openStreetMap = tileLayer(
        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        }
      );
      const map = new LeafletMap(node, {
        zoomControl: false,
        layers: [openStreetMap],
        ...options,
      });

      const baseMaps = {
        OpenStreetMap: openStreetMap,
      };
      control.layers(baseMaps).addTo(map);

      if (center != null && zoom != null) {
        map.setView(center, zoom);
      } else if (bounds != null) {
        map.fitBounds(bounds, boundsOptions);
      }
      if (whenReady != null) {
        map.whenReady(whenReady);
      }

      control.zoom({ position: "bottomright" }).addTo(map);

      setContext(createLeafletContext(map));
    }
  }, []);

  useEffect(() => {
    return () => {
      context?.map.remove();
    };
  }, []);

  return (
    <div className={containerClassName} ref={mapContainerRef}>
      <div
        ref={mapRef}
        className={className ? className : `flex h-full w-full flex-1`}
      />
    </div>
  );
}

Here I deployed my repo project, where you can see the issue.

Here, I recorded the issue.

edit:// I created a branch with React Leaflet, where I have the same issue.

Answer 1

This is the fix:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />