diff --git a/packages/react-maplibre/src/components/MlGlobeButton/MlGlobeButton.cy.tsx b/packages/react-maplibre/src/components/MlGlobeButton/MlGlobeButton.cy.tsx index cffdf49a..edbd68b4 100644 --- a/packages/react-maplibre/src/components/MlGlobeButton/MlGlobeButton.cy.tsx +++ b/packages/react-maplibre/src/components/MlGlobeButton/MlGlobeButton.cy.tsx @@ -21,9 +21,20 @@ describe('MlGlobeButton', () => { it('shows MapIcon as start state and toggles between MapIcon and PublicIcon', () => { mount(); - cy.window().should((win) => expect((win as any)._map).to.exist); + cy.window() + .should((win) => expect((win as any)._map).to.exist) + .then((win) => { + const map = (win as any)._map; + return new Cypress.Promise((resolve) => { + if (map.loaded()) { + resolve(); + } else { + map.on('load', resolve); + } + }); + }); - cy.get('[data-testid="MapIcon"]').should('exist'); + cy.get('[data-testid="MapIcon"]', { timeout: 10000 }).should('exist'); cy.get('[data-testid="PublicIcon"]').should('not.exist'); cy.get('button').click(); cy.get('[data-testid="PublicIcon"]').should('exist'); @@ -35,7 +46,18 @@ describe('MlGlobeButton', () => { it('changes the projection on the map instance attached to window', () => { mount(); - cy.window().should((win) => expect((win as any)._map).to.exist); + cy.window() + .should((win) => expect((win as any)._map).to.exist) + .then((win) => { + const map = (win as any)._map; + return new Cypress.Promise((resolve) => { + if (map.loaded()) { + resolve(); + } else { + map.on('load', resolve); + } + }); + }); cy.window().should((win) => { const map = (win as any)._map; diff --git a/packages/react-maplibre/src/components/MlNavigationCompass/MlNavigationCompass.tsx b/packages/react-maplibre/src/components/MlNavigationCompass/MlNavigationCompass.tsx index 6be68192..8729e429 100644 --- a/packages/react-maplibre/src/components/MlNavigationCompass/MlNavigationCompass.tsx +++ b/packages/react-maplibre/src/components/MlNavigationCompass/MlNavigationCompass.tsx @@ -72,7 +72,7 @@ export interface MlNavigationCompassProps { needleStyle?: CSSProperties; } /** - * Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up. + * Navigation component that displays a compass component which indicates the current orientation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up. * * All style props are applied using @mui/material/styled to allow more complex css selectors. * diff --git a/packages/react-maplibre/src/hooks/useFeatureEditor/useFeatureEditor.tsx b/packages/react-maplibre/src/hooks/useFeatureEditor/useFeatureEditor.tsx index a779fbde..fcb6a1a5 100644 --- a/packages/react-maplibre/src/hooks/useFeatureEditor/useFeatureEditor.tsx +++ b/packages/react-maplibre/src/hooks/useFeatureEditor/useFeatureEditor.tsx @@ -112,14 +112,17 @@ const useFeatureEditor = (props: useFeatureEditorProps) => { useEffect(() => { if (!mapHook.map || !drawToolsReady) return; - const changeHandler = () => { - if (draw.current) { - // update drawnFeatures state object - const currentFeatureCollection = draw.current.getAll?.(); - setFeature(currentFeatureCollection?.features); - if (typeof props.onChange === 'function') { - props.onChange(currentFeatureCollection?.features); - } + const changeHandler = (ev: unknown) => { + let features: Feature[] = []; + + if (ev && typeof ev === 'object' && 'features' in ev && ev.features) { + features = ev.features as Feature[]; + } + + setFeature(features); + + if (props.onChange) { + props.onChange(features); } };