Add ZoomToMaxExtentButton component #190

chrismayer · 2015-10-01T13:58:42Z

As described and discussed in #102 this PR adds a ZoomToMaxExtentButton component.

mbarto · 2015-10-01T14:06:11Z

Please, check Travis build: it's failing with this error:

web/client/examples/viewer/plugins/index.jsx
90:12 error Line X: Adjacent JSX elements must be wrapped in an enclosing tag

mbarto · 2015-10-01T14:13:02Z

From an initial look at the code, it cannot work. Did you test that it is working in either leaflet or openlayers viewer?

chrismayer · 2015-10-01T14:22:20Z

Did you test that it is working in either leaflet or openlayers viewer?

Sure I did. All looked fine to me. What is wrong with the code?

mbarto · 2015-10-01T14:28:21Z

I will checkout the code and do a direct test. I will let you know.

mbarto · 2015-10-01T14:31:26Z

web/client/components/buttons/ZoomToMaxExtentButton.jsx

+
+// In addition to the state, 'connect' puts 'dispatch' in our props.
+// connect Redux store slice with map configuration
+module.exports = connect((state) => {


It would be preferrable to bind properties in the plugins index.js as we do for other plugins, instead of connecting directly to the store

mbarto · 2015-10-01T15:14:55Z

I think it works only when maxExtent is not defined.
When there is a maxExtent you invoke the action with maxExtent and a -1 zoom, but if you look at both OpenLayers and Leaflet Map.jsx components, you will see that:

bbox is not used to change current map zoom / center
only center and zoom are used for that purpose and -1 is not a valid zoom value

This implements a class skeleton for a button, which should be used to zoom a map to its max. extent. This is only a skeleton to integrate the UI (button) without any functionality.

This adds the ZoomToMaxExtentButton to the examples viewer instances.

In case of clicking the ZoomToMaxExtent button the map zooms to the max. extent which is defined in the map's config object. If no max. extent is defined the map will be zoomed to zoom level '1'.

- Bind properties in the plugins index.js as we do for other plugins - Call action as a property without directly calling dispatch

chrismayer · 2015-10-02T09:30:58Z

Okay I'll bind the actions the other way you described.

What would be your favourite strategy to zoom the map by center, since

bbox is not used to change current map zoom / center

only center and zoom are used for that purpose and -1 is not a valid zoom value

Would extending _updateMapPositionFromNewProps in the Map.jsx files (OpenLayers and Leaflet) be an option so they check if only the extent object bbox has been changed and zoom to it?

mbarto · 2015-10-02T09:39:58Z

Hi, Christian.
The most important thing is that the application state MUST be consistent. So:

in the reducer you need to set all the properties (zoom, center, bbox) to represent the same map; since you have a bbox, you need to calculate the related center and zoom, and set all the 3 properties on the new state
then you don't need to change _updateMapPositionFromNewProps

Consider that my desire is to remove the bbox from the state and make it a calculated property of center and zoom, so those 2 are the important properties for map navigation.

This ensures max. extent is set by corresponding center and zoom values which are calculated by the 'maxExtent' property of the map's config.

chrismayer · 2015-10-02T13:35:26Z

Hi @mbarto,
I tried to address your desire. So now the max. extent will be set by center and zoom, which are calculated from maxExtent.

mbarto · 2015-10-02T14:07:02Z

Looks good. I will try to test it on monday, and then merge it. Thank you.

mbarto · 2015-10-05T08:36:29Z

Hi Christian, I did a couple of minor adjustements and merged your work. Thank you.

…-2023" (geosolutions-it#190) * Update revision to latest master 7-12-2023 * geosolutions-it#189: update version in version.txt and package.json * geosolutions-it#189: enable details panel in dashboard by editing the localConfig.json file * geosolutions-it#189: resolve review comments: Description: - Remove all font-awesome style sheet in html files - Update localConfig based on migration guide to 2024.01.00 * geosolutions-it#189: add npmrc file to project * Update version.txt --------- Co-authored-by: Tobia Di Pisa <tobia.dipisa@geosolutionsgroup.com>

simboss added the ready label Oct 1, 2015

mbarto reviewed Oct 1, 2015
View reviewed changes

chrismayer added 6 commits October 2, 2015 10:34

Add a component skeleton 'ZoomToMaxExtentButton'

e5efd9c

This implements a class skeleton for a button, which should be used to zoom a map to its max. extent. This is only a skeleton to integrate the UI (button) without any functionality.

Add ZoomToMaxExtentButton to viewer

9fc0090

This adds the ZoomToMaxExtentButton to the examples viewer instances.

Implement 'ZoomToMaxExtent' button click logic

f5e3a0b

In case of clicking the ZoomToMaxExtent button the map zooms to the max. extent which is defined in the map's config object. If no max. extent is defined the map will be zoomed to zoom level '1'.

Add basic tests for ZoomToMaxExtentButton

c02cecd

Fix broken UI integration

16a8b2c

Adapt action binding for ZoomToMaxExtentButton

13c2ef2

- Bind properties in the plugins index.js as we do for other plugins - Call action as a property without directly calling dispatch

chrismayer added 3 commits October 2, 2015 14:04

Add util function to detect zoom level from extent

1c7f674

Add util function to detect center from extent

5eefb7b

Adapt 'ZoomToMaxExtent' logic w/ zoom and center

9c3e81e

This ensures max. extent is set by corresponding center and zoom values which are calculated by the 'maxExtent' property of the map's config.

chrismayer force-pushed the zoom-all-102 branch from 61064b8 to 9c3e81e Compare October 2, 2015 13:28

mbarto merged commit 9c3e81e into geosolutions-it:master Oct 5, 2015

mbarto removed the ready label Oct 5, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ZoomToMaxExtentButton component #190

Add ZoomToMaxExtentButton component #190

chrismayer commented Oct 1, 2015

mbarto commented Oct 1, 2015

mbarto commented Oct 1, 2015

chrismayer commented Oct 1, 2015

mbarto commented Oct 1, 2015

mbarto Oct 1, 2015

mbarto commented Oct 1, 2015

chrismayer commented Oct 2, 2015

mbarto commented Oct 2, 2015

chrismayer commented Oct 2, 2015

mbarto commented Oct 2, 2015

mbarto commented Oct 5, 2015

Add ZoomToMaxExtentButton component #190

Add ZoomToMaxExtentButton component #190

Conversation

chrismayer commented Oct 1, 2015

mbarto commented Oct 1, 2015

mbarto commented Oct 1, 2015

chrismayer commented Oct 1, 2015

mbarto commented Oct 1, 2015

mbarto Oct 1, 2015

Choose a reason for hiding this comment

mbarto commented Oct 1, 2015

chrismayer commented Oct 2, 2015

mbarto commented Oct 2, 2015

chrismayer commented Oct 2, 2015

mbarto commented Oct 2, 2015

mbarto commented Oct 5, 2015