add and remove maplibre instance

src/components/MapLibreMap/MapLibreMap.cy.tsx

@@ -3,29 +3,65 @@ import { composeStories } from '@storybook/testing-react';
 import { mount } from '@cypress/react18';
 import * as stories from './MapLibreMap.stories';
 
-const { ExampleConfig }: any = composeStories(stories);
+const { ExampleConfig, AddMaplibreInstance }: any = composeStories(stories);
 
 describe('MlTerrainLayer Tests', () => {
-	it('Should display Maplibre map with osm bright style', () => {
+	it('Should display Maplibre map with OSM Bright style', () => {
 		mount(<ExampleConfig />);
 
-		// Wait for the map to be initialized and verify, that the terrain layer is added to the map
+		// Wait for the map to be initialized and verify that the terrain layer is added to the map
 		cy.window()
 			.should((win) => {
 				expect((win as any)._map).to.exist;
 			})
 			.then((win) => {
 				const { _map }: any = win;
-				cy.wrap(_map).should((_map: any) => {
-					// check for style name
-					expect(_map?.getStyle().name).to.equal('OSM Bright');
-					// check for one layer
+				cy.wrap(_map).should((_mapInstance: any) => {
+					// Check for style name
+					expect(_mapInstance?.getStyle().name).to.equal('OSM Bright');
+					// Check for specific layer existence
 					expect(
-						_map
+						_mapInstance
 							?.getStyle()
 							.layers.find((layer: { id: string }) => layer.id === 'landcover-glacier')
-					).not.be.undefined;
+					).to.exist;
 				});
 			});
 	});
 });
+
+describe('AddMaplibreInstance Tests', () => {
+	beforeEach(() => {
+		mount(<AddMaplibreInstance />);
+	});
+
+	it('Map should be added by clicking button "Add Map"', () => {
+		// Initially, the map should not exist
+		cy.get('[data-testid="map"]').should('not.exist');
+
+		// Click the "Add Map" button
+		cy.contains('button', 'Add Map').click();
+
+		// Verify that the map element now exists in the DOM
+		cy.get('[data-testid="map"]').should('exist');
+
+		// Verify that the map instance exists in the window object
+		cy.window().should((win) => {
+			expect((win as any)._map).to.exist;
+		});
+	});
+
+	it('Map should be removed by clicking button "Remove Map"', () => {
+		// Add the map first
+		cy.contains('button', 'Add Map').click();
+		cy.get('[data-testid="map"]').should('exist');
+
+		// Click the "Remove Map" button
+		cy.contains('button', 'Remove Map').click();
+
+		cy.get('[data-testid="map"]').should('not.exist');
+		cy.window().should((win) => {
+			expect((win as any)._map.getStyle()).to.be.undefined;
+		});
+	});
+});

src/components/MapLibreMap/MapLibreMap.stories.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 
 import MapLibreMap, { MapLibreMapProps } from './MapLibreMap';
 import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
 import { Button } from '@mui/material';
 import TopToolbar from '../../ui_components/TopToolbar';
 import sample_geojson_1 from '../MlGeoJsonLayer/assets/sample_1.json';
-import {FeatureCollection} from 'geojson';
+import { FeatureCollection } from 'geojson';
 import themeDecorator from '../../decorators/ThemeDecorator';
 
 const storyoptions = {
@@ -25,7 +25,7 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args:MapLibreMapProps) => {
+const Template = (args: MapLibreMapProps) => {
 	return <MapLibreMap options={{ ...args.options }} />;
 };
 
@@ -46,7 +46,7 @@ const styles = [
 	},
 ];
 
-const StyleChangeTemplate = (args:MapLibreMapProps) => {
+const StyleChangeTemplate = (args: MapLibreMapProps) => {
 	const [activeStyle, setActiveStyle] = useState(styles[1].url);
 
 	return (
@@ -86,3 +86,39 @@ StyleChangeConfig.args = {
 	},
 };
 StyleChangeConfig.parameters = {};
+
+const AddMaplibreInstanceTemplate = (args: MapLibreMapProps) => {
+	const [isMap, setIsMap] = useState(false);
+
+	const toggleMap = () => {
+		setIsMap((prev) => !prev);
+	};
+
+	return (
+		<>
+			<TopToolbar
+				buttons={
+					<Button
+						variant="contained"
+						onClick={toggleMap}
+						sx={{ marginRight: '10px', marginTop: { xs: '10px', sm: '0px' } }}
+					>
+						{isMap ? 'Remove Map' : 'Add Map'}
+					</Button>
+				}
+			></TopToolbar>
+
+			{isMap && <MapLibreMap options={{ ...args.options }}></MapLibreMap>}
+		</>
+	);
+};
+
+export const AddMaplibreInstance = AddMaplibreInstanceTemplate.bind({});
+AddMaplibreInstance.args = {
+	options: {
+		style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+		center: [8.607, 53.1409349],
+		zoom: 14,
+	},
+};
+AddMaplibreInstance.parameters = {};

src/components/MapLibreMap/MapLibreMap.tsx

@@ -131,6 +131,7 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
 			ref={mapContainer as RefObject<HTMLDivElement>}
 			className="mapContainer"
 			style={props.style}
+			data-testid={props.mapId ? `map-${props.mapId}` : 'map'}
 		/>
 	);
 };