]> git.openstreetmap.org Git - nominatim.git/blob - website/js/nominatim-ui.js
Merge branch 'mobile-responsive' of https://github.com/mtmail/Nominatim into mobile...
[nominatim.git] / website / js / nominatim-ui.js
1 var map;
2 var last_click_latlng;
3
4 jQuery(document).on('ready', function(){
5
6         if ( !$('#search-page').length ){ return; }
7         
8         $('#q').focus();
9
10         map = new L.map('map', {
11                                 center: [nominatim_map_init.lat, nominatim_map_init.lon],
12                                 zoom:   nominatim_map_init.zoom,
13                                 attributionControl: false,
14                                 scrollWheelZoom:    false,
15                                 touchZoom:          false,
16                         });
17
18         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
19                 // moved to footer
20                 // attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
21         }).addTo(map);
22
23
24
25         function display_map_position(mouse_lat_lng){
26
27                 html_mouse = "mouse position " + (mouse_lat_lng ? [mouse_lat_lng.lat.toFixed(5), mouse_lat_lng.lng.toFixed(5)].join(',') : '-');
28                 html_click = "last click: " + (last_click_latlng ? [last_click_latlng.lat.toFixed(5),last_click_latlng.lng.toFixed(5)].join(',') : '-');
29
30                 html_center = 
31                         "map center: " + 
32                         map.getCenter().lat.toFixed(5) + ',' + map.getCenter().lng.toFixed(5) +
33                         " <a target='_blank' href='" + map_link_to_osm() + "'>view on osm.org</a>";
34
35                 html_viewbox = "viewbox: " + map_viewbox_as_string();
36
37                 $('#map-position').html([html_center,html_viewbox,html_click,html_mouse].join('<br/>'));
38                 $('input#use_viewbox').trigger('change');
39         }
40
41         map.on('move', function(e) {
42                 display_map_position();
43         });
44
45         map.on('mousemove', function(e) {
46                 display_map_position(e.latlng);
47         });
48
49         map.on('click', function(e) {
50                 last_click_latlng = e.latlng;
51                 display_map_position();
52         });
53
54         map.on('load', function(e){
55                 display_map_position();
56         });
57
58
59         $('input#use_viewbox').on('change', function(){
60                 $('input[name=viewbox]').val( $(this).prop('checked') ? map_viewbox_as_string() : '');
61         });
62
63
64
65         function map_viewbox_as_string() {
66                 // since .toBBoxString() doesn't round numbers
67                 return [
68                         map.getBounds().getSouthWest().lat.toFixed(5),
69                         map.getBounds().getSouthWest().lng.toFixed(5),
70                         map.getBounds().getNorthEast().lat.toFixed(5),
71                         map.getBounds().getNorthEast().lng.toFixed(5) ].join(',');
72         }
73         function map_link_to_osm(){
74                 return "http://openstreetmap.org/#map=" + map.getZoom() + "/" + map.getCenter().lat + "/" + map.getCenter().lng;
75         }
76
77         function get_result_element(position){
78                 return $('.result').eq(position);
79         }
80         function marker_for_result(result){
81                 return L.marker([result.lat,result.lon], {riseOnHover:true,title:result.name });
82         }
83         function circle_for_result(result){
84                 return L.circleMarker([result.lat,result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75});
85         }
86
87         var layerGroup = new L.layerGroup().addTo(map);
88         function highlight_result(position, bool_focus){
89                 var result = nominatim_results[position];
90                 if (!result){ return }
91                 var result_el = get_result_element(position);
92
93                 $('.result').removeClass('highlight');
94                 result_el.addClass('highlight');
95
96                 layerGroup.clearLayers();
97
98                 if (result.lat){
99                         var circle = circle_for_result(result);
100                         circle.on('click', function(){
101                                 highlight_result(position);
102                         });
103                         layerGroup.addLayer(circle);                    
104                 }
105                 if (result.aBoundingBox){
106
107                         var bounds = [[result.aBoundingBox[0]*1,result.aBoundingBox[2]*1], [result.aBoundingBox[1]*1,result.aBoundingBox[3]*1]];
108                         map.fitBounds(bounds);
109                         if (result.astext && result.astext.match(/POLY/) ){
110                                 var layer = omnivore.wkt.parse(result.astext);
111                                 layerGroup.addLayer(layer);
112                         }
113                         else {
114                                 // var layer = L.rectangle(bounds, {color: "#ff7800", weight: 1} );
115                                 // layerGroup.addLayer(layer);
116                         }
117                 }
118                 else {
119                         map.panTo([result.lat,result.lon], result.zoom || nominatim_map_init.zoom);
120                 }
121
122                 // var crosshairIcon = L.icon({
123                 //      iconUrl:     'images/crosshair.png',
124                 //      iconSize:    [12, 12],
125                 //      iconAnchor:  [6, 6],
126                 // });
127                 // var crossMarker = new L.Marker([result.lat,result.lon], { icon: crosshairIcon, clickable: false});
128                 // layerGroup.addLayer(crossMarker);
129
130
131
132                 if (bool_focus){
133                         $('#map').focus();
134                 }
135         }
136
137
138         $('.result').on('click', function(e){
139                 highlight_result($(this).data('position'), true);
140         });
141
142         highlight_result(0, false);
143
144
145 });
146
147
148 jQuery(document).on('ready', function(){
149
150         if ( !$('#details-page').length ){ return; }
151
152
153                 map = new L.map('map', {
154                                         // center: [nominatim_map_init.lat, nominatim_map_init.lon],
155                                         // zoom:   nominatim_map_init.zoom,
156                                         attributionControl: false,
157                                         scrollWheelZoom:    false,
158                                         touchZoom:          false,
159                                 });
160
161                 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
162                         // moved to footer
163                         // attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
164                 }).addTo(map);
165
166                 var layerGroup = new L.layerGroup().addTo(map);
167
168
169                 var outline = omnivore.wkt.parse(nominatim_result.outlinestring);
170                 map.addLayer(outline);
171
172                 var circle = L.circleMarker([nominatim_result.lat,nominatim_result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75});
173                 map.addLayer(circle);
174
175                 map.fitBounds(outline.getBounds());
176
177 });
178