Merge pull request #39 from aarranz/feature/add-a-setinitialcenter-button

aarranz · web-flow · commit f78a44d75b9c · 2021-03-23T13:25:09.000+01:00
Add a button for setting the initial map location
diff --git a/src/config.xml b/src/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='UTF-8'?>
-<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="ol3-map" version="1.2.2b1">
+<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="ol3-map" version="1.2.2b2">
     <details>
         <title>OpenLayers Map</title>
         <email>wirecloud@conwet.com</email>
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -5,8 +5,12 @@ body, html, .map {
     margin: 0px;
 }
 
-#button {
+#buttons {
     position: absolute;
     top: 5px;
     right: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
diff --git a/src/doc/changelog.md b/src/doc/changelog.md
@@ -2,6 +2,8 @@
 
 - Use PoI id for the selection popup menu if the PoI does not provide a title
     attribute.
+- Added a button to set the Initial Location setting using the center of the
+    current displayed area.
 
 
 ## v1.2.1 (2020-03-07)
diff --git a/src/doc/userguide.md b/src/doc/userguide.md
@@ -6,7 +6,7 @@ Map viewer widget using OpenLayers. It can receive Layers or Point of Interest d
 ## Settings
 
 
-- **Initial Location**: Decimal coordinates where map will be centered on load (e.g. `52, 5`). Leave this setting empty if you don't want to center the map at init. Remember to change the initial zoom level if you provide an initial location.
+- **Initial Location**: Decimal coordinates where map will be centered on load (e.g. `52, 5`). Leave this setting empty if you don't want to center the map at init. Remember to change the initial zoom level if you provide an initial location. This setting can be configured using the <i class="fas fa-crosshairs"></i> button that is displayed inside the widget when in editing mode.
 - **Initial Zoom Level**: Initial zoom level. From 1 to 22, where '1' represents the furthest level and '22' the maximum zoom level.
 - **Min Zoom**: Minimal zoom level.
 - **Layers Widget**: Widget to use for allowing user to switch between layers.
diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,10 @@
     </head>
     <body>
         <div id="map" class="map"></div>
-        <div id="button" class="se-btn hidden"><span>Layers</span></div>
+        <div id="buttons">
+            <div id="button" class="se-btn fade fas fa-layer-group"></div>
+            <div id="setcenter-button" class="se-btn hidden fas fa-crosshairs"></div>
+        </div>
     </body>
     <script type="text/javascript" src="js/ol3-map-widget.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
diff --git a/src/js/ol3-map-widget.js b/src/js/ol3-map-widget.js
@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2017 CoNWeT Lab., Universidad Politecnica de Madrid
- * Copyright (c) 2017-2019 Future Internet Consulting and Development Solutions S.L.
+ * Copyright (c) 2017-2021 Future Internet Consulting and Development Solutions S.L.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -261,11 +261,33 @@
         });
         let layers_widget_ref = MashupPlatform.prefs.get('layerswidget').trim();
         if (layers_widget_ref === "") {
-            layers_button.classList.add('hidden');
+            layers_button.classList.remove('in');
         } else {
-            layers_button.classList.remove('hidden');
+            layers_button.classList.add('in');
         }
 
+        // Set position button
+        const setcenter_button = document.getElementById("setcenter-button");
+        setcenter_button.addEventListener('click', (event) => {
+            const currentCenter = this.map.getView().getCenter();
+            const newValue = ol.proj.transform(currentCenter, 'EPSG:3857', 'EPSG:4326');
+            MashupPlatform.prefs.set(
+                "initialCenter",
+                newValue.join(", ")
+            );
+        });
+        const update_ui_buttons = (changes) => {
+            // Use strict equality as changes can not contains changes on the
+            // editing parameter
+            if (changes.editing === true) {
+                setcenter_button.classList.remove("hidden");
+            } else if (changes.editing === false) {
+                setcenter_button.classList.add("hidden");
+            }
+        };
+        MashupPlatform.mashup.context.registerCallback(update_ui_buttons);
+        update_ui_buttons({editing: MashupPlatform.mashup.context.get("editing")});
+
         DEFAULT_MARKER = build_basic_style.call(this);
         this.base_layer = CORE_LAYERS.OSM;
         var initialCenter = MashupPlatform.prefs.get("initialCenter").split(",").map(Number);
diff --git a/tests/js/OpenlayersWidgetSpec.js b/tests/js/OpenlayersWidgetSpec.js
@@ -1,6 +1,6 @@
 /*
  *   Copyright (c) 2017 CoNWeT Lab., Universidad Politecnica de Madrid
- *   Copyright (c) 2017-2019 Future Internet Consulting and Development Solutions S.L.
+ *   Copyright (c) 2017-2021 Future Internet Consulting and Development Solutions S.L.
  */
 
 /* global MashupPlatform, MockMP, ol, Widget */
@@ -10,7 +10,7 @@
     "use strict";
 
     const HTML_FIXTURE = '<div id="map" class="map"></div>\n' +
-        '<div id="button" class="se-btn"><span>Capas</span></div>';
+        '<div id="button" class="se-btn fade"></div><div id="setcenter-button" class="se-btn"></div>';
 
     const clearDocument = function clearDocument() {
         var elements = document.querySelectorAll('body > *:not(.jasmine_html-reporter)');
@@ -147,7 +147,7 @@
                     widget.init();
 
                     let layers_button = document.getElementById('button');
-                    expect(layers_button.className).toBe('se-btn hidden');
+                    expect(layers_button.className).toBe('se-btn fade');
                 });
 
                 it("widget ref", () => {
@@ -156,7 +156,7 @@
                     widget.init();
 
                     let layers_button = document.getElementById('button');
-                    expect(layers_button.className).toBe('se-btn');
+                    expect(layers_button.className).toBe('se-btn fade in');
                 });
 
                 it("widget ref (click)", () => {
@@ -219,6 +219,48 @@
 
             });
 
+            describe("setcenter button", () => {
+
+                it("hidden if not started editing", () => {
+                    MashupPlatform.mashup.context.setContext({editing: false});
+
+                    widget.init();
+
+                    const setcenter_button = document.getElementById('setcenter-button');
+                    expect(setcenter_button.className).toBe('se-btn hidden');
+                });
+
+                it("visible if started editing", () => {
+                    MashupPlatform.mashup.context.setContext({editing: true});
+
+                    widget.init();
+
+                    const setcenter_button = document.getElementById('setcenter-button');
+                    expect(setcenter_button.className).toBe('se-btn');
+                });
+
+                it("should update dynamically", () => {
+                    MashupPlatform.mashup.context.setContext({editing: false});
+                    widget.init();
+
+                    MashupPlatform.mashup.context.registerCallback.calls.argsFor(0)[0]({editing: true});
+
+                    const setcenter_button = document.getElementById('setcenter-button');
+                    expect(setcenter_button.className).toBe('se-btn');
+                });
+
+                it("should setup current center as the default value for the initialCenter setting", () => {
+                    MashupPlatform.mashup.context.setContext({editing: true});
+                    widget.init();
+                    const setcenter_button = document.getElementById('setcenter-button');
+
+                    setcenter_button.click();
+
+                    expect(MashupPlatform.prefs.set).toHaveBeenCalledWith("initialCenter", jasmine.any(String));
+                });
+
+            });
+
             describe("useclustering", () => {
 
                 it("should switch to use a cluster source for the main vector layer", () => {

Original file line number	Diff line number	Diff line change
`@@ -5,8 +5,12 @@ body, html, .map {`
`5`	`5`	`margin: 0px;`
`6`	`6`	`}`
`7`	`7`
`8`		`-#button {`
	`8`	`+#buttons {`
`9`	`9`	`position: absolute;`
`10`	`10`	`top: 5px;`
`11`	`11`	`right: 5px;`
	`12`	`+ display: flex;`
	`13`	`+ flex-direction: column;`
	`14`	`+ justify-content: center;`
	`15`	`+ align-items: center;`
`12`	`16`	`}`