@vidro/map-handler 1.0.12 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +13 -4
  2. package/dist/map-handler.js +1 -1
  3. package/examples/full/cachedToken.dat +1 -1
  4. package/examples/full/cachedTokenData.dat +1 -1
  5. package/examples/full/index.php +9 -1
  6. package/examples/full/tester.js +493 -450
  7. package/package.json +1 -1
  8. package/src/index.js +10 -1
package/examples/full/tester.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // Config:
2
2
 
3
3
  var sessionToken = document.querySelector("#sessionToken").textContent;
4
- var communicator = new VidroMaps.Communicator({sessionToken});
4
+ var communicator = new VidroMaps.Communicator({ sessionToken });
5
5
  var clickedCoordinates = null;
6
6
  // UI buttons:
7
7
 
@@ -23,8 +23,12 @@ var btStopGeolocalize = document.querySelector("#btStopGeolocalize");
23
23
  var btHighlight = document.querySelector("#btHighlight");
24
24
  var zoomToHighlightCheck = document.querySelector("#zoomToHighlightCheck");
25
25
  var btToggleGiswaterTiled = document.querySelector("#btToggleGiswaterTiled");
26
- var toggleGiswaterTiledCheck = document.querySelector("#toggleGiswaterTiledCheck");
27
- var btReloadDisplayedLayers = document.querySelector("#btReloadDisplayedLayers");
26
+ var toggleGiswaterTiledCheck = document.querySelector(
27
+ "#toggleGiswaterTiledCheck"
28
+ );
29
+ var btReloadDisplayedLayers = document.querySelector(
30
+ "#btReloadDisplayedLayers"
31
+ );
28
32
  var btAddGeoJSON = document.querySelector("#btAddGeoJSON");
29
33
  var btClearGeoJSON = document.querySelector("#btClearGeoJSON");
30
34
  var geoJSONFileContent = document.getElementById("geojsonfile");
@@ -36,9 +40,13 @@ var btsetGiswaterFilters = document.querySelector("#btsetGiswaterFilters");
36
40
  var btgetGiswaterFilters = document.querySelector("#btgetGiswaterFilters");
37
41
  var btLoadWMSLayers = document.querySelector("#btLoadWMSLayers");
38
42
  var btDebug = document.querySelector("#btDebug");
39
- var btAddGeoJSONFromGiswater = document.querySelector("#btAddGeoJSONFromGiswater");
43
+ var btAddGeoJSONFromGiswater = document.querySelector(
44
+ "#btAddGeoJSONFromGiswater"
45
+ );
40
46
  //override layer properties
41
- var overrideLayerProperties = document.querySelector("#overrideLayerProperties");
47
+ var overrideLayerProperties = document.querySelector(
48
+ "#overrideLayerProperties"
49
+ );
42
50
  var gutter = document.querySelector("#gutter");
43
51
  var toggleTransparentLayer = document.querySelector("#toggleTransparentLayer");
44
52
  var toggleSingleTile = document.querySelector("#toggleSingleTile");
@@ -49,301 +57,318 @@ var geom_stroke_width = document.querySelector("#geom_stroke_width");
49
57
  var geom_fill_color = document.querySelector("#geom_fill_color");
50
58
  var geom_shape = document.querySelector("#geom_shape");
51
59
  var geom_radius = document.querySelector("#geom_radius");
52
-
60
+
53
61
  var btSetColors = document.querySelector("#btSetColors");
54
62
  var btGetElementsFromLayer = document.querySelector("#btGetElementsFromLayer");
55
63
  var btGetToc = document.querySelector("#btGetToc");
56
-
64
+ var btChangeBackground = document.querySelector("#btChangeBackground");
65
+ var newBackground = document.querySelector("#newBackground");
57
66
 
58
67
  var geoJSONName = null; //geoJSON file name
59
68
  var geoJSONContent = null; // geojson file content
60
69
  //local var for store active layer
61
70
  var currentActiveLayer = null;
62
- function cleanContainers(){
63
- Error_container.innerHTML = '';
64
- Result_container.innerHTML = '';
71
+ function cleanContainers() {
72
+ Error_container.innerHTML = "";
73
+ Result_container.innerHTML = "";
65
74
  }
66
75
 
67
76
  // Map events
68
77
 
69
- communicator.on("onZoomChange", function(data){
70
- console.log("onZoomChange",data);
71
- if(document.getElementById('zoomLevel')){
72
- //Add current zoom Level to highlight input zoomlevel
73
- document.getElementById('zoomLevel').value = data;
74
- }
75
- cleanContainers();
76
- Result_container.innerHTML = `Zoom level changed: ${data}`;
78
+ communicator.on("onZoomChange", function (data) {
79
+ console.log("onZoomChange", data);
80
+ if (document.getElementById("zoomLevel")) {
81
+ //Add current zoom Level to highlight input zoomlevel
82
+ document.getElementById("zoomLevel").value = data;
83
+ }
84
+ cleanContainers();
85
+ Result_container.innerHTML = `Zoom level changed: ${data}`;
77
86
  });
78
87
 
79
-
80
- communicator.on("geomAdded", function(data){
81
- console.log("geomAdded",data);
82
- cleanContainers();
83
- //show geometry on DOM
84
- Result_container.innerHTML = data;
85
- //Add current geom to highlight input geom
86
- document.getElementById('geom').value = data;
88
+ communicator.on("geomAdded", function (data) {
89
+ console.log("geomAdded", data);
90
+ cleanContainers();
91
+ //show geometry on DOM
92
+ Result_container.innerHTML = data;
93
+ //Add current geom to highlight input geom
94
+ document.getElementById("geom").value = data;
87
95
  });
88
96
 
89
- communicator.on("loaded", function(data){
90
- console.log("loaded",data);
97
+ communicator.on("loaded", function (data) {
98
+ console.log("loaded", data);
99
+ communicator.setCustomColors({
100
+ geom_stroke_color: "rgb(19, 39, 99,0.5)",
101
+ geom_fill_color: "rgb(19, 39, 99,0.5)",
102
+ geom_stroke_width: 1,
103
+ geom_shape: "circle",
104
+ geom_radius: 200,
105
+ });
91
106
  });
92
107
 
93
- communicator.on("layers", function(data){
94
- console.log("layers received",data);
95
- fillDisplayedLayersSelect(data);
108
+ communicator.on("layers", function (data) {
109
+ console.log("layers received", data);
110
+ fillDisplayedLayersSelect(data);
96
111
  });
97
112
 
98
- communicator.on("getToc", function(data){
99
- console.log("getToc received",data);
113
+ communicator.on("getToc", function (data) {
114
+ console.log("getToc received", data);
100
115
  });
101
116
 
102
-
103
-
104
- communicator.on("geoJSONlayers", function(data){
105
- console.log("geoJSONlayers received",data);
106
- fillGeoJSONLayersSelect(data);
117
+ communicator.on("geoJSONlayers", function (data) {
118
+ console.log("geoJSONlayers received", data);
119
+ fillGeoJSONLayersSelect(data);
107
120
  });
108
121
 
109
122
  //error event
110
- communicator.on("error", function(data){
111
- console.error("error",data);
112
- cleanContainers();
113
- Error_container.innerHTML = data.error;
123
+ communicator.on("error", function (data) {
124
+ console.error("error", data);
125
+ cleanContainers();
126
+ Error_container.innerHTML = data.error;
114
127
  });
115
128
 
116
129
  //clicked coordinates
117
- communicator.on("coordinates", function(data){
118
- console.info("coordinates",data);
119
- cleanContainers();
120
- clickedCoordinates = [data.coordinates[0],data.coordinates[1]]
121
- Result_container.innerHTML = `Clicked coordinates -> x: ${data.coordinates[0]}, y: ${data.coordinates[1]}`;
130
+ communicator.on("coordinates", function (data) {
131
+ console.info("coordinates", data);
132
+ cleanContainers();
133
+ clickedCoordinates = [data.coordinates[0], data.coordinates[1]];
134
+ Result_container.innerHTML = `Clicked coordinates -> x: ${data.coordinates[0]}, y: ${data.coordinates[1]}`;
122
135
  });
123
136
 
124
- communicator.on("activeLayer", function(data){
125
- console.info("activeLayer",data);
126
- cleanContainers();
127
- Result_container.innerHTML = data.activeLayer;
137
+ communicator.on("activeLayer", function (data) {
138
+ console.info("activeLayer", data);
139
+ cleanContainers();
140
+ Result_container.innerHTML = data.activeLayer;
128
141
  });
129
142
 
130
- communicator.on("geolocation", function(data){
131
- console.info("geolocation",data);
132
- cleanContainers();
143
+ communicator.on("geolocation", function (data) {
144
+ console.info("geolocation", data);
145
+ cleanContainers();
133
146
  });
134
147
 
135
- communicator.on("GiswaterLayerAvailableFilters", function(data){
136
- console.info("GiswaterLayerAvailableFilters",data);
137
- cleanContainers();
138
- Result_container.innerHTML = data.filters;
148
+ communicator.on("GiswaterLayerAvailableFilters", function (data) {
149
+ console.info("GiswaterLayerAvailableFilters", data);
150
+ cleanContainers();
151
+ Result_container.innerHTML = data.filters;
139
152
  });
140
153
 
141
-
142
154
  //info event
143
- communicator.on("info", function(data){
144
- console.log("info received",data);
145
- var dataToRender = data.data;
146
- //depending on infoType, data.data can be an string or a JSON
147
- if(data.infoType==="giswater"){
148
- dataToRender = JSON.stringify(data.data)
149
- }
150
- cleanContainers();
151
- Result_container.innerText = dataToRender;
155
+ communicator.on("info", function (data) {
156
+ console.log("info received", data);
157
+ var dataToRender = data.data;
158
+ //depending on infoType, data.data can be an string or a JSON
159
+ if (data.infoType === "giswater") {
160
+ dataToRender = JSON.stringify(data.data);
161
+ }
162
+ cleanContainers();
163
+ Result_container.innerText = dataToRender;
152
164
  });
153
165
 
154
166
  //Layer elements list
155
- communicator.on("layerElements", function(data){
156
- console.log("layerElements received",data);
157
- var dataToRender = data.data;
158
- //depending on requested format, data.data can be an string (xml) or a JSON
159
- cleanContainers();
160
- Result_container.innerText = (typeof dataToRender==="object")? JSON.stringify(dataToRender): dataToRender;
167
+ communicator.on("layerElements", function (data) {
168
+ console.log("layerElements received", data);
169
+ var dataToRender = data.data;
170
+ //depending on requested format, data.data can be an string (xml) or a JSON
171
+ cleanContainers();
172
+ Result_container.innerText =
173
+ typeof dataToRender === "object"
174
+ ? JSON.stringify(dataToRender)
175
+ : dataToRender;
161
176
  });
162
177
 
163
178
  //giswater tiled background
164
- communicator.on("giswaterTiledBackgroundDisplayed", function(data){
165
- console.log("giswaterTiledBackgroundDisplayed",data);
166
- if(toggleGiswaterTiledCheck){
167
- toggleGiswaterTiledCheck.checked = data.visible;
168
- }
169
-
179
+ communicator.on("giswaterTiledBackgroundDisplayed", function (data) {
180
+ console.log("giswaterTiledBackgroundDisplayed", data);
181
+ if (toggleGiswaterTiledCheck) {
182
+ toggleGiswaterTiledCheck.checked = data.visible;
183
+ }
170
184
  });
171
- communicator.on("giswaterTiledBackgroundAvailable", function(data){
172
- console.log("giswaterTiledBackgroundAvailable",data);
173
- if(btToggleGiswaterTiled && data.available){
174
- btToggleGiswaterTiled.disabled = false;
175
- var use_giswater_tiled = document.querySelector("#use_giswater_tiled");
176
- if (use_giswater_tiled) {
177
- toggleGiswaterTiledCheck.checked = use_giswater_tiled.checked;
178
- }
179
- }
185
+ communicator.on("giswaterTiledBackgroundAvailable", function (data) {
186
+ console.log("giswaterTiledBackgroundAvailable", data);
187
+ if (btToggleGiswaterTiled && data.available) {
188
+ btToggleGiswaterTiled.disabled = false;
189
+ var use_giswater_tiled = document.querySelector("#use_giswater_tiled");
190
+ if (use_giswater_tiled) {
191
+ toggleGiswaterTiledCheck.checked = use_giswater_tiled.checked;
192
+ }
193
+ }
180
194
  });
181
- communicator.on("WMSInfoAvailable", function(){
182
- console.log("WMSInfoAvailable");
183
- if(btWMSInfo) btWMSInfo.disabled = false;
195
+ communicator.on("WMSInfoAvailable", function () {
196
+ console.log("WMSInfoAvailable");
197
+ if (btWMSInfo) btWMSInfo.disabled = false;
184
198
  });
185
- communicator.on("availableWMSLayers", function(data){
186
- console.log("availableWMSLayers",data);
187
- fillLayersSelect(data);
199
+ communicator.on("availableWMSLayers", function (data) {
200
+ console.log("availableWMSLayers", data);
201
+ fillLayersSelect(data);
188
202
  });
189
203
 
190
204
  function fillLayersSelect(options) {
191
- console.log('fillLayersSelect',options)
192
- var projectlayers = document.getElementById("projectlayers");
193
- if(projectlayers){
194
-
195
-
205
+ console.log("fillLayersSelect", options);
206
+ var projectlayers = document.getElementById("projectlayers");
207
+ if (projectlayers) {
196
208
  var length = projectlayers.options.length;
197
209
 
198
- for (i = length-1; i >= 0; i--) {
210
+ for (i = length - 1; i >= 0; i--) {
199
211
  projectlayers.options[i] = null;
200
212
  }
201
- for(var i = 0; i < options.length; i++) {
202
- var opt = options[i];
203
- var el = document.createElement("option");
204
- el.textContent = opt;
205
- el.value = opt;
206
- projectlayers.appendChild(el);
213
+ for (var i = 0; i < options.length; i++) {
214
+ var opt = options[i];
215
+ var el = document.createElement("option");
216
+ el.textContent = opt;
217
+ el.value = opt;
218
+ projectlayers.appendChild(el);
207
219
  }
208
220
  }
209
221
  }
210
222
 
211
- function fillDisplayedLayersSelect(options){
212
- var layers_select = document.getElementById("layers");
213
- if(layers_select){
214
- //empty previous options
215
- var length = layers_select.options.length;
216
- for (i = length-1; i >= 0; i--) {
217
- layers_select.options[i] = null;
218
- }
219
- for(var i = 0; i < options.length; i++) {
220
- var opt = options[i];
221
- var el = document.createElement("option");
222
- el.textContent = opt;
223
- el.value = opt;
224
- layers_select.appendChild(el);
225
- }
226
- }
227
- }
228
-
229
- if(btDebug){
230
- btDebug.addEventListener("click", function(){
231
- var debug = parseInt(document.getElementById("debug").value);
232
- communicator.setDebug(debug);
233
- });
223
+ function fillDisplayedLayersSelect(options) {
224
+ var layers_select = document.getElementById("layers");
225
+ if (layers_select) {
226
+ //empty previous options
227
+ var length = layers_select.options.length;
228
+ for (i = length - 1; i >= 0; i--) {
229
+ layers_select.options[i] = null;
230
+ }
231
+ for (var i = 0; i < options.length; i++) {
232
+ var opt = options[i];
233
+ var el = document.createElement("option");
234
+ el.textContent = opt;
235
+ el.value = opt;
236
+ layers_select.appendChild(el);
237
+ }
238
+ }
239
+ }
240
+
241
+ if (btDebug) {
242
+ btDebug.addEventListener("click", function () {
243
+ var debug = parseInt(document.getElementById("debug").value);
244
+ communicator.setDebug(debug);
245
+ });
234
246
  }
235
247
  // Actions
236
- btZoomIn.addEventListener("click", function(){
248
+ btZoomIn.addEventListener("click", function () {
237
249
  return communicator.ZoomIn();
238
250
  });
239
251
 
240
- btZoomOut.addEventListener("click", function(){
252
+ btZoomOut.addEventListener("click", function () {
241
253
  communicator.ZoomOut();
242
254
  });
243
- if(btZoomToCoordinates){
244
- btZoomToCoordinates.addEventListener("click", function(){
245
- let level = 4;
246
- if(document.getElementById('zoomLevelToCoordinates')){
247
- //zoom Level
248
- level = document.getElementById('zoomLevelToCoordinates').value
249
- }
250
- if(clickedCoordinates){
251
- communicator.zoomToCoordinates(clickedCoordinates[0],clickedCoordinates[1],level);
252
- }else{
253
- Error_container.innerHTML ="No coordinates provided";
254
- }
255
- });
256
- }
257
-
258
- if(btAddPoint){
259
- btAddPoint.addEventListener("click", function(){
260
- communicator.AddGeom('Point');
261
- });
262
- }
263
- if(btAddPolygon){
264
- btAddPolygon.addEventListener("click", function(){
265
- communicator.AddGeom('Polygon');
266
- });
267
- }
268
- if(btAddLine){
269
- btAddLine.addEventListener("click", function(){
270
- communicator.AddGeom('Line');
271
- });
272
- }
273
- if(btGeolocalize){
274
- btGeolocalize.addEventListener("click", function(){
275
- communicator.Geolocalize(true);
276
- });
277
- }
278
- if(btStopGeolocalize){
279
- btStopGeolocalize.addEventListener("click", function(){
280
- communicator.Geolocalize(false);
281
- });
255
+ if (btZoomToCoordinates) {
256
+ btZoomToCoordinates.addEventListener("click", function () {
257
+ let level = 4;
258
+ if (document.getElementById("zoomLevelToCoordinates")) {
259
+ //zoom Level
260
+ level = document.getElementById("zoomLevelToCoordinates").value;
261
+ }
262
+ if (clickedCoordinates) {
263
+ communicator.zoomToCoordinates(
264
+ clickedCoordinates[0],
265
+ clickedCoordinates[1],
266
+ level
267
+ );
268
+ } else {
269
+ Error_container.innerHTML = "No coordinates provided";
270
+ }
271
+ });
272
+ }
273
+
274
+ if (btAddPoint) {
275
+ btAddPoint.addEventListener("click", function () {
276
+ communicator.AddGeom("Point");
277
+ });
278
+ }
279
+ if (btAddPolygon) {
280
+ btAddPolygon.addEventListener("click", function () {
281
+ communicator.AddGeom("Polygon");
282
+ });
283
+ }
284
+ if (btAddLine) {
285
+ btAddLine.addEventListener("click", function () {
286
+ communicator.AddGeom("Line");
287
+ });
288
+ }
289
+ if (btGeolocalize) {
290
+ btGeolocalize.addEventListener("click", function () {
291
+ communicator.Geolocalize(true);
292
+ });
293
+ }
294
+ if (btStopGeolocalize) {
295
+ btStopGeolocalize.addEventListener("click", function () {
296
+ communicator.Geolocalize(false);
297
+ });
282
298
  }
283
299
  //**********************************************************
284
300
  //************** LAYERS ****************
285
301
  //**********************************************************
286
- if(btToggleLayer){
287
- btToggleLayer.addEventListener("click", function(){
288
-
289
- if(overrideLayerProperties){
290
- if(overrideLayerProperties.checked){
291
- var properties = {};
292
- if(toggleTransparentLayer){
293
- properties.transparent = toggleTransparentLayer.checked;
294
-
295
- }
296
- if(toggleSingleTile){
297
- properties.singletile = toggleSingleTile.checked;
298
- }
299
- if(gutter) properties.gutter = gutter.value;
300
- communicator.toggleLayer(document.getElementById('projectlayers').value,properties);
301
- return;
302
- }
303
-
304
- }
305
-
306
- communicator.toggleLayer(document.getElementById('projectlayers').value);
307
- });
308
- }
309
-
310
-
311
- if(btGetActiveLayer){
312
- btGetActiveLayer.addEventListener("click", function(){
313
- cleanContainers();
314
- communicator.getActiveLayer();
315
- });
316
- }
317
- if(btReloadDisplayedLayers){
318
- btReloadDisplayedLayers.addEventListener("click", function(){
319
- communicator.reloadDisplayedLayers();
320
- });
321
- }
322
- if(btLoadWMSLayers){
323
- btLoadWMSLayers.addEventListener("click", function (evt) {
324
- console.log('btLoadWMSLayers')
325
- communicator.loadWMSAvailableLayers();
326
- });
327
- }
302
+ if (btToggleLayer) {
303
+ btToggleLayer.addEventListener("click", function () {
304
+ if (overrideLayerProperties) {
305
+ if (overrideLayerProperties.checked) {
306
+ var properties = {};
307
+ if (toggleTransparentLayer) {
308
+ properties.transparent = toggleTransparentLayer.checked;
309
+ }
310
+ if (toggleSingleTile) {
311
+ properties.singletile = toggleSingleTile.checked;
312
+ }
313
+ if (gutter) properties.gutter = gutter.value;
314
+ communicator.toggleLayer(
315
+ document.getElementById("projectlayers").value,
316
+ properties
317
+ );
318
+ return;
319
+ }
320
+ }
328
321
 
329
- //Override layer properties
330
- if(overrideLayerProperties){
331
- overrideLayerProperties.addEventListener("click", function(){
332
- if(overrideLayerProperties.checked){
333
- if(containerOverride) containerOverride.style.display = 'block';
334
- }else{
335
- if(containerOverride) containerOverride.style.display = 'none';
336
- }
337
- });
322
+ communicator.toggleLayer(document.getElementById("projectlayers").value);
323
+ });
338
324
  }
339
325
 
340
- if(btGetToc){
341
- btGetToc.addEventListener("click", function (evt) {
342
- console.log('btGetToc')
343
- communicator.getToc();
344
- });
326
+ if (btGetActiveLayer) {
327
+ btGetActiveLayer.addEventListener("click", function () {
328
+ cleanContainers();
329
+ communicator.getActiveLayer();
330
+ });
331
+ }
332
+ if (btReloadDisplayedLayers) {
333
+ btReloadDisplayedLayers.addEventListener("click", function () {
334
+ communicator.reloadDisplayedLayers();
335
+ });
336
+ }
337
+ if (btLoadWMSLayers) {
338
+ btLoadWMSLayers.addEventListener("click", function (evt) {
339
+ console.log("btLoadWMSLayers");
340
+ communicator.loadWMSAvailableLayers();
341
+ });
345
342
  }
346
343
 
344
+ //Override layer properties
345
+ if (overrideLayerProperties) {
346
+ overrideLayerProperties.addEventListener("click", function () {
347
+ if (overrideLayerProperties.checked) {
348
+ if (containerOverride) containerOverride.style.display = "block";
349
+ } else {
350
+ if (containerOverride) containerOverride.style.display = "none";
351
+ }
352
+ });
353
+ }
354
+
355
+ if (btGetToc) {
356
+ btGetToc.addEventListener("click", function (evt) {
357
+ console.log("btGetToc");
358
+ communicator.getToc();
359
+ });
360
+ }
361
+ ;
362
+ if(btChangeBackground){
363
+ btChangeBackground.addEventListener("click", function (evt) {
364
+ if(newBackground.value){
365
+ console.log("btChangeBackground",newBackground.value);
366
+ communicator.changeBackground(newBackground.value);
367
+ }else{
368
+ console.warn("no active layer")
369
+ }
370
+ });
371
+ }
347
372
  /*
348
373
  overrideLayerProperties
349
374
  gutter
@@ -354,186 +379,203 @@ containerOverride*/
354
379
  //**********************************************************
355
380
  //************** END LAYERS ****************
356
381
  //**********************************************************
357
- if(btClear){
358
- btClear.addEventListener("click", function(){
359
- cleanContainers();
360
- communicator.clear();
361
- });
362
- }
363
- if(btZoomToExtent){
364
- btZoomToExtent.addEventListener("click", function(){
365
- cleanContainers();
366
- communicator.zoomToExtent();
367
- });
368
- }
369
- if(btWMSInfo){
370
- btWMSInfo.addEventListener("click", function(){
371
- cleanContainers();
372
- communicator.infoFromCoordinates('wms',document.getElementById('layers').value,5,document.getElementById('formatWMS').value);
373
- });
374
- }
375
- if(btGiswaterInfo){
376
- btGiswaterInfo.addEventListener("click", function(){
377
- cleanContainers();
378
- communicator.infoFromCoordinates('giswater',document.getElementById('layers').value);
379
- });
380
- }
381
- if(btActiveLayer){
382
- btActiveLayer.addEventListener("click", function(){
383
- cleanContainers();
384
- communicator.setActiveLayer(document.getElementById('layers').value);
385
- currentActiveLayer = document.getElementById('layers').value;
386
- document.getElementById('currentActiveLayer').innerHTML = `<b>Active layer</b>: ${currentActiveLayer}`;
387
- if(btAddGeoJSONFromGiswater){
388
- btAddGeoJSONFromGiswater.disabled = false;
389
- }
390
- document.getElementById('currentActiveLayerForGeoJSON').innerHTML = ` ${currentActiveLayer}`;
391
- });
392
- }
393
-
394
- if(btHighlight){
395
- btHighlight.addEventListener("click", function(){
396
- cleanContainers();
397
- var options = {
398
- geom: document.getElementById('geom').value
399
- }
400
- if(zoomToHighlightCheck.checked){
401
- options.zoom = {
402
- type: 'geom'
403
- };
404
- }else{
405
- options.zoom = {
406
- type: 'level',
407
- zoomLevel : document.getElementById('zoomLevel').value
408
- }
409
- }
410
- communicator.Highlight(options);
411
-
412
- });
413
- }
414
- if(zoomToHighlightCheck){
415
- //disable/enable zoom level to highlight
416
- zoomToHighlightCheck.addEventListener("click", function(){
417
- document.getElementById('zoomLevel').disabled = zoomToHighlightCheck.checked;
418
- });
382
+ if (btClear) {
383
+ btClear.addEventListener("click", function () {
384
+ cleanContainers();
385
+ communicator.clear();
386
+ });
387
+ }
388
+ if (btZoomToExtent) {
389
+ btZoomToExtent.addEventListener("click", function () {
390
+ cleanContainers();
391
+ communicator.zoomToExtent();
392
+ });
393
+ }
394
+ if (btWMSInfo) {
395
+ btWMSInfo.addEventListener("click", function () {
396
+ cleanContainers();
397
+ communicator.infoFromCoordinates(
398
+ "wms",
399
+ document.getElementById("layers").value,
400
+ 5,
401
+ document.getElementById("formatWMS").value
402
+ );
403
+ });
404
+ }
405
+ if (btGiswaterInfo) {
406
+ btGiswaterInfo.addEventListener("click", function () {
407
+ cleanContainers();
408
+ communicator.infoFromCoordinates(
409
+ "giswater",
410
+ document.getElementById("layers").value
411
+ );
412
+ });
413
+ }
414
+ if (btActiveLayer) {
415
+ btActiveLayer.addEventListener("click", function () {
416
+ cleanContainers();
417
+ communicator.setActiveLayer(document.getElementById("layers").value);
418
+ currentActiveLayer = document.getElementById("layers").value;
419
+ document.getElementById(
420
+ "currentActiveLayer"
421
+ ).innerHTML = `<b>Active layer</b>: ${currentActiveLayer}`;
422
+ if (btAddGeoJSONFromGiswater) {
423
+ btAddGeoJSONFromGiswater.disabled = false;
424
+ }
425
+ document.getElementById(
426
+ "currentActiveLayerForGeoJSON"
427
+ ).innerHTML = ` ${currentActiveLayer}`;
428
+ });
429
+ }
430
+
431
+ if (btHighlight) {
432
+ btHighlight.addEventListener("click", function () {
433
+ cleanContainers();
434
+ var options = {
435
+ geom: document.getElementById("geom").value,
436
+ };
437
+ if (zoomToHighlightCheck.checked) {
438
+ options.zoom = {
439
+ type: "geom",
440
+ };
441
+ } else {
442
+ options.zoom = {
443
+ type: "level",
444
+ zoomLevel: document.getElementById("zoomLevel").value,
445
+ };
446
+ }
447
+ communicator.Highlight(options);
448
+ });
449
+ }
450
+ if (zoomToHighlightCheck) {
451
+ //disable/enable zoom level to highlight
452
+ zoomToHighlightCheck.addEventListener("click", function () {
453
+ document.getElementById("zoomLevel").disabled =
454
+ zoomToHighlightCheck.checked;
455
+ });
419
456
  }
420
457
  //Giswater tiled background
421
- if(btToggleGiswaterTiled && toggleGiswaterTiledCheck){
422
- btToggleGiswaterTiled.addEventListener("click", function(){
423
- cleanContainers();
424
- communicator.toggleGiswaterTiled(toggleGiswaterTiledCheck.checked);
425
- });
458
+ if (btToggleGiswaterTiled && toggleGiswaterTiledCheck) {
459
+ btToggleGiswaterTiled.addEventListener("click", function () {
460
+ cleanContainers();
461
+ communicator.toggleGiswaterTiled(toggleGiswaterTiledCheck.checked);
462
+ });
426
463
  }
427
464
 
428
465
  //**********************************************************
429
466
  //************** GeoJSON ****************
430
467
  //**********************************************************
431
468
 
432
- if(geoJSONFileContent){
433
- geoJSONFileContent.addEventListener("change", handleFiles, false);
434
- function handleFiles() {
435
- const fileList = this.files;
436
- // use the 1st file from the list
437
- f = fileList[0];
438
- geoJSONName = f.name;
439
- var reader = new FileReader();
440
- // Closure to capture the file information.
441
- reader.onload = (function(theFile) {
442
- return function(e) {
443
- geoJSONContent = e.target.result;
444
- };
445
- })(f);
446
-
447
- // Read in the image file as a data URL.
448
- reader.readAsText(f);
449
-
450
- }
451
- }
452
- if(btAddGeoJSON){
453
- btAddGeoJSON.addEventListener("click", function(){
454
- var geoToSend = null;
455
- var geojsondata = document.querySelector("#geojsondata");
456
- if(geojsondata){
457
- console.log("using geoJSON input");
458
- var cleanjson = geojsondata.value.replace(/(\r\n|\n|\r)/gm, "");
459
- geoToSend = cleanjson;
460
- }
461
- if(geoJSONContent){
462
- console.log("using geoJSON file");
463
- geoToSend = geoJSONContent;
464
-
465
- }
466
- var fillcolor = document.querySelector("#fillcolor");
467
- var strokecolor = document.querySelector("#strokecolor");
468
-
469
- //Check JSON
470
- try{
471
- let options = {
472
- fillcolor: null,
473
- strokecolor: null
474
- }
475
- if(fillcolor){
476
- options.fillcolor = fillcolor.value;
477
- }
478
- if(strokecolor){
479
- options.strokecolor = strokecolor.value;
480
- }
481
- communicator.addGeoJSON(JSON.parse(geoToSend),options,geoJSONName);
482
- }catch(e){
483
- console.error("invalid geoJSON",e);
484
- }
485
- });
486
- }
487
-
488
- if(btClearGeoJSON){
489
- btClearGeoJSON.addEventListener("click", function(){
490
- communicator.clearGeoJSON();
491
- });
492
- }
493
-
494
- if(btGeoJSONInfo){
495
- btGeoJSONInfo.addEventListener("click", function(){
496
- cleanContainers();
497
- let tolerance = 10;
498
- if(hitTolerance){
499
- //(typeof hitTolerance!='undefined') ? hitTolerance : 5,
500
- tolerance = (hitTolerance.value=='' || hitTolerance.value==null) ? 5 : parseInt(hitTolerance.value);
501
-
502
- }
503
- communicator.infoFromCoordinates('geojson',document.getElementById('geojsonlayers').value,tolerance);
504
- });
505
- }
506
-
507
- if(btRemoveGeoJSONLayer){
508
- btRemoveGeoJSONLayer.addEventListener("click", function(){
509
- cleanContainers();
510
- communicator.removeGeoJSONLayer(document.getElementById('geojsonlayers').value);
511
- });
512
- }
513
-
514
-
515
- function fillGeoJSONLayersSelect(options){
516
- var layers_select = document.getElementById("geojsonlayers");
517
- if(layers_select){
518
- //empty previous options
519
- var length = layers_select.options.length;
520
- for (i = length-1; i >= 0; i--) {
521
- layers_select.options[i] = null;
522
- }
523
- for(var i = 0; i < options.length; i++) {
524
- var opt = options[i];
525
- var el = document.createElement("option");
526
- el.textContent = opt;
527
- el.value = opt;
528
- layers_select.appendChild(el);
529
- }
530
- }
531
- if(btGeoJSONInfo && options.length>0){
532
- btGeoJSONInfo.disabled = false;
533
- }
534
- if(btRemoveGeoJSONLayer && options.length>0){
535
- btRemoveGeoJSONLayer.disabled = false;
536
- }
469
+ if (geoJSONFileContent) {
470
+ geoJSONFileContent.addEventListener("change", handleFiles, false);
471
+ function handleFiles() {
472
+ const fileList = this.files;
473
+ // use the 1st file from the list
474
+ f = fileList[0];
475
+ geoJSONName = f.name;
476
+ var reader = new FileReader();
477
+ // Closure to capture the file information.
478
+ reader.onload = (function (theFile) {
479
+ return function (e) {
480
+ geoJSONContent = e.target.result;
481
+ };
482
+ })(f);
483
+
484
+ // Read in the image file as a data URL.
485
+ reader.readAsText(f);
486
+ }
487
+ }
488
+ if (btAddGeoJSON) {
489
+ btAddGeoJSON.addEventListener("click", function () {
490
+ var geoToSend = null;
491
+ var geojsondata = document.querySelector("#geojsondata");
492
+ if (geojsondata) {
493
+ console.log("using geoJSON input");
494
+ var cleanjson = geojsondata.value.replace(/(\r\n|\n|\r)/gm, "");
495
+ geoToSend = cleanjson;
496
+ }
497
+ if (geoJSONContent) {
498
+ console.log("using geoJSON file");
499
+ geoToSend = geoJSONContent;
500
+ }
501
+ var fillcolor = document.querySelector("#fillcolor");
502
+ var strokecolor = document.querySelector("#strokecolor");
503
+
504
+ //Check JSON
505
+ try {
506
+ let options = {
507
+ fillcolor: null,
508
+ strokecolor: null,
509
+ };
510
+ if (fillcolor) {
511
+ options.fillcolor = fillcolor.value;
512
+ }
513
+ if (strokecolor) {
514
+ options.strokecolor = strokecolor.value;
515
+ }
516
+ communicator.addGeoJSON(JSON.parse(geoToSend), options, geoJSONName);
517
+ } catch (e) {
518
+ console.error("invalid geoJSON", e);
519
+ }
520
+ });
521
+ }
522
+
523
+ if (btClearGeoJSON) {
524
+ btClearGeoJSON.addEventListener("click", function () {
525
+ communicator.clearGeoJSON();
526
+ });
527
+ }
528
+
529
+ if (btGeoJSONInfo) {
530
+ btGeoJSONInfo.addEventListener("click", function () {
531
+ cleanContainers();
532
+ let tolerance = 10;
533
+ if (hitTolerance) {
534
+ //(typeof hitTolerance!='undefined') ? hitTolerance : 5,
535
+ tolerance =
536
+ hitTolerance.value == "" || hitTolerance.value == null
537
+ ? 5
538
+ : parseInt(hitTolerance.value);
539
+ }
540
+ communicator.infoFromCoordinates(
541
+ "geojson",
542
+ document.getElementById("geojsonlayers").value,
543
+ tolerance
544
+ );
545
+ });
546
+ }
547
+
548
+ if (btRemoveGeoJSONLayer) {
549
+ btRemoveGeoJSONLayer.addEventListener("click", function () {
550
+ cleanContainers();
551
+ communicator.removeGeoJSONLayer(
552
+ document.getElementById("geojsonlayers").value
553
+ );
554
+ });
555
+ }
556
+
557
+ function fillGeoJSONLayersSelect(options) {
558
+ var layers_select = document.getElementById("geojsonlayers");
559
+ if (layers_select) {
560
+ //empty previous options
561
+ var length = layers_select.options.length;
562
+ for (i = length - 1; i >= 0; i--) {
563
+ layers_select.options[i] = null;
564
+ }
565
+ for (var i = 0; i < options.length; i++) {
566
+ var opt = options[i];
567
+ var el = document.createElement("option");
568
+ el.textContent = opt;
569
+ el.value = opt;
570
+ layers_select.appendChild(el);
571
+ }
572
+ }
573
+ if (btGeoJSONInfo && options.length > 0) {
574
+ btGeoJSONInfo.disabled = false;
575
+ }
576
+ if (btRemoveGeoJSONLayer && options.length > 0) {
577
+ btRemoveGeoJSONLayer.disabled = false;
578
+ }
537
579
  }
538
580
 
539
581
  //**********************************************************
@@ -544,24 +586,22 @@ function fillGeoJSONLayersSelect(options){
544
586
  //************** GISWATER FILTERS ****************
545
587
  //**********************************************************
546
588
 
589
+ if (btsetGiswaterFilters) {
590
+ btsetGiswaterFilters.addEventListener("click", function () {
591
+ var filters = document.getElementById("giswaterFilters").value;
547
592
 
548
- if(btsetGiswaterFilters){
549
- btsetGiswaterFilters.addEventListener("click", function(){
550
- var filters = document.getElementById('giswaterFilters').value;
551
-
552
- cleanContainers();
553
- communicator.setGiswaterFilters(filters);
554
- });
593
+ cleanContainers();
594
+ communicator.setGiswaterFilters(filters);
595
+ });
555
596
  }
556
- if(btgetGiswaterFilters){
557
- btgetGiswaterFilters.addEventListener("click", function(){
558
- var layerName = document.getElementById('layers').value;
559
- cleanContainers();
560
- communicator.getGiswaterLayerAvailableFilters(layerName);
561
- });
597
+ if (btgetGiswaterFilters) {
598
+ btgetGiswaterFilters.addEventListener("click", function () {
599
+ var layerName = document.getElementById("layers").value;
600
+ cleanContainers();
601
+ communicator.getGiswaterLayerAvailableFilters(layerName);
602
+ });
562
603
  }
563
604
 
564
-
565
605
  //**********************************************************
566
606
  //************** END GISWATER FILTERS ****************
567
607
  //**********************************************************
@@ -570,33 +610,32 @@ if(btgetGiswaterFilters){
570
610
  //************** CUSTOM COLORS ****************
571
611
  //**********************************************************
572
612
 
573
- if(btSetColors){
574
-
575
- btSetColors.addEventListener("click", function(){
576
- var properties = {
577
- geom_stroke_color: 'rgb(19, 39, 99,0.5)',
578
- geom_fill_color: 'rgb(19, 39, 99,0.5)',
579
- geom_stroke_width: 1,
580
- geom_shape: 'circle',
581
- geom_radius: 4,
582
- }
583
- if(geom_stroke_color){
584
- properties.geom_stroke_color = geom_stroke_color.value;
585
- }
586
- if(geom_stroke_width){
587
- properties.geom_stroke_width = geom_stroke_width.value;
588
- }
589
- if(geom_fill_color){
590
- properties.geom_fill_color = geom_fill_color.value;
591
- }
592
- if(geom_shape){
593
- properties.geom_shape = geom_shape.value;
594
- }
595
- if(geom_radius){
596
- properties.geom_radius = geom_radius.value;
597
- }
598
- communicator.setCustomColors(properties);
599
- });
613
+ if (btSetColors) {
614
+ btSetColors.addEventListener("click", function () {
615
+ var properties = {
616
+ geom_stroke_color: "rgb(19, 39, 99,0.5)",
617
+ geom_fill_color: "rgb(19, 39, 99,0.5)",
618
+ geom_stroke_width: 1,
619
+ geom_shape: "circle",
620
+ geom_radius: 4,
621
+ };
622
+ if (geom_stroke_color) {
623
+ properties.geom_stroke_color = geom_stroke_color.value;
624
+ }
625
+ if (geom_stroke_width) {
626
+ properties.geom_stroke_width = geom_stroke_width.value;
627
+ }
628
+ if (geom_fill_color) {
629
+ properties.geom_fill_color = geom_fill_color.value;
630
+ }
631
+ if (geom_shape) {
632
+ properties.geom_shape = geom_shape.value;
633
+ }
634
+ if (geom_radius) {
635
+ properties.geom_radius = geom_radius.value;
636
+ }
637
+ communicator.setCustomColors(properties);
638
+ });
600
639
  }
601
640
 
602
641
  //**********************************************************
@@ -606,17 +645,21 @@ if(btSetColors){
606
645
  //**********************************************************
607
646
  //************** WMS TABLE ****************
608
647
  //**********************************************************
609
- if(btGetElementsFromLayer){
610
-
611
- btGetElementsFromLayer.addEventListener("click", function(){
612
- let limit = document.getElementById('limit') ? document.getElementById('limit').value : 100;
613
- let format = document.getElementById('format') ? document.getElementById('format').value : 'xml';
614
- communicator.getElementsFromLayer(document.getElementById('layers').value,limit,format);
615
- });
648
+ if (btGetElementsFromLayer) {
649
+ btGetElementsFromLayer.addEventListener("click", function () {
650
+ let limit = document.getElementById("limit")
651
+ ? document.getElementById("limit").value
652
+ : 100;
653
+ let format = document.getElementById("format")
654
+ ? document.getElementById("format").value
655
+ : "xml";
656
+ communicator.getElementsFromLayer(
657
+ document.getElementById("layers").value,
658
+ limit,
659
+ format
660
+ );
661
+ });
616
662
  }
617
663
  //**********************************************************
618
664
  //************** END WMS TABLE ****************
619
665
  //**********************************************************
620
-
621
-
622
-