Add a button for setting the zoom level and another one to setting bo…

…th the center position and the zoom level

src/doc/changelog.md

@@ -1,14 +1,21 @@
 ## v1.2.3 (2021-03-25)
 
 - Fix some problems rendering the layer/setcenter buttons
+- Added a button for setting the current zoom level as the **Initial Zoom
+    Level** setting. This button is only available when using WireCloud v1.4 in
+    edit mode.
+- Added a button for setting both the **Initial Location** and the **Initial
+    Zoom Level** settings from the current displayed area. This button is only
+    available when using WireCloud v1.4 in edit mode.
 
 
 ## v1.2.2 (2021-03-23)
 
 - 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.
+- Added a button to set the **Initial Location** setting using the center of the
+    current displayed area. This button is only available when using WireCloud
+    v1.4 in edit mode.
 
 
 ## v1.2.1 (2020-03-07)

src/index.html

@@ -11,7 +11,11 @@
         <div id="map" class="map"></div>
         <div id="buttons">
             <div id="button" class="se-btn fade"><i class="fas fa-layer-group"></i></div>
-            <div id="setcenter-button" class="se-btn hidden"><i class="fas fa-crosshairs"></i></div>
+            <div class="btn-group">
+                <div id="setcenter-button" class="se-btn hidden" title="Set initial location"><i class="fa-fw fas fa-crosshairs"></i></div>
+                <div id="setzoom-button" class="se-btn hidden" title="Set initial zoom level"><i class="fa-fw fas fa-ruler"></i></div>
+                <div id="setcenterzoom-button" class="se-btn hidden" title="Set initial location and zoom level"><i class="fa-fw fas fa-expand"></i></div>
+            </div>
         </div>
     </body>
     <script type="text/javascript" src="js/ol3-map-widget.js"></script>

src/js/ol3-map-widget.js

@@ -266,7 +266,7 @@
             layers_button.classList.add('in');
         }
 
-        // Set position button
+        // Edit buttons
         const setcenter_button = document.getElementById("setcenter-button");
         setcenter_button.addEventListener('click', (event) => {
             const currentCenter = this.map.getView().getCenter();
@@ -276,13 +276,33 @@
                 newValue.join(", ")
             );
         });
+        const setzoom_button = document.getElementById("setzoom-button");
+        setzoom_button.addEventListener('click', (event) => {
+            MashupPlatform.prefs.set(
+                "initialZoom",
+                this.map.getView().getZoom()
+            );
+        });
+        const setcenterzoom_button = document.getElementById("setcenterzoom-button");
+        setcenterzoom_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(", "),
+                initialZoom: this.map.getView().getZoom()
+            });
+        });
         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");
+                setzoom_button.classList.remove("hidden");
+                setcenterzoom_button.classList.remove("hidden");
             } else if (changes.editing === false) {
                 setcenter_button.classList.add("hidden");
+                setzoom_button.classList.add("hidden");
+                setcenterzoom_button.classList.add("hidden");
             }
         };
         MashupPlatform.mashup.context.registerCallback(update_ui_buttons);

tests/js/OpenlayersWidgetSpec.js

@@ -10,7 +10,8 @@
     "use strict";
 
     const HTML_FIXTURE = '<div id="map" class="map"></div>\n' +
-        '<div id="button" class="se-btn fade"></div><div id="setcenter-button" class="se-btn"></div>';
+        '<div id="button" class="se-btn fade"></div>\n' +
+        '<div id="setcenter-button" class="se-btn"/><div id="setzoom-button" class="se-btn"/><div id="setcenterzoom-button" class="se-btn"/>';
 
     const clearDocument = function clearDocument() {
         var elements = document.querySelectorAll('body > *:not(.jasmine_html-reporter)');
@@ -73,6 +74,7 @@
             clearDocument();
             document.body.innerHTML += HTML_FIXTURE;
             MashupPlatform.reset();
+            MashupPlatform.prefs.set.calls.reset();
             widget = new Widget();
         });
 
@@ -219,24 +221,32 @@
 
             });
 
-            describe("setcenter button", () => {
+            describe("edit buttons", () => {
 
-                it("hidden if not started editing", () => {
+                it("should be hidden if the widget was started in view mode", () => {
                     MashupPlatform.mashup.context.setContext({editing: false});
 
                     widget.init();
 
                     const setcenter_button = document.getElementById('setcenter-button');
                     expect(setcenter_button.className).toBe('se-btn hidden');
+                    const setzoom_button = document.getElementById('setzoom-button');
+                    expect(setzoom_button.className).toBe('se-btn hidden');
+                    const setcenterzoom_button = document.getElementById('setcenterzoom-button');
+                    expect(setcenterzoom_button.className).toBe('se-btn hidden');
                 });
 
-                it("visible if started editing", () => {
+                it("should be visible if the widget was started in edit mode", () => {
                     MashupPlatform.mashup.context.setContext({editing: true});
 
                     widget.init();
 
                     const setcenter_button = document.getElementById('setcenter-button');
                     expect(setcenter_button.className).toBe('se-btn');
+                    const setzoom_button = document.getElementById('setzoom-button');
+                    expect(setzoom_button.className).toBe('se-btn');
+                    const setcenterzoom_button = document.getElementById('setcenterzoom-button');
+                    expect(setcenterzoom_button.className).toBe('se-btn');
                 });
 
                 it("should update dynamically", () => {
@@ -247,9 +257,13 @@
 
                     const setcenter_button = document.getElementById('setcenter-button');
                     expect(setcenter_button.className).toBe('se-btn');
+                    const setzoom_button = document.getElementById('setzoom-button');
+                    expect(setzoom_button.className).toBe('se-btn');
+                    const setcenterzoom_button = document.getElementById('setcenterzoom-button');
+                    expect(setcenterzoom_button.className).toBe('se-btn');
                 });
 
-                it("should setup current center as the default value for the initialCenter setting", () => {
+                it("should allow to 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');
@@ -259,6 +273,28 @@
                     expect(MashupPlatform.prefs.set).toHaveBeenCalledWith("initialCenter", jasmine.any(String));
                 });
 
+                it("should allow to setup current zoom level as the default value for the initialZoom setting", () => {
+                    MashupPlatform.mashup.context.setContext({editing: true});
+                    widget.init();
+                    const setzoom_button = document.getElementById('setzoom-button');
+
+                    setzoom_button.click();
+
+                    expect(MashupPlatform.prefs.set).toHaveBeenCalledWith("initialZoom", jasmine.any(Number));
+                });
+
+                it("should allow to setup current zoom level and center position as the default initial values", () => {
+                    MashupPlatform.mashup.context.setContext({editing: true});
+                    widget.init();
+                    const setcenterzoom_button = document.getElementById('setcenterzoom-button');
+
+                    setcenterzoom_button.click();
+
+                    expect(MashupPlatform.prefs.set).toHaveBeenCalledWith({
+                        initialCenter: jasmine.any(String),
+                        initialZoom: jasmine.any(Number)
+                    });
+                });
             });
 
             describe("useclustering", () => {