Skip to content

Commit

Permalink
Add a button for setting the zoom level and another one to setting bo…
Browse files Browse the repository at this point in the history
…th the center position and the zoom level
  • Loading branch information
aarranz committed Mar 25, 2021
1 parent 161e9da commit dfa91e1
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 9 deletions.
11 changes: 9 additions & 2 deletions src/doc/changelog.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
6 changes: 5 additions & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
22 changes: 21 additions & 1 deletion src/js/ol3-map-widget.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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);
Expand Down
46 changes: 41 additions & 5 deletions tests/js/OpenlayersWidgetSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)');
Expand Down Expand Up @@ -73,6 +74,7 @@
clearDocument();
document.body.innerHTML += HTML_FIXTURE;
MashupPlatform.reset();
MashupPlatform.prefs.set.calls.reset();
widget = new Widget();
});

Expand Down Expand Up @@ -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", () => {
Expand All @@ -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');
Expand All @@ -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", () => {
Expand Down

0 comments on commit dfa91e1

Please sign in to comment.