src/assets/js/detailpage.js

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