farms-add-map.svelte (2886B)
1 <script lang="ts"> 2 import WrapBorder from "$lib/components/lib/wrap-border.svelte"; 3 import MapMarkerArea from "$lib/components/map/map-marker-area.svelte"; 4 import Map from "$lib/components/map/map.svelte"; 5 import { app_lo } from "$lib/stores/app"; 6 import type { LibContext } from "$lib/types/context"; 7 import { focus_map_marker } from "$lib/utils/map"; 8 import { Fade, geop_is_valid, get_context } from "@radroots/apps-lib"; 9 import { 10 type GeocoderReverseResult, 11 type GeolocationPoint, 12 } from "@radroots/geo"; 13 import { handle_err } from "@radroots/utils"; 14 import { onMount } from "svelte"; 15 16 const { lc_geop_current, lc_geocode } = get_context<LibContext>(`lib`); 17 18 let { 19 map_geoc = $bindable(undefined), 20 map_geop = $bindable(undefined), 21 farm_geop_lat, 22 farm_geop_lng, 23 }: { 24 map_geoc: GeocoderReverseResult | undefined; 25 map_geop: GeolocationPoint | undefined; 26 farm_geop_lat: string; 27 farm_geop_lng: string; 28 } = $props(); 29 30 let map: maplibregl.Map | undefined = $state(undefined); 31 32 const is_valid_geop = $derived(geop_is_valid(map_geop)); 33 34 onMount(async () => { 35 try { 36 const geop = await lc_geop_current(); 37 if (!geop) return; 38 map_geop = { ...geop }; 39 const geoc = await lc_geocode(geop); 40 if (!geoc) return; 41 map_geoc = geoc; 42 if (map && map_geop) map.setCenter([map_geop.lng, map_geop.lat]); 43 map?.setZoom(13); 44 focus_map_marker(); 45 } catch (e) { 46 handle_err(e, `on_mount`); 47 } 48 }); 49 </script> 50 51 <div 52 class={`flex flex-col h-[100vh] w-full px-6 gap-4 justify-start items-center`} 53 > 54 <WrapBorder basis={{ classes: `h-lo_view_main_${$app_lo}` }}> 55 <Map bind:map> 56 {#if map_geop} 57 <MapMarkerArea 58 bind:map_geop 59 bind:map_geoc 60 basis={{ 61 show_display: true, 62 }} 63 /> 64 {/if} 65 </Map> 66 </WrapBorder> 67 {#if is_valid_geop} 68 <Fade> 69 <div 70 class={`flex flex-col w-full gap-1 justify-center items-center`} 71 > 72 <div 73 class={`flex flex-row w-full gap-2 justify-center items-center`} 74 > 75 <p 76 class={`font-sans font-[500] text-ly0-gl tracking-tightest`} 77 > 78 {farm_geop_lat} 79 </p> 80 <p 81 class={`font-sans font-[500] text-ly0-gl tracking-tightest`} 82 > 83 {farm_geop_lng} 84 </p> 85 </div> 86 </div> 87 </Fade> 88 {/if} 89 </div>