src/assets/js/detailpage.js

   1 // *********************************************************
   2 // DETAILS PAGE
   3 // *********************************************************
   4
   5
   6 function init_map_on_detail_page(lat, lon, geojson) {
   7   var attribution = get_config_value('Map_Tile_Attribution') || null;
   8   map = new L.map('map', {
   9     // center: [nominatim_map_init.lat, nominatim_map_init.lon],
  10     // zoom:   nominatim_map_init.zoom,
  11     attributionControl: (attribution && attribution.length),
  12     scrollWheelZoom: true, // !L.Browser.touch,
  13     touchZoom: false
  14   });
  15
  16   L.tileLayer(get_config_value('Map_Tile_URL'), {
  17     // moved to footer
  18     // '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
  19     attribution: attribution
  20   }).addTo(map);
  21
  22   // var layerGroup = new L.layerGroup().addTo(map);
  23
  24   var circle = L.circleMarker([lat, lon], {
  25     radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75
  26   });
  27   map.addLayer(circle);
  28
  29   if (geojson) {
  30     var geojson_layer = L.geoJson(
  31       // https://leafletjs.com/reference-1.0.3.html#path-option
  32       parse_and_normalize_geojson_string(geojson),
  33       {
  34         style: function () {
  35           return { interactive: false, color: 'blue' };
  36         }
  37       }
  38     );
  39     map.addLayer(geojson_layer);
  40     map.fitBounds(geojson_layer.getBounds());
  41   } else {
  42     map.setView([lat, lon], 10);
  43   }
  44
  45   var osm2 = new L.TileLayer(
  46     get_config_value('Map_Tile_URL'),
  47     {
  48       minZoom: 0,
  49       maxZoom: 13,
  50       attribution: (get_config_value('Map_Tile_Attribution') || null)
  51     }
  52   );
  53   (new L.Control.MiniMap(osm2, { toggleDisplay: true })).addTo(map);
  54 }
  55
  56
  57 jQuery(document).ready(function () {
  58   if (!$('#details-page').length) { return; }
  59
  60   var search_params = new URLSearchParams(window.location.search);
  61   // var place_id = search_params.get('place_id');
  62
  63   var api_request_params = {
  64     place_id: search_params.get('place_id'),
  65     osmtype: search_params.get('osmtype'),
  66     osmid: search_params.get('osmid'),
  67     keywords: search_params.get('keywords'),
  68     addressdetails: 1,
  69     hierarchy: (search_params.get('hierarchy') === '1' ? 1 : 0),
  70     group_hierarchy: 1,
  71     polygon_geojson: 1,
  72     format: 'json'
  73   };
  74
  75   if (api_request_params.place_id || (api_request_params.osmtype && api_request_params.osmid)) {
  76     fetch_from_api('details', api_request_params, function (aFeature) {
  77       var context = { aPlace: aFeature, base_url: window.location.search };
  78
  79       render_template($('main'), 'detailspage-template', context);
  80       if (api_request_params.place_id) {
  81         update_html_title('Details for ' + api_request_params.place_id);
  82       } else {
  83         update_html_title('Details for ' + api_request_params.osmtype + api_request_params.osmid);
  84       }
  85
  86       update_data_date();
  87
  88       var lat = aFeature.centroid.coordinates[1];
  89       var lon = aFeature.centroid.coordinates[0];
  90       init_map_on_detail_page(lat, lon, aFeature.geometry);
  91     });
  92   } else {
  93     render_template($('main'), 'detailspage-index-template');
  94   }
  95
  96   $('#form-by-type-and-id,#form-by-osm-url').on('submit', function (e) {
  97     e.preventDefault();
  98
  99     var val = $(this).find('input[type=edit]').val();
 100     var matches = val.match(/^\s*([NWR])(\d+)\s*$/i);
 101
 102     if (!matches) {
 103       matches = val.match(/\/(relation|way|node)\/(\d+)\s*$/);
 104     }
 105
 106     if (matches) {
 107       $(this).find('input[name=osmtype]').val(matches[1].charAt(0).toUpperCase());
 108       $(this).find('input[name=osmid]').val(matches[2]);
 109       $(this).get(0).submit();
 110     } else {
 111       alert('invalid input');
 112     }
 113   });
 114 });