add interactive popup example

Author: Savina Shen (Manpower Services Taiwan Co Ltd)

src/key.ts

@@ -1,15 +1,24 @@
 import { IAzureMapOptions, AuthenticationType } from 'react-azure-maps';
 
+// export const mapOptions: IAzureMapOptions = {
+//   authOptions: {
+//     authType: AuthenticationType.anonymous,
+//     clientId: '2a60774c-f588-423b-b004-56d213773ee6',
+//     getToken: (resolve, reject) => {
+//       fetch('https://anonymous-auth.azurewebsites.net/api/GetAccessToken-Prod')
+//         .then((result) => result.text())
+//         .then((result) => resolve(result))
+//         .catch((error) => reject(new Error(`Failed to fetch anon auth token: ${error.message}`)));
+//     },
+//   },
+//   center: [0, 0],
+//   view: 'Auto',
+// };
+
 export const mapOptions: IAzureMapOptions = {
   authOptions: {
-    authType: AuthenticationType.anonymous,
-    clientId: '2a60774c-f588-423b-b004-56d213773ee6',
-    getToken: (resolve, reject) => {
-      fetch('https://anonymous-auth.azurewebsites.net/api/GetAccessToken-Prod')
-        .then((result) => result.text())
-        .then((result) => resolve(result))
-        .catch((error) => reject(new Error(`Failed to fetch anon auth token: ${error.message}`)));
-    },
+    authType: AuthenticationType.subscriptionKey,
+    subscriptionKey: '013GHvO6nMXUbB0yrRDmgizOaO3tRzevKMzPA6Yl4PeFMPgqFuelJQQJ99AGACrJL3JAArohAAAgAZMPQDp7',
   },
   center: [0, 0],
   view: 'Auto',

src/stories/MapAnnotations/Popup/Popup.mdx renamed to src/stories/MapAnnotations/Popup/Basic/Popup.mdx

@@ -1,5 +1,6 @@
 import { AzureMap, AzureMapsProvider, AzureMapPopup, IAzureMapPopup } from 'react-azure-maps';
-import { mapOptions } from '../../../key';
+import PopupContent from '../Interactive/PopupContent';
+import { mapOptions } from '../../../../key';
 
 const Popup = ({ isVisible, options }: IAzureMapPopup) => {
   // use position as argument would be better
@@ -11,6 +12,7 @@ const Popup = ({ isVisible, options }: IAzureMapPopup) => {
             isVisible={isVisible}
             options={options}
             popupContent={<div style={{ padding: '20px' }}>Hello World</div>}
+            // popupContent={<PopupContent />}
           />
         </AzureMap>
       </div>

src/stories/MapAnnotations/Popup/Popup.stories.ts renamed to src/stories/MapAnnotations/Popup/Basic/Popup.stories.ts

@@ -0,0 +1,21 @@
+import { Meta, Source } from '@storybook/blocks';
+
+import * as InteractivePopupStories from './InteractivePopup.stories';
+
+import Popup from './InteractivePopup';
+
+<Meta of={InteractivePopupStories} />
+
+# Popup
+A popup is an information window anchored at a specified position on a map.
+With **react-azure-maps**, you can quickly customize the `Popup` component with these 3 props:
+<Popup isVisible options={{ position: [0, 0] }} />
+{/* show basic code */}
+
+<Source code={`
+<AzureMapPopup
+    isVisible
+    options={{ position: [0, 0] }}
+    popupContent={<div style={{ padding: '20px' }}>Hello World</div>}
+    />
+`} />

src/stories/MapAnnotations/Popup/Popup.tsx renamed to src/stories/MapAnnotations/Popup/Basic/Popup.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InteractivePopup from './InteractivePopupExample';
+
+const meta: Meta<typeof InteractivePopup> = {
+  title: 'Map Annotations/Interactive Popup',
+  component: InteractivePopup,
+  args: {
+    isVisible: true,
+    options: {
+      position: [0, 0],
+    },
+  },
+  parameters: {
+    storySource: {
+      source: `
+import { AzureMap, AzureMapsProvider, AzureMapPopup, IAzureMapPopup } from 'react-azure-maps';
+
+const Popup = () => {
+
+  return (
+    <AzureMapsProvider>
+      <AzureMap options={your_options}>
+        <AzureMapPopup
+          isVisible
+          options={{ position: [0, 0] }}
+          popupContent={<div style={{ padding: '20px' }}>Hello World</div>}
+        />
+      </AzureMap>
+    </AzureMapsProvider>
+  );
+};
+`,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InteractivePopup>;
+
+export const Example: Story = {};

src/stories/MapAnnotations/Popup/Interactive/InteractivePopup.mdx

@@ -0,0 +1,55 @@
+import { useContext, useEffect, useState, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import atlas from 'azure-maps-control';
+import { IAzureMapsContextProps, MapType, IAzureMapPopup, AzureMapsContext } from 'react-azure-maps';
+
+const InteractivePopup = ({ isVisible, popupContent, options, events }: IAzureMapPopup) => {
+  const { mapRef } = useContext<IAzureMapsContextProps>(AzureMapsContext);
+  const containerRef = document.createElement('div');
+  const root = createRoot(containerRef);
+
+  const [popupRef] = useState<atlas.Popup>(new atlas.Popup({ ...options, content: containerRef }));
+
+  useCheckRefMount<MapType, boolean>(mapRef, true, (mref) => {
+    events &&
+      events.forEach(({ eventName, callback }) => {
+        mref.events.add(eventName, popupRef, callback);
+      });
+    return () => {
+      mref.popups.remove(popupRef);
+    };
+  });
+
+  useEffect(() => {
+    root.render(popupContent);
+    popupRef.setOptions({
+      ...options,
+      content: containerRef,
+    });
+    if (mapRef && isVisible && !popupRef.isOpen()) {
+      popupRef.open(mapRef);
+    }
+  }, [options, popupContent]);
+
+  useEffect(() => {
+    if (mapRef) {
+      if (isVisible && !popupRef.isOpen()) {
+        popupRef.open(mapRef);
+      } else if (mapRef.popups.getPopups().length && !isVisible && popupRef.isOpen()) {
+        popupRef.close();
+      }
+    }
+  }, [isVisible]);
+
+  return null;
+};
+
+function useCheckRefMount<T, T1>(dep: T | null, on: T1 | null, callback: (dep: T, on: T1) => void) {
+  useEffect(() => {
+    if (dep && on) {
+      return callback(dep, on);
+    }
+  }, []);
+}
+
+export default InteractivePopup;

src/stories/MapAnnotations/Popup/Interactive/InteractivePopup.stories.ts

@@ -0,0 +1,23 @@
+import { AzureMap, AzureMapsProvider, IAzureMapPopup } from 'react-azure-maps';
+import { mapOptions } from '../../../../key';
+import InteractivePopup from './InteractivePopup';
+import PopupContent from './PopupContent';
+import { useState } from 'react';
+
+const Popup = ({ isVisible, options }: IAzureMapPopup) => {
+  const [text, setText] = useState('Hello World');
+
+  // use position as argument would be better
+  return (
+    <AzureMapsProvider>
+      <div className="defaultMap sb-unstyled">
+        <button onClick={() => setText(text + '1')}>Change text</button>
+        <AzureMap options={mapOptions}>
+          <InteractivePopup isVisible={isVisible} options={options} popupContent={<PopupContent text={text} />} />
+        </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  );
+};
+
+export default Popup;

src/stories/MapAnnotations/Popup/Interactive/InteractivePopup.tsx

@@ -0,0 +1,18 @@
+const PopupContent = ({ text }: { text: string }) => {
+  const handleClick = () => {
+    alert(text);
+  };
+  // use position as argument would be better
+  return (
+    <div>
+      <button
+        style={{ height: '100px', width: '120px', border: '1px', padding: '4px', cursor: 'pointer' }}
+        onClick={handleClick}
+      >
+        Click me
+      </button>
+    </div>
+  );
+};
+
+export default PopupContent;