Add a zoom out button

src/Button/ZoomOutButton/ZoomOutButton.example.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import OlMap from 'ol/map';
+import OlView from 'ol/view';
+import OlLayerTile from 'ol/layer/tile';
+import OlSourceOsm from 'ol/source/osm';
+import olProj from 'ol/proj';
+
+import {
+  ZoomOutButton
+} from '../../index.js';
+
+//
+// ***************************** SETUP *****************************************
+//
+const map = new OlMap({
+  layers: [
+    new OlLayerTile({
+      name: 'OSM',
+      source: new OlSourceOsm()
+    })
+  ],
+  view: new OlView({
+    center: olProj.fromLonLat([37.40570, 8.81566]),
+    zoom: 19
+  })
+});
+
+//
+// ***************************** SETUP END *************************************
+//
+
+render(
+  <div>
+    <div id="map" style={{
+      height: '400px'
+    }} />
+
+    <div className="example-block">
+      <span>Zoom out button:</span>
+      <ZoomOutButton map={map}>
+         Zoom out (-)
+      </ZoomOutButton>
+    </div>
+
+  </div>,
+
+  // Target
+  document.getElementById('exampleContainer'),
+
+  // Callback
+  () => {
+    map.setTarget('map');
+  }
+);

src/Button/ZoomOutButton/ZoomOutButton.example.md

@@ -0,0 +1,8 @@
+---
+layout: basic.hbs
+title: ZoomOutButton example
+description: This is an example using `ZoomOutButton`
+collection: Examples
+---
+
+This example demonstrates the use of the `ZoomOutButton`.

src/Button/ZoomOutButton/ZoomOutButton.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import OlMap from 'ol/map';
+
+import  {
+  SimpleButton
+} from '../../index';
+
+/**
+ * Class representing a zoom out button.
+ *
+ * @class The ZoomOutButton
+ * @extends React.Component
+ */
+class ZoomOutButton extends React.Component {
+
+  /**
+   * The className added to this component.
+   * @type {String}
+   * @private
+   */
+  className = 'react-geo-zoomoutbutton'
+
+  static propTypes = {
+    /**
+     * The className which should be added.
+     * @type {String}
+     */
+    className: PropTypes.string,
+
+    /**
+     * Instance of OL map this component is bound to.
+     *
+     * @type {OlMap}
+     */
+    map: PropTypes.instanceOf(OlMap).isRequired,
+  }
+
+  /**
+   * Called when the button is clicked.
+   *
+   * @method
+   */
+  onClick = () => {
+    const map = this.props.map;
+    const view = map.getView();
+    const currentZoom = view.getZoom();
+
+    view.setZoom(currentZoom - 1);
+  }
+
+  /**
+   * The render function.
+   */
+  render() {
+    const {
+      className,
+      ...passThroughProps
+    } = this.props;
+
+    const finalClassName = className
+      ? `${className} ${this.className}`
+      : this.className;
+
+    return (
+      <SimpleButton
+        className={finalClassName}
+        onClick={this.onClick}
+        {...passThroughProps}
+      />
+    );
+  }
+}
+
+export default ZoomOutButton;

src/Button/ZoomOutButton/ZoomOutButton.spec.jsx

@@ -0,0 +1,36 @@
+/*eslint-env jest*/
+
+import TestUtil from '../../Util/TestUtil';
+
+import { ZoomOutButton } from '../../index';
+
+describe('<ZoomOutButton />', () => {
+
+  let map;
+
+  beforeEach(() => {
+    map = TestUtil.createMap();
+  });
+
+  it('is defined', () => {
+    expect(ZoomOutButton).not.toBeUndefined();
+  });
+
+  it('can be rendered', () => {
+    const wrapper = TestUtil.mountComponent(ZoomOutButton);
+    expect(wrapper).not.toBeUndefined();
+  });
+
+  it('zooms out when clicked', () => {
+    const wrapper = TestUtil.mountComponent(ZoomOutButton, {map});
+
+    const initialZoom = map.getView().getZoom();
+
+    wrapper.instance().onClick();
+
+    const newZoom = map.getView().getZoom();
+
+    expect(newZoom).toBe(initialZoom - 1);
+  });
+
+});

src/index.js

@@ -6,6 +6,7 @@ import ToggleGroup from './Button/ToggleGroup/ToggleGroup.jsx';
 import MeasureButton from './Button/MeasureButton/MeasureButton.jsx';
 import DigitizeButton from './Button/DigitizeButton/DigitizeButton.jsx';
 import ZoomInButton from './Button/ZoomInButton/ZoomInButton.jsx';
+import ZoomOutButton from './Button/ZoomOutButton/ZoomOutButton.jsx';
 import CoordinateReferenceSystemCombo from './Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.jsx';
 import NominatimSearch from './Field/NominatimSearch/NominatimSearch.jsx';
 import ScaleCombo from './Field/ScaleCombo/ScaleCombo.jsx';
@@ -55,6 +56,7 @@ export {
   MeasureButton,
   DigitizeButton,
   ZoomInButton,
+  ZoomOutButton,
   LayerTree,
   LayerTreeNode,
   Legend,

webpack.examples.common.config.js

@@ -12,6 +12,7 @@ const config = {
     'Button/DigitizeButton/DigitizeButton': './src/Button/DigitizeButton/DigitizeButton.example.jsx',
     'Button/UploadButton/UploadButton': './src/Button/UploadButton/UploadButton.example.jsx',
     'Button/ZoomInButton/ZoomInButton': './src/Button/ZoomInButton/ZoomInButton.example.jsx',
+    'Button/ZoomOutButton/ZoomOutButton': './src/Button/ZoomOutButton/ZoomOutButton.example.jsx',
     'CircleMenu/CircleMenu': './src/CircleMenu/CircleMenu.example.jsx',
     'Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo': './src/Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.example.jsx',
     'Field/NominatimSearch/NominatimSearch': './src/Field/NominatimSearch/NominatimSearch.example.jsx',