extra white box behind marker

[jarjk]

there's a random white box rendered behind objects rendered on the map, like a marker

I believe it's a css issue, but can't find where it's coming from.

any ideas maybe?

"use client";

import {
  Map,
  MapFullscreenControl,
  MapLocateControl,
  MapMarker,
  MapPopup,
  MapTileLayer,
  MapZoomControl,
} from "@/components/ui/map";
import { useState } from "react";
import { useMapEvents } from "react-leaflet";
import { FlagTriangleLeft, Send } from "lucide-react";
import { logErr } from "./utils";

interface MapPickerProps {
  initLat: number;
  initLng: number;
  launchLat?: number;
  launchLng?: number;
  isLaunch: boolean;
  onLocationSelect: (lat: number, lng: number) => void;
}

export function MapPicker({
  initLat,
  initLng,
  launchLat,
  launchLng,
  isLaunch,
  onLocationSelect,
}: MapPickerProps) {
  const [hasMarked, setMarked] = useState(false);
  const [position, setPosition] = useState({ lat: initLat, lng: initLng });

  function LaunchMarker() {
    if (!launchLat || !launchLng) return null;

    // Ship, FlagTriangle(Left|Right), MapPin, (Pill)Bottle(Wine), MailPlus, Send, Scroll(Text)
    return (
      <MapMarker
        position={[launchLat, launchLng]}
        iconAnchor={[12, 12]}
        icon={<Send color="black" className="rotate-135" />}
      >
        <MapPopup>The Bottle you've found was launched here</MapPopup>
      </MapMarker>
    );
  }

  function MsgMarker() {
    // https://react-leaflet.js.org/docs/example-events/
    const _map = useMapEvents({
      click(ev) {
        setMarked(true);
        let { lat, lng } = ev.latlng;
        setPosition(ev.latlng);
        onLocationSelect(Number(lat.toFixed(5)), Number(lng.toFixed(5)));
      },
    });

    if (!hasMarked) return null;

    // Ship, FlagTriangle(Left|Right), MapPin, (Pill)Bottle(Wine), MailPlus, Send, Scroll(Text)
    let icon;
    if (isLaunch) {
      icon = <Send color="blue" className="rotate-135" />;
    } else {
      icon = <FlagTriangleLeft color="magenta" />;
    }

    return (
      <MapMarker position={position} iconAnchor={[12, 12]} icon={icon}>
        <MapPopup>Here's your Message in a Bottle</MapPopup>
      </MapMarker>
    );
  }
  return (
    <div className="relative">
      <Map center={[initLat, initLng]} zoom={6} className="cursor-crosshair!">
        <MapTileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors'
        />
        <MapZoomControl />
        <MapFullscreenControl />
        <MapLocateControl
          onLocationError={(error) =>
            logErr(
              "We couldn't locate your position:",
              `${error.message} (${error.code})`,
            )
          }
          watch
        />
        <MsgMarker />
        <LaunchMarker />
      </Map>
    </div>
  );
}

[jarjk]

Note

it's been resolved, but the fix is quite odd (llm-suggested):

index 6639a61..5bf3467 100644
--- a/components/ui/map.tsx
+++ b/components/ui/map.tsx
@@ -570,6 +570,8 @@ function MapMarker({
     return (
         <LeafletMarker
             icon={L.divIcon({
+                // Avoid Leaflet's default `leaflet-div-icon` white square for custom SVG markers.
+                className: "",
                 html: renderToString(icon),
                 iconAnchor,
                 ...(bgPos ? { bgPos } : {}),

Note

is it possible that using plain react-leaflet has something to do with the issue?