map-marker-area.svelte (1562B)
1 <script lang="ts"> 2 import type { LibContext } from "$lib/types/context"; 3 import type { IMapMarkerArea } from "$lib/types/components/lib"; 4 import { get_context } from "@radroots/apps-lib"; 5 import { 6 type GeocoderReverseResult, 7 type GeolocationPoint, 8 } from "@radroots/geo"; 9 import { Marker, Popup } from "svelte-maplibre"; 10 import MapMarkerAreaDisplay from "./map-marker-area-display.svelte"; 11 12 const { lc_geocode } = get_context<LibContext>(`lib`); 13 14 let { 15 basis, 16 map_geop = $bindable(), 17 map_geoc = $bindable(undefined), 18 }: { 19 basis: IMapMarkerArea; 20 map_geop: GeolocationPoint; 21 map_geoc?: GeocoderReverseResult | undefined; 22 } = $props(); 23 </script> 24 25 <Marker 26 bind:lngLat={map_geop} 27 draggable={!basis.no_drag} 28 class={`flex flex-row h-[100px] w-[100px] bg-blue-400/20 border-[2px] border-white justify-center items-center rounded-full shadow-lg`} 29 ondragend={async () => { 30 if (!map_geop) return; 31 const geoc = await lc_geocode(map_geop); 32 if (geoc) map_geoc = geoc; 33 }} 34 > 35 {#if basis.show_display} 36 <Popup open={basis.show_display} offset={[0, -55]}> 37 <MapMarkerAreaDisplay 38 basis={map_geoc 39 ? { 40 primary: map_geoc.name, 41 admin: map_geoc.admin1_name, 42 country: map_geoc.country_name, 43 } 44 : undefined} 45 /> 46 </Popup> 47 {/if} 48 </Marker>