feat: indoor manager support

package.json

@@ -115,13 +115,15 @@
   },
   "peerDependencies": {
     "azure-maps-control": "2.0.32",
+    "azure-maps-indoor": "^0.1.2",
     "guid-typescript": "^1.0.9",
     "mapbox-gl": "^1.10.0",
     "react": "^16.10.2",
     "react-dom": "^16.10.2"
   },
   "dependencies": {
     "azure-maps-control": "2.0.32",
+    "azure-maps-indoor": "^0.1.2",
     "guid-typescript": "^1.0.9",
     "mapbox-gl": "^1.10.0"
   }

rollup.config.js

@@ -35,7 +35,7 @@ export default {
     include: "src/**",
   },
   plugins: [
-    externals({ peerDeps: true, deps: true, exclude: "azure-maps-control" }),
+    externals({ peerDeps: true, deps: true, exclude: ["azure-maps-control", "azure-maps-indoor"] }),
     replace({
       "process.env.NODE_ENV": JSON.stringify(env),
       preventAssignment: true,

src/contexts/AzureMapIndoorManagerContext.tsx

@@ -0,0 +1,109 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import { indoor, control } from 'azure-maps-indoor'
+import { IAzureMapIndoorManagerEventType, IAzureMapIndoorManagerStatefulProviderProps, IAzureMapsContextProps, MapType } from '../types'
+import { AzureMapsContext } from './AzureMapContext'
+import { useCheckRef } from '../hooks/useCheckRef'
+
+const AzureMapIndoorManagerContext = createContext<{}>({ 
+  indoorManagerRef: null 
+})
+
+const { Provider: IndoorManagerProvider, Consumer: AzureMapIndoorManagerConsumer } = AzureMapIndoorManagerContext
+
+const AzureMapIndoorManagerStatefulProvider = ({
+  options,
+  children,
+  dynamicStyling = false,
+  facility = { facilityId: '', levelOrdinal: 0 },
+  events = {}
+}: IAzureMapIndoorManagerStatefulProviderProps) => {
+  const { mapRef } = useContext<IAzureMapsContextProps>(AzureMapsContext)
+  const [ indoorManagerRef, setIndoorManagerRef ] = useState<indoor.IndoorManager | null>(null)
+  const [ levelControlRef, setLevelControlRef ] = useState<control.LevelControl | undefined>(undefined)
+
+  useCheckRef<MapType, MapType>(mapRef, mapRef, mref => {
+    mref.events.add('ready', () => {
+      const indoorManager = new indoor.IndoorManager(mref)
+      const levelControl = options.levelControl ? new control.LevelControl(options.levelControl) : undefined
+      indoorManager.setOptions({
+        ...options,
+        levelControl
+      })
+
+      indoorManager.setDynamicStyling(dynamicStyling)
+      indoorManager.setFacility(facility.facilityId, facility.levelOrdinal)
+
+      setIndoorManagerRef(indoorManager)
+      setLevelControlRef(levelControl)
+
+      // TODO: gracefully handle the change of props events object
+      for(const eventType in events){
+        const handler = events[eventType as IAzureMapIndoorManagerEventType]
+        if(!handler){ 
+          continue 
+        }
+
+        mref.events.add(eventType as any, indoorManager, handler)
+      }
+
+      return () => {
+        indoorManager.dispose()
+        setIndoorManagerRef(null)
+        setLevelControlRef(undefined)
+
+        for(const eventType in events){
+          const handler = events[eventType as IAzureMapIndoorManagerEventType]
+          if(!handler){ 
+            continue 
+          }
+
+          mref.events.remove(eventType, indoorManager, handler)
+        }
+      }
+    })
+  })
+
+  useCheckRef(indoorManagerRef, options, (imref, options) => {
+    imref.setOptions({
+      ...options,
+      levelControl: options.levelControl ? levelControlRef : undefined
+    })
+  })
+
+  useCheckRef(levelControlRef, options.levelControl, () => {
+    if(!options.levelControl){
+      setLevelControlRef(undefined)
+    } else {
+      // NOTE: LevelControl does not yet support dynamically updating options yet 
+      // levelControlRef.setOptions(options.levelControl)
+      if(indoorManagerRef){
+        const levelControl = new control.LevelControl(options.levelControl)
+        setLevelControlRef(levelControl)
+        indoorManagerRef.setOptions({
+          ...options,
+          levelControl
+        })
+      }
+    }
+  })
+
+  useCheckRef(indoorManagerRef, dynamicStyling, (imref) => {
+    imref.setDynamicStyling(dynamicStyling)
+  })
+
+  useCheckRef(indoorManagerRef, facility, (imref) => {
+    imref.setFacility(facility.facilityId, facility.levelOrdinal)
+  })
+
+  return (
+    <IndoorManagerProvider value={{indoorManagerRef}}>
+      {mapRef && indoorManagerRef && children}
+    </IndoorManagerProvider>
+  )
+}
+
+export {
+  AzureMapIndoorManagerContext,
+  AzureMapIndoorManagerConsumer,
+  AzureMapIndoorManagerStatefulProvider as AzureMapIndoorManagerProvider
+}

src/react-azure-maps.ts

@@ -17,6 +17,11 @@ export {
   AzureMapLayerConsumer,
   AzureMapLayerProvider
 } from './contexts/AzureMapLayerContext'
+export {
+  AzureMapIndoorManagerContext,
+  AzureMapIndoorManagerConsumer,
+  AzureMapIndoorManagerProvider
+} from './contexts/AzureMapIndoorManagerContext'
 export { default as AzureMapPopup } from './components/AzureMapPopup/AzureMapPopup'
 export { default as useCreatePopup } from './components/AzureMapPopup/useCreateAzureMapPopup'
 

src/types.ts

@@ -35,6 +35,8 @@ import atlas, {
   LayerOptions
 } from 'azure-maps-control'
 
+import { indoor, control } from 'azure-maps-indoor'
+
 export type IAzureMapOptions = ServiceOptions &
   StyleOptions &
   UserInteractionOptions &
@@ -44,6 +46,7 @@ export type IAzureMapChildren =
   | ReactElement<IAzureMapHtmlMarker>
   | ReactElement<IAzureMapPopup>
   | ReactElement<IAzureMapDataSourceProps>
+  | ReactElement<IAzureMapIndoorManagerStatefulProviderProps>
 
 export type IAzureMap = {
   children?: Array<IAzureMapChildren> | IAzureMapChildren
@@ -198,6 +201,21 @@ export type IAzureLayerStatefulProviderProps = {
   lifecycleEvents?: IAzureMapLifecycleEvent | any
 }
 
+export type IAzureMapIndoorManagerEvent = {
+  facilitychanged?: (e: indoor.IFacilityChangeEvent) => void,
+  levelchanged?: (e: indoor.ILevelChangeEvent) => void
+}
+
+export type IAzureMapIndoorManagerEventType = keyof IAzureMapIndoorManagerEvent
+
+export type IAzureMapIndoorManagerStatefulProviderProps = {
+  options: Omit<indoor.IndoorManagerOptions, 'levelControl'> & { 'levelControl'?: control.LevelControlOptions },
+  children?: ReactElement,
+  dynamicStyling?: boolean,
+  facility?: { facilityId: string, levelOrdinal: number },
+  events?: IAzureMapIndoorManagerEvent 
+}
+
 export type IAzureMapLayerLifecycleEvents = 'layeradded' | 'layerremoved'
 
 export type IAzureMapEventsType =