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