]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/assets/js/detailpage.js
9ef2d97d63e0e4752680b80a3ad0f10f5c50c0fd
[nominatim-ui.git] / 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 });