]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/components/MapPosition.svelte
Reverse map: show search position (red circle) also when no search results
[nominatim-ui.git] / 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   
119   
120
121   @media (max-width: 768px) {
122     #map-position {
123       top: 20px;
124       right: 20px;
125     }
126   }
127 </style>