SolidJS + Leaflet: Picking Location on Map

Question

The handlePicker function is not fully working. It does not pick the location with marker. Is there any library for Solidjs or Solution

import { Title } from "@solidjs/meta";
import L, { LatLng } from "leaflet";
import { FaSolidLocationCrosshairs } from "solid-icons/fa";
import { createEffect, createSignal, onMount } from "solid-js";
import useMap, { buildMap } from "~/components/useMap";
export default function PublishPage() {
    const [latlng, setLatlng] = createSignal<LatLng>()
    let mapDiv: HTMLDivElement;
    let map: L.TileLayer | undefined;
    let pin: any;

    onMount(() => {
        map = buildMap(mapDiv)
    })

    function handlePicker(ev: any) {
        console.log(ev.latlng)
        setLatlng(new LatLng(ev.latlng.lat, ev.latlng.lng))
        if (typeof pin == "object") {
            pin.setLatLng(ev.latlng);
        } else {
            pin = L.marker(ev.latlng, { riseOnHover: true, draggable: true });
            pin.addTo(map);
            pin.on('drag', function (ev: any) {
                setLatlng(ev.latlng)
            });
        }
    }

    createEffect(() => {

        if (map) {
            map.on("click", handlePicker)

            return () => {
                map?.off("click", handlePicker)
            }
        }
    }, [])

    return (
        <div>
            <Title>Publish App</Title>
            <div class="h-[90vh] flex items-center justify-center text-[#222]">
                <div class="shadow border rounded-lg p-6 w-[80dvh]">
                    <div class="text-center">
                        <h2 class="text-3xl font-bold">
                            Publish
                        </h2>
                    </div>
                    <div class="my-4">
                        <div class="cursor-[pointer_!important]">
                            <div class="w-full h-[20rem] rounded-lg" ref={mapDiv} />
                        </div>
                        <div class="mt-2 flex justify-end">
                            <button class="border shadow px-4 py-2">
                                <FaSolidLocationCrosshairs />
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

Answer 1

It looks like it might be solved if you declare the map variable outside the component function.