src/assets/js/searchpage.js

   1
   2 /*********************************************************
   3 * FORWARD/REVERSE SEARCH PAGE
   4 *********************************************************/
   5
   6
   7 function display_map_position(mouse_lat_lng){
   8
   9   if (mouse_lat_lng) {
  10     mouse_lat_lng = map.wrapLatLng(mouse_lat_lng);
  11   }
  12
  13   html_mouse = "mouse position " + (mouse_lat_lng ? [mouse_lat_lng.lat.toFixed(5), mouse_lat_lng.lng.toFixed(5)].join(',') : '-');
  14   html_click = "last click: " + (last_click_latlng ? [last_click_latlng.lat.toFixed(5),last_click_latlng.lng.toFixed(5)].join(',') : '-');
  15
  16   html_center =
  17     "map center: " +
  18     map.getCenter().lat.toFixed(5) + ',' + map.getCenter().lng.toFixed(5) +
  19     " <a target='_blank' href='" + map_link_to_osm() + "'>view on osm.org</a>";
  20
  21   html_zoom = "map zoom: " + map.getZoom();
  22
  23   html_viewbox = "viewbox: " + map_viewbox_as_string();
  24
  25   $('#map-position-inner').html([html_center,html_zoom,html_viewbox,html_click,html_mouse].join('<br/>'));
  26
  27   var center_lat_lng = map.wrapLatLng(map.getCenter());
  28   var reverse_params = {
  29     lat: center_lat_lng.lat.toFixed(5),
  30     lon: center_lat_lng.lng.toFixed(5)
  31     // zoom: 2,
  32     // format: 'html'
  33   }
  34   $('#switch-to-reverse').attr('href', 'reverse.html?' + $.param(reverse_params));
  35
  36   $('input#use_viewbox').trigger('change');
  37 }
  38
  39
  40
  41
  42 function init_map_on_search_page(is_reverse_search, nominatim_results, request_lat, request_lon, init_zoom) {
  43
  44   map = new L.map('map', {
  45     // center: [nominatim_map_init.lat, nominatim_map_init.lon],
  46     // zoom:   nominatim_map_init.zoom,
  47     attributionControl: (get_config_value('Map_Tile_Attribution') && get_config_value('Map_Tile_Attribution').length),
  48     scrollWheelZoom:    true, // !L.Browser.touch,
  49     touchZoom:          false,
  50   });
  51
  52
  53   L.tileLayer(get_config_value('Map_Tile_URL'), {
  54     // moved to footer
  55     attribution: (get_config_value('Map_Tile_Attribution') || null ) //'&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
  56   }).addTo(map);
  57
  58   // console.log(Nominatim_Config);
  59
  60   map.setView([request_lat, request_lon], init_zoom);
  61
  62   var osm2 = new L.TileLayer(get_config_value('Map_Tile_URL'), {minZoom: 0, maxZoom: 13, attribution: (get_config_value('Map_Tile_Attribution') || null )});
  63   var miniMap = new L.Control.MiniMap(osm2, {toggleDisplay: true}).addTo(map);
  64
  65   if (is_reverse_search) {
  66     // We don't need a marker, but an L.circle instance changes radius once you zoom in/out
  67     var cm = L.circleMarker([request_lat, request_lon], { radius: 5, weight: 2, fillColor: '#ff7800', color: 'red', opacity: 0.75, clickable: false});
  68     cm.addTo(map);
  69   }
  70
  71   var MapPositionControl = L.Control.extend({
  72     options: {
  73       position: 'topright'
  74     },
  75     onAdd: function (map) {
  76       var container = L.DomUtil.create('div', 'my-custom-control');
  77
  78       $(container).text('show map bounds').addClass('leaflet-bar btn btn-sm btn-default').on('click', function(e){
  79         e.preventDefault();
  80         e.stopPropagation();
  81         $('#map-position').show();
  82         $(container).hide();
  83       });
  84       $('#map-position-close a').on('click', function(e){
  85         e.preventDefault();
  86         e.stopPropagation();
  87         $('#map-position').hide();
  88         $(container).show();
  89       });
  90
  91       return container;
  92     }
  93   });
  94
  95   map.addControl(new MapPositionControl());
  96
  97
  98
  99
 100
 101   function update_viewbox_field(){
 102     // hidden HTML field
 103     $('input[name=viewbox]').val( $('input#use_viewbox').prop('checked') ? map_viewbox_as_string() : '');
 104   }
 105
 106   map.on('move', function(e) {
 107     display_map_position();
 108     update_viewbox_field();
 109   });
 110
 111   map.on('mousemove', function(e) {
 112     display_map_position(e.latlng);
 113   });
 114
 115   map.on('click', function(e) {
 116     last_click_latlng = e.latlng;
 117     display_map_position();
 118   });
 119
 120   map.on('load', function(e){
 121     display_map_position();
 122   });
 123
 124
 125   $('input#use_viewbox').on('change', function(){
 126     update_viewbox_field();
 127   });
 128
 129
 130
 131
 132   function get_result_element(position){
 133     return $('.result').eq(position);
 134   }
 135   function marker_for_result(result){
 136     return L.marker([result.lat,result.lon], {riseOnHover:true,title:result.name });
 137   }
 138   function circle_for_result(result){
 139     return L.circleMarker([result.lat,result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75, clickable: !is_reverse_search});
 140   }
 141
 142   var layerGroup = new L.layerGroup().addTo(map);
 143   function highlight_result(position, bool_focus){
 144     var result = nominatim_results[position];
 145     if (!result){ return }
 146     var result_el = get_result_element(position);
 147
 148     $('.result').removeClass('highlight');
 149     result_el.addClass('highlight');
 150
 151     layerGroup.clearLayers();
 152
 153     if (result.lat){
 154       var circle = circle_for_result(result);
 155       circle.on('click', function(){
 156         highlight_result(position);
 157       });
 158       layerGroup.addLayer(circle);
 159     }
 160     if (result.boundingbox){
 161
 162       var bounds = [[result.boundingbox[0]*1,result.boundingbox[2]*1], [result.boundingbox[1]*1,result.boundingbox[3]*1]];
 163       map.fitBounds(bounds);
 164
 165       if (result.geojson && result.geojson.type.match(/(Polygon)|(Line)/) ){
 166
 167         var geojson_layer = L.geoJson(
 168           parse_and_normalize_geojson_string(result.geojson),
 169           {
 170             // https://leafletjs.com/reference-1.0.3.html#path-option
 171             style: function(feature) {
 172               return { interactive: false, color: 'blue' };
 173             }
 174           }
 175         );
 176         layerGroup.addLayer(geojson_layer);
 177       }
 178       // else {
 179       //     var layer = L.rectangle(bounds, {color: "#ff7800", weight: 1} );
 180       //     layerGroup.addLayer(layer);
 181       // }
 182     }
 183     else {
 184       var result_coord = L.latLng(result.lat, result.lon);
 185       if ( result_coord ){
 186         if ( is_reverse_search ){
 187           // console.dir([result_coord, [request_lat, request_lon]]);
 188           // make sure the search coordinates are in the map view as well
 189           map.fitBounds([result_coord, [request_lat, request_lon]], {padding: [50,50], maxZoom: map.getZoom()});
 190
 191           // better, but causes a leaflet warning
 192           // map.panInsideBounds([[result.lat,result.lon], [nominatim_map_init.lat,nominatim_map_init.lon]], {animate: false});
 193         }
 194         else {
 195           map.panTo(result_coord, result.zoom || get_config_value('Map_Default_Zoom'));
 196         }
 197       }
 198     }
 199     if (bool_focus){
 200       $('#map').focus();
 201     }
 202   }
 203
 204
 205   $('.result').on('click', function(e){
 206     highlight_result($(this).data('position'), true);
 207   });
 208
 209   if ( is_reverse_search ){
 210     map.on('click', function(e){
 211       $('form input[name=lat]').val( e.latlng.lat);
 212       $('form input[name=lon]').val( e.latlng.wrap().lng);
 213       $('form').submit();
 214     });
 215
 216     $('#switch-coords').on('click', function(e){
 217       e.preventDefault();
 218       e.stopPropagation();
 219       var lat = $('form input[name=lat]').val();
 220       var lon = $('form input[name=lon]').val();
 221       $('form input[name=lat]').val(lon);
 222       $('form input[name=lon]').val(lat);
 223       $('form').submit();
 224     });
 225   }
 226
 227   highlight_result(0, false);
 228
 229   // common mistake is to copy&paste latitude and longitude into the 'lat' search box
 230   $('form input[name=lat]').on('change', function(){
 231     var coords = $(this).val().split(',');
 232     if (coords.length == 2) {
 233       $(this).val(L.Util.trim(coords[0]));
 234       $(this).siblings('input[name=lon]').val(L.Util.trim(coords[1]));
 235     }
 236   });
 237 };
 238
 239
 240
 241
 242
 243
 244
 245 jQuery(document).ready(function(){
 246
 247   if ( !$('#search-page,#reverse-page').length ){ return; }
 248
 249   var is_reverse_search = !!( $('#reverse-page').length );
 250   var endpoint = is_reverse_search ? 'reverse' : 'search';
 251
 252
 253   var search_params = new URLSearchParams(location.search);
 254
 255   // return view('search', [
 256   //     'sQuery' => $sQuery,
 257   //     'bAsText' => '',
 258   //     'sViewBox' => '',
 259   //     'aSearchResults' => $aSearchResults,
 260   //     'sMoreURL' => 'example.com',
 261   //     'sDataDate' => $this->fetch_status_date(),
 262   //     'sApiURL' => $url
 263   // ]);
 264
 265
 266   if (is_reverse_search) {
 267     var api_request_params = {
 268       // lat: typeof(search_params.get('lat') !== 'undefined') ? search_params.get('lat') : get_config_value('Map_Default_Lat'),
 269       // lon: typeof(search_params.get('lon') !== 'undefined') ? search_params.get('lon') : get_config_value('Map_Default_Lon'),
 270       lat: search_params.get('lat'),
 271       lon: search_params.get('lon'),
 272       zoom: (search_params.get('zoom') !== null ? search_params.get('zoom') : get_config_value('Reverse_Default_Search_Zoom')),
 273       format: 'jsonv2'
 274     }
 275
 276     var context = {
 277       // aPlace: aPlace,
 278       fLat: api_request_params.lat,
 279       fLon: api_request_params.lon,
 280       iZoom: (search_params.get('zoom') !== null ? api_request_params.zoom : get_config_value('Reverse_Default_Search_Zoom'))
 281     };
 282
 283
 284     if (api_request_params.lat && api_request_params.lon) {
 285
 286       fetch_from_api('reverse', api_request_params, function(aPlace){
 287
 288         if (aPlace.error) {
 289           aPlace = null;
 290         }
 291
 292         context.aPlace = aPlace;
 293
 294         render_template($('main'), 'reversepage-template', context);
 295
 296         init_map_on_search_page(is_reverse_search, [aPlace], api_request_params.lat, api_request_params.lon, api_request_params.zoom);
 297
 298         update_data_date();
 299       });
 300     } else {
 301       render_template($('main'), 'reversepage-template', context);
 302
 303       init_map_on_search_page(is_reverse_search, [], get_config_value('Map_Default_Lat'), get_config_value('Map_Default_Lon'), get_config_value('Map_Default_Zoom'));
 304     }
 305
 306   } else {
 307     var api_request_params = {
 308       q: search_params.get('q'),
 309       polygon_geojson: search_params.get('polygon_geojson') ? 1 : 0,
 310       viewbox: search_params.get('viewbox'),
 311       format: 'jsonv2'
 312     };
 313
 314     var context = {
 315       // aSearchResults: aResults,
 316       sQuery: api_request_params.q,
 317       sViewBox: '',
 318       env: Nominatim_Config,
 319       sMoreURL: ''
 320     };
 321
 322     if (api_request_params.q) {
 323
 324       fetch_from_api('search', api_request_params, function(aResults){
 325
 326         context.aSearchResults = aResults;
 327
 328         render_template($('main'), 'searchpage-template', context);
 329
 330         init_map_on_search_page(is_reverse_search, aResults, get_config_value('Map_Default_Lat'), get_config_value('Map_Default_Lon'), get_config_value('Map_Default_Zoom'));
 331
 332         $('#q').focus();
 333
 334         update_data_date();
 335       });
 336     } else {
 337       render_template($('main'), 'searchpage-template', context);
 338
 339       init_map_on_search_page(is_reverse_search, [], get_config_value('Map_Default_Lat'), get_config_value('Map_Default_Lon'), get_config_value('Map_Default_Zoom'));
 340     }
 341
 342
 343   }
 344 });
 345
 346
 347
 348