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);
}
};