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 });