Merge pull request #107 from Chia-Chi-Shen/accessible-popups

Add accessible popups sample

Author: Chia-Chi-Shen

package-lock.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "azure-maps-control": "^3.3.0",
     "react": "^18.2.0",
-    "react-azure-maps": "^1.0.2",
+    "react-azure-maps": "^1.0.3",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0"
   },

package.json

@@ -0,0 +1,79 @@
+import { Meta, Source } from '@storybook/blocks';
+
+import AccessiblePopup from './AccessiblePopup';
+
+<Meta title='Map Annotations/Popup/Accessible Popup' />
+
+# Accessible Popup
+This sample shows how to use popups in a way that users can easily access them using keyboard shortcuts (tab).
+<fieldset style={{ width: 'fit-content'}}>Use <b>Tab</b> to navigate.</fieldset>
+<AccessiblePopup />
+<br/>
+<Source code={`
+import {
+  AzureMap,
+  AzureMapDataSourceProvider,
+  AzureMapFeature,
+  AzureMapLayerProvider,
+  AzureMapsProvider,
+  AzureMapPopup,
+} from 'react-azure-maps';
+import { data } from 'azure-maps-control';
+
+const points = Array.from({ length: 10 }).map(() => {
+  const randomLongitude = Math.floor(Math.random() * 60 - 30);
+  const randomLatitude = Math.floor(Math.random() * 40 - 20);
+  return new data.Position(randomLongitude, randomLatitude);
+});
+
+const AccessiblePopups = () => {
+
+  return (
+    <AzureMapsProvider>
+        <div style={...}>
+          <AzureMap options={{...yourOptions, zoom: 2}}>
+            <AzureMapDataSourceProvider 
+                id={'MultiplePoint AzureMapDataSourceProvider'}>
+              <AzureMapLayerProvider
+                id={'MultiplePoint AzureMapLayerProvider'}
+                options={{
+                  iconOptions: {
+                    image: 'pin-red',
+                  },
+                }}
+                type="SymbolLayer"
+              />
+              {
+                points.map(
+                  (coordinates, idx) => 
+                    <AzureMapFeature 
+                        key={idx} 
+                        type="Point" 
+                        coordinate={coordinates} 
+                    />
+                )
+              }
+            </AzureMapDataSourceProvider>
+            <>
+              {points.map((point, idx) => 
+                <AzureMapPopup
+                  key={idx}
+                  isVisible={!idx}
+                  options={{
+                    position: point,
+                    pixelOffset: [0, -5],
+                  }}
+                  popupContent={
+                    <div style={{ padding: '15px' }}>{ \`Lng: \${point[0]}, Lat: \${point[1]}\` }</div>
+                  }
+                />  
+              )}
+            </>
+          </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  );
+}
+
+export default AccessiblePopups;
+`} />

src/stories/MapAnnotations/Popup/Accessible/AccessiblePopup.mdx

@@ -0,0 +1,63 @@
+import {
+  AzureMap,
+  AzureMapDataSourceProvider,
+  AzureMapFeature,
+  AzureMapLayerProvider,
+  AzureMapsProvider,
+  AzureMapPopup,
+} from 'react-azure-maps';
+import { data } from 'azure-maps-control';
+import { mapOptions } from '../../../../key';
+
+const points = Array.from({ length: 10 }).map(() => {
+  const randomLongitude = Math.floor(Math.random() * 60 - 30);
+  const randomLatitude = Math.floor(Math.random() * 40 - 20);
+  return new data.Position(randomLongitude, randomLatitude);
+});
+
+const AccessiblePopups = () => {
+
+  return (
+    <AzureMapsProvider>
+        <div className='defaultMap sb-unstyled'>
+          <AzureMap options={{...mapOptions, zoom: 2}}>
+            <AzureMapDataSourceProvider 
+                id={'MultiplePoint AzureMapDataSourceProvider'}>
+              <AzureMapLayerProvider
+                id={'MultiplePoint AzureMapLayerProvider'}
+                options={{
+                  iconOptions: {
+                    image: 'pin-red',
+                  },
+                }}
+                type="SymbolLayer"
+              />
+              {
+                points.map(
+                  (coordinates, idx) => 
+                    <AzureMapFeature key={idx} type="Point" coordinate={coordinates}/>
+                )
+              }
+            </AzureMapDataSourceProvider>
+            <>
+              {points.map((point, idx) => 
+                <AzureMapPopup
+                  key={idx}
+                  isVisible={!idx}
+                  options={{
+                    position: point,
+                    pixelOffset: [0, -5],
+                  }}
+                  popupContent={
+                    <div style={{ padding: '15px' }}>{ `Lng: ${point[0]}, Lat: ${point[1]}` }</div>
+                  }
+                />  
+              )}
+            </>
+          </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  );
+}
+
+export default AccessiblePopups;

src/stories/MapAnnotations/Popup/Accessible/AccessiblePopup.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import InteractivePopup from './InteractivePopupExample';
 
 const meta: Meta<typeof InteractivePopup> = {
-  title: 'Map Annotations/Interactive Popup',
+  title: 'Map Annotations/Popup/Interactive Popup',
   component: InteractivePopup,
   args: {
     isVisible: true,