react-spatial 1.5.2 → 1.5.3

package/src/components/LayerTree/index.js

@@ -0,0 +1 @@
+export { default } from './LayerTree';

package/src/components/MousePosition/MousePosition.js

@@ -0,0 +1,175 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import OLMap from 'ol/Map';
+import { createStringXY } from 'ol/coordinate';
+import OLMousePosition from 'ol/control/MousePosition';
+
+const propTypes = {
+  /**
+   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+   */
+  map: PropTypes.instanceOf(OLMap).isRequired,
+
+  /**
+   * List of projections to display.
+   */
+  projections: PropTypes.arrayOf(
+    PropTypes.shape({
+      /**
+       * The label to display in the select box.
+       */
+      label: PropTypes.string.isRequired,
+
+      /**
+       * The value used to create the options´s projection of the MousePosition control.
+       * See [doc](https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition.html).
+       */
+      value: PropTypes.string.isRequired,
+
+      /**
+       * A function following the  [CoordinateFormat](https://openlayers.org/en/latest/apidoc/module-ol_coordinate.html#~CoordinateFormat).
+       */
+      format: PropTypes.func,
+    }),
+  ),
+
+  /**
+   * The initially selected projection
+   */
+  projectionValue: PropTypes.shape({
+    /**
+     * The label to display in the select box.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * The value used to create the options´s projection of the MousePosition control.
+     * See [doc](https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition.html).
+     */
+    value: PropTypes.string.isRequired,
+
+    /**
+     * A function following the  [CoordinateFormat](https://openlayers.org/en/latest/apidoc/module-ol_coordinate.html#~CoordinateFormat).
+     */
+    format: PropTypes.func,
+  }),
+
+  /**
+   * Function triggered on projection's change event.
+   * @param {Event} event The change event object.
+   * @param {Object} projection The selected projection object.
+   */
+  onChange: PropTypes.func,
+};
+
+const defaultProps = {
+  onChange: () => {},
+  projections: [
+    {
+      label: 'EPSG:4326',
+      value: 'EPSG:4326',
+    },
+    {
+      label: 'EPSG:3857',
+      value: 'EPSG:3857',
+    },
+  ],
+  projectionValue: null,
+};
+
+/**
+ * The MousePosition component renders a select box with map projection options
+ * and the cursor position in coordinates using the selected projection.
+ */
+function MousePosition({
+  map,
+  projections,
+  projectionValue,
+  onChange,
+  ...other
+}) {
+  const [projection, setProjection] = useState(
+    projections &&
+      ((projectionValue &&
+        projections.find((p) => {
+          return p.value === projectionValue.value;
+        })) ||
+        projections[0]),
+  );
+  const [control, setControl] = useState();
+  const ref = useRef();
+
+  useEffect(() => {
+    const mousePosition = new OLMousePosition({
+      target: ref.current,
+      undefinedHTML: ' ',
+      className: '',
+    });
+    map.addControl(mousePosition);
+    setControl(mousePosition);
+
+    return () => {
+      map.removeControl(mousePosition);
+    };
+  }, [map]);
+
+  useEffect(() => {
+    if (!projection || !control) {
+      return;
+    }
+    control.setProjection(projection.value);
+    control.setCoordinateFormat(projection.format || createStringXY(4));
+  }, [projection, control]);
+
+  useEffect(() => {
+    if (projections) {
+      const proj =
+        (projectionValue &&
+          projections.find((p) => {
+            return p.value === projectionValue.value;
+          })) ||
+        projections[0];
+      setProjection(proj);
+    }
+  }, [projections, projectionValue]);
+
+  const onChangeCb = useCallback(
+    (evt) => {
+      const newProj = projections.find((opt) => {
+        return evt.target.value === opt.value;
+      });
+      setProjection(newProj);
+      onChange(evt, newProj);
+    },
+    [onChange, projections],
+  );
+
+  if (!projection || !projections || !projections.length) {
+    return null;
+  }
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <div className="rs-mouse-position" {...other}>
+      <select
+        className="rs-select"
+        value={projection.value}
+        onChange={onChangeCb}
+      >
+        {projections.map((option) => {
+          return (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          );
+        })}
+      </select>
+      <span ref={ref} className="rs-coordinates" />
+    </div>
+  );
+}
+
+MousePosition.propTypes = propTypes;
+MousePosition.defaultProps = defaultProps;
+
+export default React.memo(MousePosition);

package/src/components/MousePosition/MousePosition.test.js

@@ -0,0 +1,132 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { configure, mount } from 'enzyme';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import 'jest-canvas-mock';
+import OLMap from 'ol/Map';
+import OLMousePosition from 'ol/control/MousePosition';
+import MousePosition from './MousePosition';
+
+configure({ adapter: new Adapter() });
+const expectSnapshot = (props) => {
+  const map = new OLMap({});
+  const component = renderer.create(<MousePosition map={map} {...props} />);
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+};
+
+describe('MousePosition', () => {
+  describe('matches snapshots', () => {
+    test('using default values.', () => {
+      expectSnapshot({});
+    });
+
+    test('using no projections.', () => {
+      expectSnapshot({
+        projections: [],
+      });
+    });
+
+    test('using only one projection', () => {
+      expectSnapshot({
+        projections: [{ label: 'foo', value: 'foo' }],
+      });
+    });
+
+    test('using multiple projections.', () => {
+      expectSnapshot({
+        projections: [
+          { label: 'foo', value: 'foo' },
+          { label: 'bar', value: 'bar' },
+        ],
+      });
+    });
+  });
+
+  test('add MousePosition control to the map.', () => {
+    const map = new OLMap({});
+    const spy = jest.spyOn(map, 'removeControl');
+    const spy2 = jest.spyOn(map, 'addControl');
+    const fn = jest.fn();
+    mount(
+      <MousePosition
+        map={map}
+        projections={[
+          {
+            label: 'EPSG:4326',
+            value: 'EPSG:4326',
+            format: fn,
+          },
+        ]}
+      />,
+    );
+    const ctrl = spy2.mock.calls[0][0];
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    expect(ctrl).toBeInstanceOf(OLMousePosition);
+    expect(ctrl.getProjection().getCode()).toBe('EPSG:4326');
+    expect(ctrl.getCoordinateFormat()).toBe(fn);
+  });
+
+  test('add/remove MousePosition control on mount/unmount.', () => {
+    const map = new OLMap({});
+    const spy = jest.spyOn(map, 'removeControl');
+    const spy2 = jest.spyOn(map, 'addControl');
+    const wrapper = mount(<MousePosition map={map} />);
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    wrapper.unmount();
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy.mock.calls[0][0]).toBe(spy2.mock.calls[0][0]);
+  });
+
+  test('triggers onChange when select projection.', () => {
+    const map = new OLMap({});
+    const onChange = jest.fn(() => {});
+    const wrapper = mount(
+      <MousePosition
+        map={map}
+        onChange={onChange}
+        projections={[
+          {
+            label: 'EPSG:4326',
+            value: 'EPSG:4326',
+            format: jest.fn(),
+          },
+        ]}
+      />,
+    );
+    // onChange triggered on instantiation.
+    expect(onChange).toHaveBeenCalledTimes(0);
+    wrapper.find('select').simulate('change', {});
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  test('applies new format and value when we select a new projection.', () => {
+    const map = new OLMap({});
+    const spy = jest.spyOn(map, 'addControl');
+    const projs = [
+      {
+        label: 'EPSG:4326',
+        value: 'EPSG:4326',
+        format: jest.fn(),
+      },
+      {
+        label: 'EPSG:3857',
+        value: 'EPSG:3857',
+        format: jest.fn(),
+      },
+    ];
+    const wrapper = mount(<MousePosition map={map} projections={projs} />);
+
+    const ctrl = spy.mock.calls[0][0];
+    expect(ctrl.getProjection().getCode()).toBe(projs[0].value);
+    expect(ctrl.getCoordinateFormat()).toBe(projs[0].format);
+    wrapper
+      .find('select')
+      .simulate('change', { target: { value: 'EPSG:3857' } });
+    expect(ctrl.getProjection().getCode()).toBe(projs[1].value);
+    expect(ctrl.getCoordinateFormat()).toBe(projs[1].format);
+  });
+});

package/src/components/MousePosition/README.md

@@ -0,0 +1,50 @@
+
+The following example demonstrates the use of MousePosition.
+
+```jsx
+import React from 'react';
+import { MapboxLayer } from 'mobility-toolbox-js/ol';
+import Tile from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import Map from 'ol/Map';
+import BasicMap from 'react-spatial/components/BasicMap';
+import MousePosition from 'react-spatial/components/MousePosition';
+
+const map = new Map({ controls: [] });
+
+const layers = [
+  new MapboxLayer({
+    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
+  }),
+];
+
+<div className="rs-mouse-position-example">
+  <BasicMap map={map} center={[1149722.7037660484, 6618091.313553318]} zoom={6} layers={layers} tabIndex={0} />
+  <MousePosition
+    map={map}
+    projections={[
+      {
+        label: 'World Geodetic System 1984',
+        value: 'EPSG:4326',
+      },
+      {
+        label: 'Web mercator with custom output',
+        value: 'EPSG:3857',
+        format: coordinates => {
+          const decimals = 4;
+          const text = [];
+          coordinates.forEach(input => {
+            const coord =
+              Math.round(parseFloat(input) * 10 ** decimals) /
+              10 ** decimals;
+            const parts = coord.toString().split('.');
+            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, "'");
+            text.push(parts.join());
+          });
+          return `Coordinates: ${text.join(' ')}`;
+        },
+      },
+    ]}
+  />
+</div>
+```

package/src/components/MousePosition/__snapshots__/MousePosition.test.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MousePosition matches snapshots using default values. 1`] = `
+<div
+  className="rs-mouse-position"
+>
+  <select
+    className="rs-select"
+    onChange={[Function]}
+    value="EPSG:4326"
+  >
+    <option
+      value="EPSG:4326"
+    >
+      EPSG:4326
+    </option>
+    <option
+      value="EPSG:3857"
+    >
+      EPSG:3857
+    </option>
+  </select>
+  <span
+    className="rs-coordinates"
+  />
+</div>
+`;
+
+exports[`MousePosition matches snapshots using multiple projections. 1`] = `
+<div
+  className="rs-mouse-position"
+>
+  <select
+    className="rs-select"
+    onChange={[Function]}
+    value="foo"
+  >
+    <option
+      value="foo"
+    >
+      foo
+    </option>
+    <option
+      value="bar"
+    >
+      bar
+    </option>
+  </select>
+  <span
+    className="rs-coordinates"
+  />
+</div>
+`;
+
+exports[`MousePosition matches snapshots using no projections. 1`] = `null`;
+
+exports[`MousePosition matches snapshots using only one projection 1`] = `
+<div
+  className="rs-mouse-position"
+>
+  <select
+    className="rs-select"
+    onChange={[Function]}
+    value="foo"
+  >
+    <option
+      value="foo"
+    >
+      foo
+    </option>
+  </select>
+  <span
+    className="rs-coordinates"
+  />
+</div>
+`;

package/src/components/MousePosition/index.js

@@ -0,0 +1 @@
+export { default } from './MousePosition';

package/src/components/NorthArrow/NorthArrow.js

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import OLMap from 'ol/Map';
+import { unByKey } from 'ol/Observable';
+import { toDegrees } from 'ol/math';
+import NorthArrowSimple from '../../images/northArrow.svg';
+import NorthArrowCircle from '../../images/northArrowCircle.svg';
+
+const propTypes = {
+  /**
+   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+   */
+  map: PropTypes.instanceOf(OLMap).isRequired,
+
+  /**
+   * Rotation of the north arrow in degrees.
+   */
+  rotationOffset: PropTypes.number,
+
+  /**
+   * Display circle around the north arrow. Not used if pass children.
+   */
+  circled: PropTypes.bool,
+
+  /**
+   *  Children content of the north arrow.
+   */
+  children: PropTypes.node,
+};
+
+const defaultProps = {
+  rotationOffset: 0,
+  circled: false,
+  children: null,
+};
+
+const getRotation = (map, rotationOffset) => {
+  return toDegrees(map.getView().getRotation()) + rotationOffset;
+};
+
+/**
+ * This NorthArrow component inserts an arrow pointing north into an
+ * [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+ */
+function NorthArrow({ map, rotationOffset, circled, children, ...other }) {
+  const [rotation, setRotation] = useState(rotationOffset);
+
+  useEffect(() => {
+    if (!map) {
+      return null;
+    }
+    const key = map.on('postrender', () => {
+      setRotation(getRotation(map, rotationOffset));
+    });
+    return () => {
+      unByKey(key);
+    };
+  }, [map, rotationOffset]);
+
+  return (
+    <div
+      className="rs-north-arrow"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...other}
+      style={{ transform: `rotate(${rotation}deg)` }}
+    >
+      {children || (circled ? <NorthArrowCircle /> : <NorthArrowSimple />)}
+    </div>
+  );
+}
+
+NorthArrow.propTypes = propTypes;
+NorthArrow.defaultProps = defaultProps;
+
+export default React.memo(NorthArrow);

package/src/components/NorthArrow/NorthArrow.test.js

@@ -0,0 +1,104 @@
+import 'jest-canvas-mock';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { act } from 'react-dom/test-utils';
+import { configure, mount } from 'enzyme';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import MapEvent from 'ol/MapEvent';
+import OLMap from 'ol/Map';
+import OLView from 'ol/View';
+import { TiImage } from 'react-icons/ti';
+import NorthArrow from './NorthArrow';
+
+configure({ adapter: new Adapter() });
+let olView;
+let olMap;
+
+describe('NorthArrow', () => {
+  beforeEach(() => {
+    olView = new OLView();
+    olMap = new OLMap({ view: olView });
+  });
+
+  test('should match snapshot with default value.', () => {
+    let component;
+    renderer.act(() => {
+      component = renderer.create(<NorthArrow map={olMap} />);
+    });
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('should match snapshot with custom attributes.', () => {
+    let component;
+    renderer.act(() => {
+      component = renderer.create(
+        <NorthArrow map={olMap} className="test-class" tabIndex={0} />,
+      );
+    });
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('should match snapshot with children.', () => {
+    let component;
+    renderer.act(() => {
+      component = renderer.create(
+        <NorthArrow map={olMap}>
+          <TiImage />
+        </NorthArrow>,
+      );
+    });
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('should match snapshot rotated.', () => {
+    let component;
+    renderer.act(() => {
+      component = renderer.create(
+        <NorthArrow map={olMap} rotationOffset={45} />,
+      );
+    });
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('should match snapshot with circle.', () => {
+    let component;
+    renderer.act(() => {
+      component = renderer.create(<NorthArrow circled map={olMap} />);
+    });
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('should react on view rotation (transform: `rotate(20deg)`)', () => {
+    const wrapper = mount(<NorthArrow map={olMap} />);
+    // Trigger view rotation
+    olMap.getView().setRotation(0.3490658503988659);
+    act(() => {
+      olMap.dispatchEvent(new MapEvent('postrender', olMap));
+      // 20 degrees = 0.3490658503988659 radians
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('should react on view rotation with offset (transform: `rotate(10deg)`)', () => {
+    const wrapper = mount(<NorthArrow map={olMap} rotationOffset={-10} />);
+    olMap.getView().setRotation(0.3490658503988659);
+    act(() => {
+      olMap.dispatchEvent(new MapEvent('postrender', olMap));
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('should remove post render event on unmount', () => {
+    const wrapper = mount(<NorthArrow map={olMap} rotationOffset={-10} />);
+    // eslint-disable-next-line no-underscore-dangle
+    expect(olMap.listeners_.postrender.length).toBe(4);
+    wrapper.unmount();
+    // eslint-disable-next-line no-underscore-dangle
+    expect(olMap.listeners_.postrender.length).toBe(3);
+  });
+});

package/src/components/NorthArrow/README.md

@@ -0,0 +1,59 @@
+
+The following example demonstrates the use of NorthArrowExample (Alt + Shift + click to rotate).
+
+```jsx
+import React from 'react';
+import { Layer } from 'mobility-toolbox-js/ol';
+import Map from 'ol/Map';
+import { DragRotate, defaults } from 'ol/interaction';
+import Tile from 'ol/layer/Tile';
+import TileGrid from 'ol/tilegrid/TileGrid';
+import TileImageSource from 'ol/source/TileImage';
+import { getCenter} from 'ol/extent';
+import BasicMap from 'react-spatial/components/BasicMap';
+import NorthArrow from 'react-spatial/components/NorthArrow';
+
+const extent = [599500, 199309, 600714, 200002];
+
+const map = new Map({ controls: [] });
+
+const layers = [
+  new Layer({
+    olLayer: new Tile({
+      extent,
+      source: new TileImageSource({
+        tileUrlFunction: c =>
+          '//plans.trafimage.ch/static/tiles/' +
+          `bern_aussenplan/${c[0]}/${c[1]}/${-c[2]-1}.png`,
+        tileGrid: new TileGrid({
+          origin: [extent[0], extent[1]],
+          resolutions: [
+            6.927661,
+            3.4638305,
+            1.73191525,
+            0.865957625,
+            0.4329788125,
+            0.21648940625,
+            0.108244703125,
+          ],
+        }),
+      }),
+    }),
+  }),
+];
+
+<div style={{position:'relative'}}>
+  <BasicMap
+    map={map}
+    center={getCenter(extent)}
+    zoom={17}
+    layers={layers}
+    tabIndex={0}
+  />
+  <NorthArrow
+    map={map}
+    rotationOffset={20}
+    circled
+  />
+</div>;
+```