src/assets/js/nominatim-ui.js

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