src/components/MapPosition.svelte

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