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 (feature) {
  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(get_config_value('Map_Tile_URL'), { minZoom: 0, maxZoom: 13, attribution: (get_config_value('Map_Tile_Attribution') || null) });
  44   var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
  45 }
  46
  47
  48 jQuery(document).ready(function () {
  49   if (!$('#details-page').length) { return; }
  50
  51   var search_params = new URLSearchParams(location.search);
  52   // var place_id = search_params.get('place_id');
  53
  54   var api_request_params = {
  55     place_id: search_params.get('place_id'),
  56     osmtype: search_params.get('osmtype'),
  57     osmid: search_params.get('osmid'),
  58     keywords: search_params.get('keywords'),
  59     addressdetails: 1,
  60     hierarchy: 1,
  61     group_hierarchy: 1,
  62     polygon_geojson: 1,
  63     format: 'json'
  64   };
  65
  66   if (api_request_params.place_id || (api_request_params.osmtype && api_request_params.osmid)) {
  67     fetch_from_api('details', api_request_params, function (aFeature) {
  68       var context = { aPlace: aFeature };
  69
  70       render_template($('main'), 'detailspage-template', context);
  71
  72       update_data_date();
  73
  74       var lat = aFeature.centroid.coordinates[1];
  75       var lon = aFeature.centroid.coordinates[0];
  76       init_map_on_detail_page(lat, lon, aFeature.geometry);
  77     });
  78   } else {
  79     render_template($('main'), 'detailspage-index-template');
  80   }
  81
  82   $('#form-by-type-and-id,#form-by-osm-url').on('submit', function (e) {
  83     e.preventDefault();
  84
  85     var val = $(this).find('input[type=edit]').val();
  86     var matches = val.match(/^\s*([NWR])(\d+)\s*$/i);
  87
  88     if (!matches) {
  89       matches = val.match(/\/(relation|way|node)\/(\d+)\s*$/);
  90     }
  91
  92     if (matches) {
  93       $(this).find('input[name=osmtype]').val(matches[1].charAt(0).toUpperCase());
  94       $(this).find('input[name=osmid]').val(matches[2]);
  95       $(this).get(0).submit();
  96     } else {
  97       alert('invalid input');
  98     }
  99   });
 100 });