diff --git a/src/Button/GeoLocationButton/GeoLocationButton.example.md b/src/Button/GeoLocationButton/GeoLocationButton.example.md
index f2896e2b14..5402a37d9e 100644
--- a/src/Button/GeoLocationButton/GeoLocationButton.example.md
+++ b/src/Button/GeoLocationButton/GeoLocationButton.example.md
@@ -2,26 +2,22 @@ This demonstrates the use of the geolocation button.
```jsx
-import ZoomButton from '@terrestris/react-geo/dist/Button/ZoomButton/ZoomButton';
-import ToggleGroup from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGroup';
import GeoLocationButton from '@terrestris/react-geo/dist/Button/GeoLocationButton/GeoLocationButton';
+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';
+import React, { useEffect,useState } from 'react';
-class GeoLocationButtonExample extends React.Component {
+const GeoLocationButtonExample = () => {
- constructor(props) {
+ const [map, setMap] = useState();
- super(props);
-
- this.mapDivId = `map-${Math.random()}`;
-
- this.map = new OlMap({
+ useEffect(() => {
+ setMap(new OlMap({
layers: [
new OlLayerTile({
name: 'OSM',
@@ -32,34 +28,35 @@ class GeoLocationButtonExample extends React.Component {
center: fromLonLat([8, 50]),
zoom: 9
})
- });
- }
+ }));
+ }, []);
- componentDidMount() {
- this.map.setTarget(this.mapDivId);
+ if (!map) {
+ return null;
}
- render() {
- return (
-
-
-
-
- Enable GeoLocation
-
-
-
- );
- }
-}
+ return (
+
+ <>
+
+
+
+ Enable GeoLocation
+
+ >
+
+ );
+};
```
diff --git a/src/Button/GeoLocationButton/GeoLocationButton.spec.tsx b/src/Button/GeoLocationButton/GeoLocationButton.spec.tsx
index cb30db1f75..222da947a7 100644
--- a/src/Button/GeoLocationButton/GeoLocationButton.spec.tsx
+++ b/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';
@@ -33,17 +32,17 @@ describe('', () => {
expect(GeoLocationButton).not.toBeUndefined();
});
- // it('can be rendered', () => {
- // const { container } = render();
- // expect(container).toBeVisible();
- // });
+ it('can be rendered', () => {
+ const { container } = render();
+ expect(container).toBeVisible();
+ });
it('can be pressed', async () => {
const callback = jest.fn();
const { container } = render();
const button = within(container).getByRole('button');
@@ -57,9 +56,8 @@ describe('', () => {
const callback = jest.fn();
const { container } = render();
fireGeolocationListeners();
@@ -84,9 +82,8 @@ describe('', () => {
const callback = jest.fn();
const { container } = render();
const button = within(container).getByRole('button');
@@ -104,12 +101,10 @@ describe('', () => {
}
});
- const converted = transform(coordinates, 'EPSG:4326', map.getView().getProjection());
-
expect(callback).toBeCalledWith({
accuracy: 7,
heading: 0,
- position: converted,
+ position: coordinates,
speed: 9
});
});
diff --git a/src/Button/GeoLocationButton/GeoLocationButton.tsx b/src/Button/GeoLocationButton/GeoLocationButton.tsx
index 9596b968b2..56a3bea9e5 100644
--- a/src/Button/GeoLocationButton/GeoLocationButton.tsx
+++ b/src/Button/GeoLocationButton/GeoLocationButton.tsx
@@ -1,7 +1,7 @@
import {
- GeoLocation,
+ type GeoLocation,
useGeoLocation
-} from '@terrestris/react-util';
+} from '@terrestris/react-util/dist/Hooks/useGeoLocation/useGeoLocation';
import React, {
FC,
useState
@@ -56,7 +56,7 @@ export const GeoLocationButton: FC = ({
useGeoLocation({
active: isActive,
- enableTracking,
+ enableTracking: isActive,
follow,
onError,
onGeoLocationChange,