src/components/MapPosition.svelte

   1 <script>
   2   import { mapState } from '../state/MapState.svelte.js';
   3
   4   let visible = $state(false);
   5
   6   const view_on_osm_link = $derived(
   7       `https://openstreetmap.org/#map=${mapState.zoom}/${mapState.center.lat.toFixed(5)}/${mapState.center.lng.toFixed(5)}`
   8   );
   9
  10   function coordToString(c) {
  11     return c ? `${c.lat.toFixed(5)},${c.lng.toFixed(5)}` : '-';
  12   }
  13 </script>
  14
  15 <div id="map-position">
  16 {#if visible}
  17   <div id="map-position-inner">
  18     map center: {coordToString(mapState.center)}
  19     <a target="_blank" rel="noreferrer" href="{view_on_osm_link}">view on osm.org</a>
  20     <br>
  21     map zoom: {mapState.zoom}
  22     <br>
  23     viewbox: {mapState.viewboxStr}
  24     <br>
  25     last click: {coordToString(mapState.lastClick)}
  26     <br>
  27     mouse position: {coordToString(mapState.mousePos)}
  28   </div>
  29   <div id="map-position-close"><a href="#hide" onclick={() => visible = false}>hide</a></div>
  30 {:else}
  31 <button id="show-map-position"
  32         class="btn btn-sm btn-outline-secondary"
  33         onclick={() => visible = true}>
  34   show map bounds
  35 </button>
  36 {/if}
  37 </div>
  38
  39 <style>
  40   #map-position {
  41     display: block;
  42     position: absolute;
  43     top: 0;
  44     right: 20px;
  45     color: #333;
  46     font-size: 11px;
  47     background-color: rgba(255, 255, 255, 0.7);
  48     z-index: 1000;
  49     margin: 5px
  50   }
  51
  52   #map-position-inner {
  53     padding: 0 5px;
  54   }
  55
  56   #map-position-close {
  57     text-align: right;
  58   }
  59
  60   @media (max-width: 768px) {
  61     #map-position {
  62       top: 20px;
  63       right: 20px;
  64     }
  65   }
  66
  67   .btn-outline-secondary {
  68     background-color: white;
  69   }
  70
  71   .btn-outline-secondary:hover {
  72     color: #111;
  73   }
  74
  75
  76 </style>