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