simple picker

[jarjk]

how do I create a simple picker?

so starting with a drawmarker to place

[tonghohin]

Not sure what you mean. Something like drawing marker? https://shadcn-map.vercel.app/docs/examples/draw-control

[jarjk]

yes, but instantly, not after selecting the draw thingy, like this:

map-picker.mov

instead of this:

not-instant-map-pick1.mov

I love the lib btw!

[tonghohin]

You can refer to this react-leaflet's example: https://react-leaflet.js.org/docs/example-events/.
First make a state for the position.
Then use useMapEvents to get the clicked coordinates. You need pass an event argument to the click function, then get the coordinates with event.latlng.lat and event.latlng.lng.
Then show a <MapMarker/> when the position isn't null.
Thanks!

[jarjk]

thank you so much for your help!
been able to make an implementation I'm happy with.
leaving it here for reference, probably not that idiomatic though

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

interface MapPickerProps {
  latitude?: number
  longitude?: number
  onLocationSelect: (lat: number, lng: number) => void
}

// You can refer to this react-leaflet's example: https://react-leaflet.js.org/docs/example-events/.
export function MapPicker({
  latitude,
  longitude,
  onLocationSelect,
}: MapPickerProps) {
  const initialLat = latitude ?? 47
  const initialLng = longitude ?? 20
  const [hasMarked, setMarked] = useState(false);

  function MsgMarker() {
    const [position, setPosition] = useState({ lat: initialLat, lng: initialLng });
    const _map = useMapEvents({
      click(ev) {
        setMarked(true);
        let { lat, lng } = ev.latlng;
        setPosition(ev.latlng)
        onLocationSelect(Number(lat.toFixed(5)), Number(lng.toFixed(5)));
      },
    })

    return !hasMarked ? null : (
      // Ship, FlagTriangle(Left|Right), MapPin, (Pill)Bottle(Wine), MailPlus, Send, Scroll(Text)
      <MapMarker position={position} iconAnchor={[12, 24]} icon={<Send color="blue" />}>
        <MapPopup>Here's your Message in a Bottle</MapPopup>
      </MapMarker>
    )
  }
  return (
    <div className="relative">
      <Map center={[initialLat, initialLng]} zoom={6}>
        <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) => toast.error("We couldn't locate your position, reason:", { description: `${error.message} (${error.code})`, richColors: true/* , position: "top-right" */ })}
          watch
        />
        <MsgMarker />
      </Map>
    </div>
  )
}

[jarjk]

oh, one last question: how could I change the cursor: crosshair?
it seems like it's overwritten somewhere...

[tonghohin]

Change what to cursor: crosshair?

[jarjk]

well, change the cursor-style on the map from drag to crosshair, with css cursor: crosshair, or tailwind-css: cursor-crosshair

[tonghohin]

I see. Leaflet has some defaults under the hood. You'll need to do cursor-crosshair! to override it.

[jarjk]

that did the trick, thanks a lot!