detail page: only load and display parent-of section after button click

[nominatim-ui.git] / src / assets / js / detailpage.js

diff --git a/src/assets/js/detailpage.js b/src/assets/js/detailpage.js
index 299103e39567e8368bb154c899e5e5a8766bbdca..09a8ce105d12c218aa419073d4517b21243c2b1c 100644 (file)
--- a/src/assets/js/detailpage.js
+++ b/src/assets/js/detailpage.js
@@ -1,77 +1,100 @@
-/*********************************************************
-* DETAILS PAGE
-*********************************************************/
-
+// *********************************************************
+// DETAILS PAGE
+// *********************************************************
 
 
 function init_map_on_detail_page(lat, lon, geojson) {
-    map = new L.map('map', {
-        // center: [nominatim_map_init.lat, nominatim_map_init.lon],
-        // zoom:   nominatim_map_init.zoom,
-        attributionControl: (get_config_value('Map_Tile_Attribution') && get_config_value('Map_Tile_Attribution').length),
-        scrollWheelZoom:    true, // !L.Browser.touch,
-        touchZoom:          false,
-    });
-
-    L.tileLayer(get_config_value('Map_Tile_URL'), {
-        // moved to footer
-        attribution: (get_config_value('Map_Tile_Attribution') || null ) //'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(map);
-
-    var layerGroup = new L.layerGroup().addTo(map);
-
-    var circle = L.circleMarker([lat,lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75});
-    map.addLayer(circle);
-
-    if (geojson) {
-        var geojson_layer = L.geoJson(
-            // http://leafletjs.com/reference-1.0.3.html#path-option
-            parse_and_normalize_geojson_string(geojson),
-            {
-                style: function(feature) {
-                    return { interactive: false, color: 'blue' }; 
-                }
-            }
-        );
-        map.addLayer(geojson_layer);
-        map.fitBounds(geojson_layer.getBounds());
-    } else {
-        map.setView([lat,lon],10);
-    }
-
-    var osm2 = new L.TileLayer(get_config_value('Map_Tile_URL'), {minZoom: 0, maxZoom: 13, attribution: (get_config_value('Map_Tile_Attribution') || null )});
-    var miniMap = new L.Control.MiniMap(osm2, {toggleDisplay: true}).addTo(map);
+  map = new L.map('map', {
+    // center: [nominatim_map_init.lat, nominatim_map_init.lon],
+    // zoom:   nominatim_map_init.zoom,
+    attributionControl: (get_config_value('Map_Tile_Attribution') && get_config_value('Map_Tile_Attribution').length),
+    scrollWheelZoom: true, // !L.Browser.touch,
+    touchZoom: false,
+  });
+
+  L.tileLayer(get_config_value('Map_Tile_URL'), {
+    // moved to footer
+    attribution: (get_config_value('Map_Tile_Attribution') || null) // '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+  var layerGroup = new L.layerGroup().addTo(map);
+
+  var circle = L.circleMarker([lat, lon], {
+    radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75
+  });
+  map.addLayer(circle);
+
+  if (geojson) {
+    var geojson_layer = L.geoJson(
+      // https://leafletjs.com/reference-1.0.3.html#path-option
+      parse_and_normalize_geojson_string(geojson),
+      {
+        style: function (feature) {
+          return { interactive: false, color: 'blue' };
+        }
+      }
+    );
+    map.addLayer(geojson_layer);
+    map.fitBounds(geojson_layer.getBounds());
+  } else {
+    map.setView([lat, lon], 10);
+  }
+
+  var osm2 = new L.TileLayer(get_config_value('Map_Tile_URL'), { minZoom: 0, maxZoom: 13, attribution: (get_config_value('Map_Tile_Attribution') || null) });
+  var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
 }
 
 
+jQuery(document).ready(function () {
+  if (!$('#details-page').length) { return; }
 
-jQuery(document).ready(function(){
+  var search_params = new URLSearchParams(location.search);
+  // var place_id = search_params.get('place_id');
 
-    if ( !$('#details-page').length ){ return; }
+  var api_request_params = {
+    place_id: search_params.get('place_id'),
+    osmtype: search_params.get('osmtype'),
+    osmid: search_params.get('osmid'),
+    keywords: search_params.get('keywords'),
+    addressdetails: 1,
+    hierarchy: (search_params.get('hierarchy') === '1' ? 1 : 0),
+    group_hierarchy: 1,
+    polygon_geojson: 1,
+    format: 'json'
+  };
 
-    var search_params = new URLSearchParams(location.search);
-    // var place_id = search_params.get('place_id');
+  if (api_request_params.place_id || (api_request_params.osmtype && api_request_params.osmid)) {
+    fetch_from_api('details', api_request_params, function (aFeature) {
+      var context = { aPlace: aFeature, base_url: location.search };
 
-    var api_request_params = {
-        place_id: search_params.get('place_id'),
-        osmtype: search_params.get('osmtype'),
-        osmid: search_params.get('osmid'),
-        keywords: search_params.get('keywords'),
-        addressdetails: 1,
-        hierarchy: 1,
-        group_hierarchy: 1,
-        polygon_geojson: 1,
-        format: 'json'
-    };
+      render_template($('main'), 'detailspage-template', context);
 
-    fetch_from_api('details', api_request_params, function(aFeature){
+      update_data_date();
 
-        var context = { aPlace: aFeature };
+      var lat = aFeature.centroid.coordinates[1];
+      var lon = aFeature.centroid.coordinates[0];
+      init_map_on_detail_page(lat, lon, aFeature.geometry);
+    });
+  } else {
+    render_template($('main'), 'detailspage-index-template');
+  }
 
-        render_template($('main'), 'detailspage-template', context);
+  $('#form-by-type-and-id,#form-by-osm-url').on('submit', function (e) {
+    e.preventDefault();
 
-        update_data_date();
+    var val = $(this).find('input[type=edit]').val();
+    var matches = val.match(/^\s*([NWR])(\d+)\s*$/i);
 
-        init_map_on_detail_page(aFeature.lat, aFeature.lon, aFeature.geometry);
-    });
-});
\ No newline at end of file
+    if (!matches) {
+      matches = val.match(/\/(relation|way|node)\/(\d+)\s*$/);
+    }
+
+    if (matches) {
+      $(this).find('input[name=osmtype]').val(matches[1].charAt(0).toUpperCase());
+      $(this).find('input[name=osmid]').val(matches[2]);
+      $(this).get(0).submit();
+    } else {
+      alert('invalid input');
+    }
+  });
+});