changing cluster's styles not working with lazy loading leaflet in SSR react application

Question

I'm encountering some challenges with lazy loading a Leaflet map in a React application deployed on a server-side rendering (SSR) environment. The application involves loading a list of products in a modal using Leaflet, and when a user hovers over a product, I need to change the markers' icon and clusters' style on the map accordingly. I've tried different approaches, including lazy loading the Leaflet component and using react-leaflet, but I'm facing some issues:

When I don't use lazy loading for the modal component, everything works fine locally, but when deployed, the pod goes into a crash loop, citing 'window is not defined' when attempting to load the Leaflet.js library.

/node_modules/leaflet/dist/leaflet-src.js:230
  var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || timeoutDefer;
                  ^

ReferenceError: window is not defined

When I add lazy loading to the component, I can deploy the project without the crash loop issue. However, the functionality to change cluster styles no longer works, although changing individual marker icons still works fine.

At first, I thought maybe the leaflet doesn't work with lazy loading and I re-wrote all the code using react-leaflet, but the problem persisted. Any insights or ideas on how to resolve these issues would be greatly appreciated.

Here is my code:

import { useEffect, useRef } from 'react';
import L, { DivIcon, MarkerClusterGroup } from 'leaflet';
import 'leaflet.markercluster/dist/leaflet.markercluster';
import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
import 'leaflet/dist/leaflet.css';
import { createRoot } from 'react-dom/client';

import mapMarkerHover from './assets/mapMarkerHover.png';
import { CustomMapMarker } from '../../types/customMapMarker';
import { ProductListItem } from '../../types/productListItem';
import mapMarker from './assets/mapMarker.png';
import { MapViewPopUpProduct } from './MapViewPopUpProduct';

const MapView = (
    isMapViewModalOpen: boolean,
    productListItems: ProductListItem[],
    hoveredProductId?: string,
): {
    mapRef: React.MutableRefObject;
    markerClusterRef: React.MutableRefObject;
} => {
    const mapRef = useRef(null);
    const markerClusterRef = useRef(null);

    const defaultIcon = L.icon({
        iconUrl: mapMarker,
        iconSize: [24, 32],
    });

    const highlightedIcon = L.icon({
        iconUrl: mapMarkerHover,
        iconSize: [24, 32],
    });

    const getClusterSize = (childCount: number): string => {
        if (childCount < 10) {
            return '-small';
        }

        if (childCount < 100) {
            return '-medium';
        }

        return '-large';
    };

    const defaultClusterIcon = (childCount: number): DivIcon => {
        return L.divIcon({
            html: `${childCount}`,
            className: `marker-cluster marker-cluster${getClusterSize(childCount)}`,
            iconSize: [40, 40],
        });
    };

    const highlightedClusterIcon = (childCount: number): DivIcon => {
        return L.divIcon({
            html: `${childCount}`,
            className: `marker-cluster marker-cluster${getClusterSize(childCount)} cluster-hovered`,
            iconSize: [40, 40],
        });
    };

    const closePopup = (): void => {
        if (mapRef.current) mapRef.current.closePopup();
    };

    const initializeMap = (): L.Map | null => {
        const container = document.getElementById('map');
        if (!container) return null;
        const map = L.map(container, {
            center: [51.1657, 10.4515],
            zoom: 6,
            zoomControl: false,
        });
        mapRef.current = map;

        map.addControl(new L.Control.Zoom({ position: 'bottomright' }));
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
        return map;
    };

    const createMarkerCluster = (): MarkerClusterGroup => {
        const clusters = L.markerClusterGroup({
            iconCreateFunction(cluster) {
                const childCount = cluster.getChildCount();
                const hasRelatedProduct = cluster
                    .getAllChildMarkers()
                    .some((marker: CustomMapMarker) => {
                        return marker.isHovered;
                    });

                return hasRelatedProduct
                    ? highlightedClusterIcon(childCount)
                    : defaultClusterIcon(childCount);
            },
        });
        markerClusterRef.current = clusters;
        return clusters;
    };

    const addMarkersToCluster = (map: L.Map, markers: MarkerClusterGroup): void => {
        productListItems.forEach((item, index) => {
            const currentItem = { ...item };
            if (currentItem.product !== undefined) {
                if (currentItem.product?.locations) {
                    const popupNode = document.createElement('div');
                    const root = createRoot(popupNode);
                    root.render(
                        ,
                    );

                    currentItem.product.locations.forEach(location => {
                        const marker = L.marker([location.lat, location.long], {
                            icon: defaultIcon,
                        }) as CustomMapMarker;
                        marker.productID = currentItem.product?.productId;

                        if (currentItem.product) {
                            const popup = L.popup({
                                closeButton: false,
                                autoClose: false,
                                closeOnClick: true,
                                closeOnEscapeKey: true,
                                minWidth: 350,
                                className: 'custom-popup',
                            })
                                .setLatLng(map.getBounds().getCenter())
                                .setContent(popupNode);
                            marker.bindPopup(popup);
                        }

                        markers.addLayer(marker);
                    });
                }
            }
        });
        map.addLayer(markers);
    };

    useEffect(() => {
        if (isMapViewModalOpen) {
            setTimeout(() => {
                mapRef.current = initializeMap();

                const clusters = createMarkerCluster();

                if (mapRef.current) addMarkersToCluster(mapRef.current, clusters);
            }, 0);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isMapViewModalOpen]);

    useEffect(() => {
        if (!markerClusterRef.current) return;

        markerClusterRef.current.eachLayer(layer => {
            if ('productID' in layer) {
                const marker = layer as CustomMapMarker;
                const shouldBeHighlighted = marker.productID === hoveredProductId;
                marker.setIcon(shouldBeHighlighted ? highlightedIcon : defaultIcon);
                marker.isHovered = shouldBeHighlighted;
            }
        });

        markerClusterRef.current.refreshClusters();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [hoveredProductId]);

    return { mapRef, markerClusterRef };
};

export { MapView };

changing cluster's styles not working with lazy loading leaflet in SSR react application

Answers (1)

Related Questions

changing cluster&#39;s styles not working with lazy loading leaflet in SSR react application

Answers (1)

Related Questions

changing cluster's styles not working with lazy loading leaflet in SSR react application