Merge pull request #3512 from terrestris/geolocation

chore: refactor geolocation button

Author: dnlkoch

src/Button/GeoLocationButton/GeoLocationButton.example.md

@@ -1,65 +1,61 @@
 This demonstrates the use of the geolocation button.
 
+
 ```jsx
 import GeoLocationButton from '@terrestris/react-geo/dist/Button/GeoLocationButton/GeoLocationButton';
-import ToggleGroup from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
+import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import { fromLonLat } from 'ol/proj';
 import OlSourceOSM from 'ol/source/OSM';
 import OlView from 'ol/View';
-import * as React from 'react';
-
-class GeoLocationButtonExample extends React.Component {
-
-  constructor(props) {
+import React, { useEffect, useState } from 'react';
 
-    super(props);
+const GeoLocationButtonExample = () => {
 
-    this.mapDivId = `map-${Math.random()}`;
+  const [map, setMap] = useState();
 
-    this.map = new OlMap({
+  useEffect(() => {
+    setMap(new OlMap({
       layers: [
         new OlLayerTile({
           name: 'OSM',
           source: new OlSourceOSM()
         })
       ],
       view: new OlView({
-        center: fromLonLat([37.40570, 8.81566]),
-        zoom: 4
+        center: fromLonLat([8, 50]),
+        zoom: 9
       })
-    });
-  }
+    }));
+  }, []);
 
-  componentDidMount() {
-    this.map.setTarget(this.mapDivId);
+  if (!map) {
+    return null;
   }
 
-  render() {
-    return (
-      <div>
-        <div
-          id={this.mapDivId}
+  return (
+    <MapContext.Provider
+      value={map}
+    >
+      <>
+        <MapComponent
+          map={map}
           style={{
             height: '400px'
           }}
         />
-        <ToggleGroup>
-          <GeoLocationButton
-            onGeolocationChange={() => undefined}
-            map={this.map}
-            showMarker={true}
-            follow={true}
-          >
-          Track location
-          </GeoLocationButton>
-        </ToggleGroup>
-      </div>
-    );
-  }
-}
+        <GeoLocationButton
+          showMarker={true}
+          follow={true}
+        >
+          Enable GeoLocation
+        </GeoLocationButton>
+      </>
+    </MapContext.Provider>
+  );
+};
 
 <GeoLocationButtonExample />
-
 ```

src/Button/GeoLocationButton/GeoLocationButton.spec.tsx

@@ -5,7 +5,6 @@ import {
 } from '@terrestris/react-util/dist/Util/geolocationMock';
 import { render, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { transform } from 'ol/proj';
 import * as React from 'react';
 
 import TestUtil from '../../Util/TestUtil';
@@ -34,17 +33,16 @@ describe('<GeoLocationButton />', () => {
     });
 
     it('can be rendered', () => {
-      const { container } = render(<GeoLocationButton map={map} />);
+      const { container } = render(<GeoLocationButton />);
       expect(container).toBeVisible();
     });
 
     it('can be pressed', async () => {
       const callback = jest.fn();
 
       const { container } = render(<GeoLocationButton
-        map={map}
         showMarker={false}
-        onGeolocationChange={callback}
+        onGeoLocationChange={callback}
       />);
 
       const button = within(container).getByRole('button');
@@ -58,9 +56,8 @@ describe('<GeoLocationButton />', () => {
       const callback = jest.fn();
 
       const { container } = render(<GeoLocationButton
-        map={map}
         showMarker={false}
-        onGeolocationChange={callback}
+        onGeoLocationChange={callback}
       />);
 
       fireGeolocationListeners();
@@ -85,9 +82,8 @@ describe('<GeoLocationButton />', () => {
       const callback = jest.fn();
 
       const { container } = render(<GeoLocationButton
-        map={map}
         showMarker={false}
-        onGeolocationChange={callback}
+        onGeoLocationChange={callback}
       />);
 
       const button = within(container).getByRole('button');
@@ -105,12 +101,10 @@ describe('<GeoLocationButton />', () => {
         }
       });
 
-      const converted = transform(coordinates, 'EPSG:4326', map.getView().getProjection());
-
       expect(callback).toBeCalledWith({
         accuracy: 7,
         heading: 0,
-        position: converted,
+        position: coordinates,
         speed: 9
       });
     });