Source: https://developers.woosmap.com/products/mobile/react-native/indoor/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Woosmap for React Native - Show Indoor map



You need to integrate the Map Js library to use the Indoor Renderer and render indoor tiles into your application.

API Key
Map JS API requires authorization via API Key for initialization and API calls. You can obtain it by following this [steps](/api-reference/authentication/#registering-a-woosmap-public-api-key).

1. Initialize the Woosmap Map IndoorRenderer

```typescript
const indoorRendererConfiguration: IndoorRendererOptions = {
    centerMap: true,
    defaultFloor: 3,
  };
  const indoorWidgetConfiguration: IndoorWidgetOptions = {
    units: 'metric',
    ui: {
      primaryColor: '#318276',
      secondaryColor: '#004651',
    },
  };
<WoosmapView
        ref={mapRef}
        wooskey={'Your Woosmap key'}
        indoorRendererConfiguration={indoorRendererConfiguration}
        indoorWidgetConfiguration={indoorWidgetConfiguration}
        widget={true}
        activateIndoorProduct={true}
        defaultIndoorVenueKey={'mtp'}
        loaded={() => {
          //add();
        }}
        indoor_venue_loaded={(info) => {
          console.log(JSON.stringify(info));
        }}
        indoor_level_changed={(info) => {
          console.log('Level changed ' + JSON.stringify(info));
        }}
        indoor_feature_selected={(info) => {
          console.log('Feature selected ' + JSON.stringify(info));
        }}
        indoor_user_location={(info) => {
          console.log('User location ' + JSON.stringify(info));
        }}
        indoor_highlight_step={(info) => {
          console.log('Step info ' + JSON.stringify(info));
          const properties = info.properties;
          if (properties.isLastStep) {
              console.log('Your are on last navigation leg');
          }
        }}
        indoor_navigation_started={() => {
          console.log('Navigation Started');
        }}
        indoor_navigation_exited={() => {
          console.log('Navigation ended');
          mapRef.current?.clearDirections();
        }}
        indoor_user_near_arrival={() => {
          console.log('You are approaching your destination soon.');
        }}
      />
```

2. Finding Direction between POI
   Using widget mode, you can easily locate a route between two points of interest and navigate to it. Additionally, you have the option to programmatically discover a route between two points of interest by executing `mapRef.current?.directions.`

- If you know lat/lng of POI

```typescript
    mapRef.current?
        .directions(
          {
            venueId: activeVenue,
            origin: { lat: 43.60664187325, lng: 3.921814671575 },
            originLevel: 3,
            destination: { lat: 43.60665215333, lng: 3.921680093435 },
            destinationLevel: 3,
            language: 'en',
            units: 'metric',
            mode: 'wheelchair',
          }
        )
        .then((result) => {
          if (result) {
            mapRef.current?.setDirections(result);
          } else {
            Alert.alert(`Indoor Direction`, `No Route found`);
          }
        });
```

- If you know id of POI

```typescript
    mapRef.current?
        .directions(
          {
            venueId: activeVenue,
            originId: 614309,
            destinationId: 614165,
            language: 'en',
            units: 'metric',
            mode: 'wheelchair',
          }
        )
        .then((result) => {
          if (result) {
            mapRef.current?.setDirections(result);
          } else {
            Alert.alert(`Indoor Direction`, `No Route found`);
          }
        });
```

- If you know reference of POI

```typescript
  mapRef.current?
        .directions(
          {
            venueId: activeVenue,
            originId: 'ref:meeting001',
            destinationId: 'ref:tropiques',
            language: 'en',
            units: 'metric',
            mode: 'wheelchair',
          }
        )
        .then((result) => {
          if (result) {
            mapRef.current?.setDirections(result);
          } else {
            Alert.alert(`Indoor Direction`, `No Route found`);
          }
        });
```

- Showing route that takes into account the waypoints along the path.

```typescript
  mapRef.current?
        .directions(
          {
            venueId: activeVenue,
            origin: { lat: 43.60664187325, lng: 3.921814671575 },
            originLevel: 3,
            destination: { lat: 43.60665215333, lng: 3.921680093435 },
            destinationLevel: 3,
            language: 'en',
            units: 'metric',
            mode: 'wheelchair',
            waypoints: ['ref:meeting001', 'ref:tropiques'],
          }
        )
        .then((result) => {
          if (result) {
            mapRef.current?.setDirections(result);
          } else {
            Alert.alert(`Indoor Direction`, `No Route found`);
          }
        });
```

## Indoor Navigation

To initiate navigation experience you need to call following methods of the `MapController` object in the same order as given below.

1. `directions` - As explained in the earlier section `directions` method will find the route between two points inside an indoor venue. This method returns a `route` object upon it's completion.

2. `setDirections` - This method will plot the given `route` on the map. You can pass the `route` object returned by `directions` method.

3. `startNavigation` - This method will initiate the "Turn By Turn" navigation experience.

```typescript
mapRef.current?.startNavigation();
```

4. `exitNavigation` - This method will result in the exit from "Turn By Turn" navigation mode.

```typescript
mapRef.current?.exitNavigation();
```

5. `clearDirections` - Removes the plotted path on the map. If the navigation experience is started then it first exits from the navigation then removes the path.

```typescript
mapRef.current?.clearDirections();
```

**Please note that `setDirections` method will no longer trigger navigation. Method `startNavigation` should explicitly be called to initiate the navigation.**
Please check the javascript guide for more implementation. [javascript guide for Indoor Renderer](/products/indoor-api/guides/map-renderer/)

## Supporting Indoor function

1. `setLocation(lat: number,lng: number,level: number,bearing?: number,forceFocus?: Boolean): Promise<void>` -: Set the current user location. A blue dot is going to be displayed.
2. `getUserLocation(): Promise<IndoorPosition | null>` -: Returns the current user location.
3. `isUserInsideVenue(lat: number, lng: number): Promise<boolean>` -: Detects whether user location is found inside venue’s bounding box
4. `getLevel(): Promise<number>` :- Get the displayed level.
5. `setVenue(venue: string): Promise<void>` -: Renders map with the selected venue
6. `setFloor(floor: number): Promise<void>` -: Sets the floor for the venue
7. `highlightFeatureByRef(byref: string, padding?: WoosPadding): Promise<void>` -: Renders a map with a POI highlighted by ref
8. `highlightFeature(featureId: string,silent: boolean,padding?: WoosPadding): Promise<void>`-: Renders a map with a POI highlighted by pk or id
9. `setDirectionsMode(mode: string): Promise<void>` -: Sets the routing profile (or directions mode) (‘security’ | ‘wheelchair’) for way finding
10. `filterPois(advancedFilter: string, ignoreZoomRules?: boolean): Promise<void>` -: Filter the map to display only labels and icons of POIs which are matching the filters
11. `hideVenue(): Promise<void>` : Temporary hide indoor venue from screen.
12. `showVenue(): Promise<void>` : Show indoor venue on screen if it hide using method `hideVenue(): Promise<void>`

## Supporting IndoorWidget function

1. `showItinerary(origin: IndoorPosition | string | null,destination: IndoorPosition | string | null): Promise<void>;` -: Opens the widget’s panel in itinerary mode.