Woosmap for React Native - Show Indoor map

Get started with the Woosmap Indoor JS API. View simple examples, learn the concepts, and create custom indoor maps for your application.

Indoor Navigation
Supporting Indoor function
Supporting IndoorWidget function

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.

Initialize the Woosmap Map IndoorRenderer

            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));
        }}
        indoor_navigation_started={() => {
          console.log('Navigation Started');
        }}
        indoor_navigation_exited={() => {
          console.log('Navigation ended');
          mapRef.current?.clearDirections(); 
        }}
      />

    

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

                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

                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

              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.

              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`);
          }
        });

    

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

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.
setDirections - This method will plot the given route on the map. You can pass the route object returned by directions method.
startNavigation - This method will initiate the “Turn By Turn” navigation experience.

        mapRef.current?.startNavigation();

exitNavigation - This method will result in the exit from “Turn By Turn” navigation mode.

        mapRef.current?.exitNavigation();

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.

        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

Supporting Indoor function

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.
getUserLocation(): Promise<IndoorPosition | null> -: Returns the current user location.
isUserInsideVenue(lat: number, lng: number): Promise<boolean> -: Detects whether user location is found inside venue’s bounding box
getLevel(): Promise<number> :- Get the displayed level.
setVenue(venue: string): Promise<void> -: Renders map with the selected venue
setFloor(floor: number): Promise<void> -: Sets the floor for the venue
highlightFeatureByRef(byref: string, padding?: WoosPadding): Promise<void> -: Renders a map with a POI highlighted by ref
highlightFeature(featureId: string,silent: boolean,padding?: WoosPadding): Promise<void>-: Renders a map with a POI highlighted by pk or id

setDirectionsMode(mode: string): Promise<void> -: Sets the routing profile (or directions mode) (‘security’ ‘wheelchair’) for way finding

filterPois(advancedFilter: string, ignoreZoomRules?: boolean): Promise<void> -: Filter the map to display only labels and icons of POIs which are matching the filters

Supporting IndoorWidget function

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

‹ Displaying your stores API Services ›

Was this article helpful?

Have more questions? Submit a request

Indoor Navigation

Supporting Indoor function

Supporting IndoorWidget function