src/components/MapPosition.svelte

   1 <script>
   2
   3   import { map_store } from '../lib/stores.js';
   4
   5   let map_center = $state();
   6   let map_zoom = $state();
   7   let map_viewbox = $state();
   8   let view_on_osm_link = $state();
   9   let last_click = $state();
  10   let mouse_position = $state();
  11
  12   function map_link_to_osm(map) {
  13     var zoom = map.getZoom();
  14     var lat = map.getCenter().lat.toFixed(5);
  15     var lng = map.getCenter().lng.toFixed(5);
  16     return 'https://openstreetmap.org/#map=' + zoom + '/' + lat + '/' + lng;
  17   }
  18
  19   function map_viewbox_as_string(map) {
  20     var bounds = map.getBounds();
  21     var west = bounds.getWest();
  22     var east = bounds.getEast();
  23
  24     if ((east - west) >= 360) { // covers more than whole planet
  25       west = map.getCenter().lng - 179.999;
  26       east = map.getCenter().lng + 179.999;
  27     }
  28     east = L.latLng(77, east).wrap().lng;
  29     west = L.latLng(77, west).wrap().lng;
  30
  31     return [
  32       west.toFixed(5), // left
  33       bounds.getNorth().toFixed(5), // top
  34       east.toFixed(5), // right
  35       bounds.getSouth().toFixed(5) // bottom
  36     ].join(',');
  37   }
  38
  39   function display_map_position(map, mouse_lat_lng) {
  40     map_center = map.getCenter().lat.toFixed(5) + ',' + map.getCenter().lng.toFixed(5);
  41     view_on_osm_link = map_link_to_osm(map);
  42     map_zoom = map.getZoom();
  43     map_viewbox = map_viewbox_as_string(map);
  44     mouse_position = '-';
  45     if (mouse_lat_lng) {
  46       mouse_position = [mouse_lat_lng.lat.toFixed(5), mouse_lat_lng.lng.toFixed(5)].join(',');
  47     }
  48   }
  49
  50
  51   map_store.subscribe(map => {
  52     if (!map) return;
  53
  54     map.on('move', function () {
  55       display_map_position(map);
  56       // update_viewbox_field();
  57     });
  58
  59     map.on('mousemove', function (e) {
  60       display_map_position(map, e.latlng);
  61     });
  62
  63     map.on('click', function (e) {
  64       const last_click_latlng = e.latlng;
  65       if (last_click_latlng) {
  66         last_click = [last_click_latlng.lat.toFixed(5), last_click_latlng.lng.toFixed(5)].join(',');
  67       }
  68       display_map_position(map);
  69     });
  70
  71     map.on('load', function () {
  72       display_map_position(map);
  73     });
  74   });
  75
  76   function handleHideClick() {
  77     document.getElementById('map-position').style.display = 'none';
  78     document.getElementById('show-map-position').style.display = 'block';
  79   }
  80
  81 </script>
  82
  83 <div id="map-position">
  84   <div id="map-position-inner">
  85     map center: {map_center}
  86     <a target="_blank" rel="noreferrer" href="{view_on_osm_link}">view on osm.org</a>
  87     <br>
  88     map zoom: {map_zoom}
  89     <br>
  90     viewbox: {map_viewbox}
  91     <br>
  92     last click: {last_click}
  93     <br>
  94     mouse position: {mouse_position}
  95   </div>
  96   <div id="map-position-close"><a href="#hide" onclick={handleHideClick}>hide</a></div>
  97 </div>
  98
  99
 100 <style>
 101   #map-position {
 102     display: none;
 103     position: absolute;
 104     top: 0;
 105     right: 20px;
 106     padding: 0 5px;
 107     color: #333;
 108     font-size: 11px;
 109     background-color: rgba(255, 255, 255, 0.7);
 110     z-index: 1000;
 111   }
 112
 113   #map-position-close {
 114     text-align: right;
 115   }
 116
 117   @media (max-width: 768px) {
 118     #map-position {
 119       top: 20px;
 120       right: 20px;
 121     }
 122   }
 123 </style>