diff --git a/src/Button/GeoLocationButton/GeoLocationButton.example.md b/src/Button/GeoLocationButton/GeoLocationButton.example.md index f2896e2b14..492caf3f3e 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,34 @@ 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,