atmo.rsvp
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Clean up map component and improve attibution styling

+41 -121
+22 -1
src/app.css
··· 9 9 @import '@foxui/core/theme.css'; 10 10 11 11 @source "../node_modules/@foxui"; 12 - 12 + 13 + .maplibregl-ctrl-bottom-left > .maplibregl-ctrl.maplibregl-ctrl-attrib { 14 + font: 7px / 10px monospace; 15 + border-top-right-radius: 0.5rem; 16 + border: none; 17 + box-shadow: none; 18 + min-height: 1rem; 19 + background-color: rgba(0, 0, 0, 0.45); 20 + } 21 + 22 + .maplibregl-ctrl-attrib-button { 23 + display: none; 24 + } 25 + 26 + .maplibregl-ctrl.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner { 27 + color: rgba(255, 255, 255, 0.85); 28 + line-height: 1rem; 29 + } 30 + 31 + .maplibregl-ctrl.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner a { 32 + color: inherit; 33 + }
+19 -120
src/lib/components/Map.svelte
··· 1 1 <script lang="ts"> 2 - import { MapLibre, Projection, Marker } from 'svelte-maplibre-gl'; 3 - import type maplibregl from 'maplibre-gl'; 2 + import { MapLibre, Projection, Marker, AttributionControl } from 'svelte-maplibre-gl'; 3 + import maplibregl from 'maplibre-gl'; 4 4 5 - let { 6 - lat, 7 - lng, 8 - zoom = 14 9 - }: { 10 - lat: number; 11 - lng: number; 12 - zoom?: number; 13 - } = $props(); 5 + let { lat, lng, zoom = 11 }: { lat: number; lng: number; zoom?: number } = $props(); 14 6 15 - let center = $state({ lng, lat }); 16 - let showAttribution = $state(false); 17 7 let map: maplibregl.Map | undefined = $state(); 18 - 19 - const fixedCenter = { lng, lat }; 20 - 21 - function handleZoom() { 22 - if (map) { 23 - map.setCenter(fixedCenter); 24 - } 25 - } 26 - 27 - $effect(() => { 28 - if (map) { 29 - map.getCanvas().style.touchAction = 'pan-x pan-y'; 30 - } 31 - }); 32 8 </script> 33 9 34 - <div 35 - class="relative isolate h-full w-full overflow-hidden rounded-xl" 36 - onfocusin={(e) => { 37 - if (e.target instanceof HTMLElement) e.target.blur(); 38 - }} 10 + <MapLibre 11 + bind:map 12 + class="h-full w-full overflow-hidden rounded-xl" 13 + style="https://tiles.openfreemap.org/styles/liberty" 14 + {zoom} 15 + center={[lng, lat]} 16 + attributionControl={false} 39 17 > 40 - <MapLibre 41 - bind:map 42 - class="h-full w-full" 43 - style="https://tiles.openfreemap.org/styles/liberty" 44 - {zoom} 45 - {center} 46 - attributionControl={false} 47 - dragPan={false} 48 - dragRotate={false} 49 - keyboard={false} 50 - touchZoomRotate={true} 51 - scrollZoom={true} 52 - boxZoom={false} 53 - pitchWithRotate={false} 54 - touchPitch={false} 55 - onzoom={handleZoom} 56 - > 57 - <Projection type="globe" /> 58 - 59 - <Marker bind:lnglat={center}> 60 - {#snippet content()} 61 - <div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3"> 62 - <div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div> 63 - </div> 64 - {/snippet} 65 - </Marker> 66 - </MapLibre> 67 - 68 - {#snippet infoIcon()} 69 - <svg 70 - xmlns="http://www.w3.org/2000/svg" 71 - width="24" 72 - height="24" 73 - fill-rule="evenodd" 74 - viewBox="0 0 20 20" 75 - > 76 - <path 77 - d="M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0" 78 - /> 79 - </svg> 80 - {/snippet} 81 - 82 - {#if showAttribution} 83 - <div 84 - class="absolute right-2.5 bottom-2.5 z-10 rounded-xl bg-white text-black" 85 - style="width: calc(100% - 20px); max-width: 12rem;" 86 - > 87 - <button 88 - class="float-right flex size-6 cursor-pointer items-center justify-center rounded-full shadow-[0_0_6px_rgba(59,130,246,0.6)]" 89 - onclick={() => (showAttribution = false)} 90 - aria-label="Toggle attribution" 91 - > 92 - {@render infoIcon()} 93 - </button> 94 - <div class="p-2 text-left text-xs leading-snug text-black/75"> 95 - <a 96 - href="https://openfreemap.org" 97 - target="_blank" 98 - rel="noopener noreferrer" 99 - class="text-black/75 no-underline hover:underline" 100 - onclick={(e) => e.stopPropagation()}>OpenFreeMap</a 101 - > 102 - <a 103 - href="https://openmaptiles.org" 104 - target="_blank" 105 - rel="noopener noreferrer" 106 - class="text-black/75 no-underline hover:underline" 107 - onclick={(e) => e.stopPropagation()}>© OpenMapTiles</a 108 - > 109 - Data from 110 - <a 111 - href="https://www.openstreetmap.org/copyright" 112 - target="_blank" 113 - rel="noopener noreferrer" 114 - class="text-black/75 no-underline hover:underline" 115 - onclick={(e) => e.stopPropagation()}>OpenStreetMap</a 116 - > 18 + <AttributionControl position="bottom-left" compact={false} /> 19 + <Projection type="globe" /> 20 + <Marker lnglat={[lng, lat]}> 21 + {#snippet content()} 22 + <div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3"> 23 + <div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div> 117 24 </div> 118 - </div> 119 - {:else} 120 - <button 121 - class="absolute right-2.5 bottom-2.5 z-10 flex size-6 items-center justify-center rounded-full bg-white text-black" 122 - onclick={() => (showAttribution = true)} 123 - aria-label="Toggle attribution" 124 - > 125 - {@render infoIcon()} 126 - </button> 127 - {/if} 128 - </div> 25 + {/snippet} 26 + </Marker> 27 + </MapLibre>