OpenStreetMapTemplate.html
1 <#if iterationNumber?? && iterationNumber?has_content>
2 <#assign idName = buildEntryName( entry, entry_iteration_number )>
3 <#assign iterationNumber = entry_iteration_number?c >
4 <#assign useNoIteration = false>
5 <#else>
6 <#assign idName = entry.idEntry>
7 <#assign iterationNumber = 0 >
8 <#assign entry_iteration_number = 0 >
9 <#assign useNoIteration = true>
10 </#if>
11 <#if useNoIteration == false>
12 <input type="hidden" id="${idName}_map_provider" name="${idName}_map_provider" value="${entry.mapProvider.key}"/>
13 <#else>
14 <input type="hidden" id="${idName}_map_provider" name="${idName}_map_provider" value="openstreetmap"/>
15 </#if>
16 <input type="hidden" name="no_address_message" value="#i18n{module.genericattributes.openstreetmap.no_address_message}"/>
17 <div class="form-row" id="${idName}_waiting" style="display:none;">
18 <p>#i18n{module.genericattributes.openstreetmap.loading}</p>
19 </div>
20 <div class="form-row">
21 <div id="${idName}_gmap" data-map="${iterationNumber}" class="col col-osm osm-map" onclick="setIdAttribute(this.id)"></div>
22 </div>
23 <input type="hidden" name="leafletMap"/>
24 <#if !(editModeValue?? && editModeValue=="ReadOnly")>
25 <button type="button" onclick=displayLocationOnMap(this.id) id="${idName}_gmap_button" <#if useNoIteration == false> class="btn btn-primary btn-osm" <#else>class="btn btn-primary"</#if>>#i18n{portal.util.labelSearch}</button>
26 <#else>
27 <#assign responseX = "" >
28 <#assign responseY = "" >
29 <#if getResponseContainingTheFieldWithCode( list_responses, "X" )?? >
30 <#assign responseX = getResponseContainingTheFieldWithCode( list_responses, "X" ).toStringValueResponse >
31 </#if>
32 <#if getResponseContainingTheFieldWithCode( list_responses, "Y" )?? >
33 <#assign responseY = getResponseContainingTheFieldWithCode( list_responses, "Y" ).toStringValueResponse >
34 </#if>
35 <#if responseX == "" || responseX == "0" || responseY == "" || responseY == "0">
36
37 <#else>
38 <input type="hidden" name="${idName}_x" id="${idName}_x" value="${responseX!}">
39 <input type="hidden" name="${idName}_y" id="${idName}_y" value="${responseY!}">
40 </#if>
41 </#if>
42 <link rel="stylesheet" href="js/plugins/genericattributes/modules/openstreetmap/lib/leaflet/leaflet.css" />
43 <link rel="stylesheet" href="js/plugins/genericattributes/modules/openstreetmap/css/openstreetmap.css" />
44 <script src="js/plugins/genericattributes/modules/openstreetmap/lib/leaflet/leaflet.js"></script>
45 <script>
46 var mapData = [];
47 var mapArray = [];
48 /* this script is running for each iteration and we want to instantiate the map only at the last one */
49 window.onload = function () {
50 let iterationNumber = '${entry_iteration_number}';
51 if (document.getElementById('number_iteration_geolocation') == null) {
52 let numberAddressInput = document.createElement('input');
53 numberAddressInput.type = 'hidden';
54 numberAddressInput.id = 'number_iteration_geolocation';
55 numberAddressInput.name = 'number_iteration_geolocation';
56 if (document.getElementById('form-validate') == null) {
57 // if we are looking at the details of a response in the back office
58 document.getElementById('form-response-details').appendChild(numberAddressInput);
59 } else {
60 // user is filling the form
61 document.getElementById('form-validate').appendChild(numberAddressInput);
62 }
63 document.getElementById('number_iteration_geolocation').value = iterationNumber;
64 } else {
65 document.getElementById('number_iteration_geolocation').value = iterationNumber;
66 }
67 if (parseInt(document.getElementById('number_iteration_geolocation').value) === document.getElementsByName("leafletMap").length - 1) {
68 for (let i = 0; i < document.getElementsByName("leafletMap").length; i++) {
69 <#if useNoIteration>
70 const prefix = "${entry.idEntry}";
71 <#else>
72 const prefix = "nIt" + i + "_attribute" + "${entry.idEntry}";
73 </#if>
74 const idMap = prefix + '_gmap';
75 let lat = 48.853;
76 let lon = 2.35;
77 let hasMarker = false;
78 if (document.getElementById(prefix + '_x').value !== "" && document.getElementById(prefix + '_y').value !== "") {
79 lat = document.getElementById(prefix + '_y').value;
80 lon = document.getElementById(prefix + '_x').value;
81 hasMarker = true;
82 }
83 const iterationData = {
84 idMap: idMap,
85 center: [lat, lon],
86 zoom: 10,
87 hasMarker: hasMarker
88 };
89 mapData.push(iterationData);
90 }
91 const L_tiles = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
92 const L_options = {
93 attribution: '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
94 minZoom: 0,
95 maxZoom: 18,
96 ext: 'png'
97 };
98 const initMap = (mapElement) => {
99 const id = parseInt(mapElement.dataset.map);
100 const data = mapData[id];
101 const map = L.map(mapElement).setView(data.center, data.zoom);
102 L.tileLayer(L_tiles, L_options).addTo(map);
103 if (data.hasMarker) {
104 L.marker(data.center).addTo(map);
105
106 }
107 map.on('click', onMapClick);
108
109 mapArray.push(map);
110 };
111
112 const allMapElements = document.querySelectorAll("[data-map]");
113 allMapElements.forEach(initMap);
114 }
115 /* set z-index of address suggestion so it's above leaflet zoom button */
116 for (let i = 0; i < iterationNumber + 1; i++) {
117 <#if useNoIteration>
118 const prefix = "${entry.idEntry}";
119 <#else>
120 const prefix = "nIt" + i + "_attribute" + "${entry.idEntry}";
121 </#if>
122 const addressFieldId = prefix + "_address"
123 document.getElementById(addressFieldId).addEventListener('keyup', function () {
124 if (document.getElementById(addressFieldId).value.length > 3) {
125 setTimeout(function () {
126 const it = i + 1;
127 const addressSuggestionId = "ui-id-" + it;
128 document.getElementById(addressSuggestionId).style.zIndex = '1001';
129 }, 500);
130 }
131 })
132
133 }
134 };
135 </script>
136 <script src="js/plugins/genericattributes/modules/openstreetmap/genericattributes_openstreetmap.js"></script>
137 <noscript>#i18n{module.genericattributes.openstreetmap.javascript.disabled}</noscript>