src/assets/js/detailpage.js

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