Issue #69 fix

.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Preview, Decorator } from '@storybook/react';
+import './style.css';
+
+// Storybook parameters
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      storySort: {
+        order: ['Intro', 'Layers', 'Controls', 'Interactions'],
+      },
+    },
+  },
+};
+
+// Wrap all stories in React.StrictMode
+export const decorators: Decorator[] = [
+  (Story) => (
+    <React.StrictMode>
+      <Story />
+    </React.StrictMode>
+  ),
+];
+
+// Provides Storybook with your global config.
+export default preview;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-openlayers",
-  "version": "10.5.0",
+  "version": "10.5.1",
   "description": "React + OpenLayers",
   "author": "Allen Kim",
   "type": "module",

src/lib/Map.tsx

@@ -35,11 +35,11 @@ export const Map = forwardRef<OlMap | undefined, MapProps>((props, ref) => {
 
   useImperativeHandle(ref, () => map, [map]);
 
-  const mounted = useRef(false);
   const defaultLayer = new TileLayer({ source: new OSM() });
 
   useEffect(() => {
-    if (!mapRef.current || mounted.current) return;
+    if (!mapRef.current) return;
+    // Always create a new map instance on mount
     const mapProps = {
       ...{
         target: mapRef.current,
@@ -50,15 +50,16 @@ export const Map = forwardRef<OlMap | undefined, MapProps>((props, ref) => {
           zoom: 2, // Default zoom level
         }),
       },
-      ...props, // Override with props.view if provided
+      ...props, // Override with props if provided
     };
     const olMap = new OlMap(mapProps);
     setMap(olMap);
-    mounted.current = true;
     return () => {
       olMap.setTarget(undefined);
+      setMap(undefined);
+      console.log('Map unmounted');
     };
-  }, []);
+  }, [mapRef]);
 
   return (
     <MapContext.Provider value={map}>