Resizing Leaflet Map in Remix When Using setSearchParams

[mkohei]

Hi everyone! I’m building an app using Remix and Leaflet, and I’ve run into a problem.

I’m trying to resize a map dynamically when updating query parameters using setSearchParams. However, the map content doesn’t render correctly or adjust properly to the new size in some cases. Here’s the situation:

• Changing the query parameters triggers a map resize.
• The content inside the map doesn’t always adjust to fit the new size properly.
• Reloading the page fixes the issue, so for now, I’m resorting to using window.location.search = ... to force a page reload as a workaround.

What I’ve Tried

• I suspect that calling map.invalidateSize() could solve the issue, but I’m not sure where exactly to call it.
• Simply calling map.invalidateSize() inside the component didn’t resolve the problem.
• Additionally, since map.invalidateSize() can only be called inside the MapContainer, it’s tricky to handle when updating searchParams elsewhere.

If anyone knows the proper way to implement this or a better solution, I’d really appreciate your advice!

import React from "react";
import { useSearchParams } from "@remix-run/react";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem } from "./DropdownComponents";

interface DropdownProps {
  items: { id: string; name: string }[];
  selectedItemNames: string[];
  buttonLabel?: string;
}

const Dropdown: React.FC<DropdownProps> = ({
  items,
  selectedItemNames,
  buttonLabel = "Items",
}) => {
  const [_, setSearchParams] = useSearchParams();

  const handleCheckedChange = (checked: boolean, itemName: string) => {
    setSearchParams((prev: URLSearchParams) => {
      if (checked) {
        prev.append("item", itemName);
      } else {
        prev.delete("item");
        selectedItemNames.forEach((value) => {
          if (value !== itemName) {
            prev.append("item", value);
          }
        });
      }
      return prev;
    });
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="btn btn-outline">
          {`${buttonLabel} (${selectedItemNames.length} / ${items.length})`}
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-[28rem]">
        {items.map((item) => (
          <DropdownMenuCheckboxItem
            key={item.id}
            checked={selectedItemNames.includes(item.name)}
            onCheckedChange={(checked) => handleCheckedChange(checked, item.name)}
          >
            {item.name}
          </DropdownMenuCheckboxItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default Dropdown;

[akomm]

I don't see your Leaflet integration above, so its hard to make any assumptions how you sync your query state with the Leaflet state.

[akomm]

If you don't use some sort of integration for React, you probably will have to use the Leaflet API to change parameters when the query changes. So its probably a useEffect with the required query params as dependency if you read query or if you write the query you could at the same moment as you write also call the Leaflet API.

If query can change (be written) from different places and components, I'd recommend make a component just for Leaflet that listens to the search params and if API needs be called, useEffect call it. Otherwise if you use some react integration which has properties for that just pass the props.