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 function details_page_load() {
  58
  59   var search_params = new URLSearchParams(window.location.search);
  60   // var place_id = search_params.get('place_id');
  61
  62   var api_request_params = {
  63     place_id: search_params.get('place_id'),
  64     osmtype: search_params.get('osmtype'),
  65     osmid: search_params.get('osmid'),
  66     keywords: search_params.get('keywords'),
  67     addressdetails: 1,
  68     hierarchy: (search_params.get('hierarchy') === '1' ? 1 : 0),
  69     group_hierarchy: 1,
  70     polygon_geojson: 1,
  71     format: 'json'
  72   };
  73
  74   if (api_request_params.place_id || (api_request_params.osmtype && api_request_params.osmid)) {
  75     fetch_from_api('details', api_request_params, function (aFeature) {
  76       var context = { aPlace: aFeature, base_url: window.location.search };
  77
  78       render_template($('main'), 'detailspage-template', context);
  79       if (api_request_params.place_id) {
  80         update_html_title('Details for ' + api_request_params.place_id);
  81       } else {
  82         update_html_title('Details for ' + api_request_params.osmtype + api_request_params.osmid);
  83       }
  84
  85       update_data_date();
  86
  87       var lat = aFeature.centroid.coordinates[1];
  88       var lon = aFeature.centroid.coordinates[0];
  89       init_map_on_detail_page(lat, lon, aFeature.geometry);
  90     });
  91   } else {
  92     render_template($('main'), 'detailspage-index-template');
  93   }
  94
  95   $('#form-by-type-and-id,#form-by-osm-url').on('submit', function (e) {
  96     e.preventDefault();
  97
  98     var val = $(this).find('input[type=edit]').val();
  99     var matches = val.match(/^\s*([NWR])(\d+)\s*$/i);
 100
 101     if (!matches) {
 102       matches = val.match(/\/(relation|way|node)\/(\d+)\s*$/);
 103     }
 104
 105     if (matches) {
 106       $(this).find('input[name=osmtype]').val(matches[1].charAt(0).toUpperCase());
 107       $(this).find('input[name=osmid]').val(matches[2]);
 108       $(this).get(0).submit();
 109     } else {
 110       alert('invalid input');
 111     }
 112   });
 113 }