diff --git a/src/Button/ZoomOutButton/ZoomOutButton.example.jsx b/src/Button/ZoomOutButton/ZoomOutButton.example.jsx new file mode 100644 index 0000000000..eb8cb238be --- /dev/null +++ b/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( +
+
+ +
+ Zoom out button: + + Zoom out (-) + +
+ +
, + + // Target + document.getElementById('exampleContainer'), + + // Callback + () => { + map.setTarget('map'); + } +); diff --git a/src/Button/ZoomOutButton/ZoomOutButton.example.md b/src/Button/ZoomOutButton/ZoomOutButton.example.md new file mode 100644 index 0000000000..a78d537da5 --- /dev/null +++ b/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`. diff --git a/src/Button/ZoomOutButton/ZoomOutButton.jsx b/src/Button/ZoomOutButton/ZoomOutButton.jsx new file mode 100644 index 0000000000..aad55c9322 --- /dev/null +++ b/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 ( + + ); + } +} + +export default ZoomOutButton; diff --git a/src/Button/ZoomOutButton/ZoomOutButton.spec.jsx b/src/Button/ZoomOutButton/ZoomOutButton.spec.jsx new file mode 100644 index 0000000000..cf9e8173fd --- /dev/null +++ b/src/Button/ZoomOutButton/ZoomOutButton.spec.jsx @@ -0,0 +1,36 @@ +/*eslint-env jest*/ + +import TestUtil from '../../Util/TestUtil'; + +import { ZoomOutButton } from '../../index'; + +describe('', () => { + + 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); + }); + +}); diff --git a/src/index.js b/src/index.js index 082d936eeb..e94c3c30b2 100644 --- a/src/index.js +++ b/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, diff --git a/webpack.examples.common.config.js b/webpack.examples.common.config.js index f2143cca45..9bec62b642 100644 --- a/webpack.examples.common.config.js +++ b/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',