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