MapsIndoors

https://docs.mapsindoors.com
Admin
MapsIndoors is a dynamic indoor mapping and wayfinding platform that allows developers to integrate...
Tokens:340,761
Snippets:2,772
Trust Score:7.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install UI Component Dependencies

Source: https://docs.mapsindoors.com/sdks-and-frameworks/react-native/getting-started/project-setup.md

Install recommended UI components for the getting started guide, including Bottomsheet and Navigation libraries.

```bash
# Bottomsheet
npm install @gorhom/bottom-sheet@^4

# Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
```

--------------------------------

### Quick Start: Initialize CleaningModule

Source: https://docs.mapsindoors.com/academy/use-case-guides/route-optimization-for-cleaning-operations.md

Quick start example showing how to initialize MapsIndoors, create a CleaningModule with required dependencies, load room data, and initialize the UI.

```js
import { CleaningModule } from './js/cleaningModule.js';
import { roomStore } from './js/roomStore.js';
import { CONFIG } from './js/utils.js';

// Initialize MapsIndoors (see SDK docs)
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView });
const mapboxInstance = mapView.getMap();
const directionsService = new mapsindoors.services.DirectionsService();
const directionsRenderer = new mapsindoors.directions.DirectionsRenderer({
  mapsIndoors: mapsIndoorsInstance
});

// Create the cleaning module
const cleaningModule = new CleaningModule({
  mapsIndoors: mapsIndoorsInstance,
  mapbox: mapboxInstance,
  directionsService,
  directionsRenderer,
  roomStore,
  config: CONFIG
});

// Load room data
roomStore.setRooms(roomsData);

// Initialize UI
cleaningModule.updateRoomDisplayRules();
cleaningModule.renderRoomList();
cleaningModule.populateSelectedRooms();
```

--------------------------------

### Setup RobotVacuumLocationSource

Source: https://docs.mapsindoors.com/sdks-and-frameworks/android/displaying-objects/location-data-sources.md

Creates a RobotVacuumLocationSource, adds it via MapsIndoors.addLocationSources, calls setup(), and starts updating positions.

```kotlin
private fun setupLocationSource() {
    if (mLocations == null) {
        generateLocations()
    }
    val locationSource = RobotVacuumLocationSource(mLocations!!)
    MapsIndoors.addLocationSources(Collections.singletonList(locationSource) as List<MPLocationSource>) {
    }
    locationSource.setup()
    startUpdatingPositions()
}
```

--------------------------------

### Start PositionProvider

Source: https://docs.mapsindoors.com/sdks-and-frameworks/android/user-positioning/show-users-location-aka.-blue-dot.md

Starts the PositionProvider instance so it begins producing positioning results.

```kotlin
mPositionProvider?.start()
```

--------------------------------

### Install dependencies and build with Lerna

Source: https://docs.mapsindoors.com/products/fast-track-maptemplate/getting-started.md

Installs all dependencies and builds the project using Lerna. Run this from the project folder root.

```bash
npm install && npx lerna run build
```

--------------------------------

### Install UI Component Dependencies

Source: https://docs.mapsindoors.com/sdks-and-frameworks/react-native/getting-started/project-setup.md

Install required dependencies for the UI components.

```bash
# Dependencies
npm install react-native-reanimated react-native-gesture-handler
```

--------------------------------

### Install CocoaPods via npx

Source: https://docs.mapsindoors.com/sdks-and-frameworks/react-native/getting-started/project-setup.md

Alternatively, use the pod-install package to run installation from the project root.

```bash
npx pod-install
```

--------------------------------

### Example of Creating a Search Query with LocationsService.getLocations

Source: https://docs.mapsindoors.com/sdks-and-frameworks/web/search/searching.md

JavaScript example showing how to call mapsindoors.services.LocationsService.getLocations with a search parameters object. The example uses the 'q' parameter to search for 'Office', 'near' with a coordinate (Blue Room, The White House), and 'take' to limit results to 1. The returned locations are logged to the console.

```javascript
const searchParameters = {
  q: 'Office',
  near: { lat: 38.897579747054046, lng: -77.03658652944773 }, // // Blue Room, The White House
  take: 1
}

mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
  console.log(locations);
});
```

--------------------------------

### Implement Start and Stop Methods

Source: https://docs.mapsindoors.com/sdks-and-frameworks/android/user-positioning/show-users-location-aka.-blue-dot.md

Define start and stop methods to manage the timer that periodically triggers position updates.

```kotlin
fun start(){
    mPositionProducer = Timer(true)
    mPositionProducer?.scheduleAtFixedRate(object: TimerTask() {
        override fun run() {

        }
    }, 0, 1000L)
}

fun stop(){
    mPositionProducer?.cancel()
}
```

--------------------------------

### PositioningFragment: Attach IndoorAtlasPositionProvider and start positioning

Source: https://docs.mapsindoors.com/sdks-and-frameworks/android/user-positioning/using-indoor-atlas.md

Shows how to integrate the IndoorAtlasPositionProvider in a Fragment. It loads MapsIndoors with an API key, creates the provider using the solution's indoorAtlasConfig, and sets it as the position provider. A button click starts positioning, with a comment to handle provider-specific permissions.

```kotlin
class myFragment: Fragment(), OnMapReadyCallback {
    private var mPositionProvider: IndoorAtlasPositionProvider? = null

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?,): View {
        ...
        MapsIndoors.load(requireActivity().applicationContext, "myapikey") {
            // Attach the position provider to the SDK
            mPositionProvider = IndoorAtlasPositionProvider(requireActivity(), MapsIndoors.getSolution()!!.indoorAtlasConfig!!)
            MapsIndoors.setPositionProvider(mPositionProvider)
        }

        //Have a buttton or other logic to start positioning:
        binding.startPositioningButton.setOnClickListener {
            //Remember to handle permissions specific to the Position provider you are using
            mPositionProvider?.startPositioning()
        }
        ...
    }
}
```

--------------------------------

### Filter locations by categories using getLocations

Source: https://docs.mapsindoors.com/sdks-and-frameworks/web/search/searching.md

Example from the parameters table showing how to filter locations by categories using the 'categories' parameter. The 'lr' parameter is set to 'en'.

```javascript
mapsindoors.services.LocationsService.getLocations({ categories: categoryKey, lr: 'en' }).then(locations => { ... });
```

--------------------------------

### Filter locations by types using getLocations

Source: https://docs.mapsindoors.com/sdks-and-frameworks/web/search/searching.md

Example from the parameters table showing how to filter locations by types, e.g., 'meetingroom', using the 'types' parameter. The 'lr' parameter is set to 'en'.

```javascript
mapsindoors.services.LocationsService.getLocations({ lr: 'en', types: ['meetingroom'] }).then(locations => { ... });
```

--------------------------------

### Initialize CustomFloorSelector with MapsIndoors instance

Source: https://docs.mapsindoors.com/sdks-and-frameworks/web/other-guides/custom-floor-selector.md

Creates a CustomFloorSelector instance using the mapsIndoorsInstance and appends its element to the document body. This code assumes previous setup from the Getting Started Guide.

```javascript
//Previous code from Getting Started Guide

// Initialize CustomFloorSelector
const customFloorSelector = new CustomFloorSelector(mapsIndoorsInstance);
document.body.appendChild(customFloorSelector.element);
```

--------------------------------

### Set up the main app and add the Map widget

Source: https://docs.mapsindoors.com/sdks-and-frameworks/flutter/getting-started/show-a-map.md

Sets up the main app widget and then adds the Map widget as the home screen, passing the MapsIndoors API key 'gettingstarted'.

```dart
import 'package:mapsindoors_mapbox/mapsindoors.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MapsIndoorsDemoApp());
}

class MapsIndoorsDemoApp extends StatelessWidget {
  const MapsIndoorsDemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MapsIndoors Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}
```

```dart
class MapsIndoorsDemoApp extends StatelessWidget {
  const MapsIndoorsDemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MapsIndoors Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Map(
        apiKey: 'gettingstarted',
      ), 
    );
  }
}
```

--------------------------------

### Initialize View Controller

Source: https://docs.mapsindoors.com/sdks-and-frameworks/ios/directions/wayfinding-instructions.md

Calls the setup methods within the viewDidLoad lifecycle method.

```swift
override func viewDidLoad() {
    super.viewDidLoad()
    Task {
        await setupMap()
        setupSearchButton()
        setupRouteNav()
        setupRenderer()
        setupConstraints()
        setOriginLocation()
    }
}
```

--------------------------------

### Get list of active secrets - response

Source: https://docs.mapsindoors.com/sdks-and-frameworks/integration-api/integration-api-access/client-credentials-flow.md

Example JSON response listing active secrets. Secrets themselves are not included because they are not stored.

```json
[
    {
        "id": "abcdbe9e8084022af463000",
        "description": "MyNewKey",
        "client_id": "xxx",
        "createdAt": "2024-05-27T13:46:31.843Z"
    }
]
```

--------------------------------

### Basic Setup with Event Listeners

Source: https://docs.mapsindoors.com/academy/use-case-guides/route-optimization-for-cleaning-operations.md

Initializes the MapsIndoors cleaning module with event listeners for route calculation, navigation, and room selection. Requires a mapView and a roomStore with setRooms, and assumes fetchRoomsFromAPI is defined elsewhere.

```javascript
import { CleaningModule } from './js/cleaningModule.js';
import { roomStore } from './js/roomStore.js';
import { CONFIG } from './js/utils.js';

async function initializeApp() {
    // Setup MapsIndoors...
    const mapsIndoors = new mapsindoors.MapsIndoors({ mapView });
    const mapbox = mapView.getMap();
    const directionsService = new mapsindoors.services.DirectionsService();
    const directionsRenderer = new mapsindoors.directions.DirectionsRenderer({
        mapsIndoors: mapsIndoors,
        fitBounds: true
    });

    // Create module
    const cleaning = new CleaningModule({
        mapsIndoors,
        mapbox,
        directionsService,
        directionsRenderer,
        roomStore,
        config: CONFIG
    });

    // Load data
    const rooms = await fetchRoomsFromAPI();
    roomStore.setRooms(rooms);

    // Initialize UI
    cleaning.updateRoomDisplayRules();
    cleaning.renderRoomList();
    cleaning.populateSelectedRooms();

    // Setup event listeners
    document.getElementById('calculate-route').addEventListener('click', () => {
        cleaning.calculateRoute();
    });

    document.getElementById('next-stop').addEventListener('click', () => {
        cleaning.nextStop();
    });

    document.getElementById('previous-stop').addEventListener('click', () => {
        cleaning.previousStop();
    });

    document.getElementById('cancel-route').addEventListener('click', () => {
        cleaning.clearRoute();
    });

    document.getElementById('info-card-close').addEventListener('click', () => {
        cleaning.closeSelection();
    });

    // Map click handler
    mapsIndoors.addListener('click', (event) => {
        if (event?.id && roomStore.has(event.id)) {
            cleaning.selectRoom(event.id);
        }
    });
}
```

--------------------------------

### Retrieving a LocationEditor on Click

Source: https://docs.mapsindoors.com/sdks-and-frameworks/built-in-map-edits/getting-started.md

Use this snippet to retrieve a LocationEditor instance when a MapsIndoors location is clicked. It sets up a click event listener on mapsIndoorsInstance and calls solutionManager.getLocation(e.id) to get the editor. This example assumes a working MapsIndoors Web SDK integration and is a continuation of the example found in Method 2: Connecting to an Existing SDK Instance (connect).

```js
let locationEditor = null;

// Get LocationEditor when a MapsIndoors location is clicked
mapsIndoorsInstance.on('click', async (e) => {
    if (!e?.id) {
        locationEditor = null;
        return;
    }

    try {
        locationEditor = await solutionManager.getLocation(e.id);
        console.log(`LocationEditor retrieved for ID: ${e.id}`);
    } catch (error) {
        console.error(`Failed to get LocationEditor for ID ${e.id}:`, error);
        locationEditor = null;
    }
});
```

--------------------------------

### Setup search button

Source: https://docs.mapsindoors.com/sdks-and-frameworks/ios/directions/wayfinding-instructions.md

Creates a blueprint button that triggers the selectDestination method.

```swift
fileprivate func setupSearchButton() {
    searchButton = UIButton.init()
    searchButton.setTitle("Search Destination", for: .normal)
    searchButton.addTarget(self, action: #selector(selectDestination), for: .touchUpInside)
    searchButton.backgroundColor = .blue
    view.addSubview(searchButton)
}
```

--------------------------------

### Get directions from user's current position

Source: https://docs.mapsindoors.com/sdks-and-frameworks/ios/directions/directions-renderer/users-location-as-point-of-origin.md

Use the PositionProvider's latest position coordinate to create an MPPoint and use it as the origin in an MPDirectionsQuery. The example shows how to set a destination and retrieve a route using the directions service.

```swift
if let userPosition = mapControl?.positionProvider?.latestPosition?.coordinate {
    let userPositionToMPPoint = MPPoint(latitude: userPosition.latitude, longitude: userPosition.longitude)
    let destination = MPPoint(latitude: 57.05803, longitude: 9.950509, z: 0.00)
    let directionsQuery = MPDirectionsQuery(originPoint: userPositionToMPPoint, destinationPoint: destination)
    let directionsService = MPMapsIndoors.shared.directionsService
    let route = try? await directionsService.routingWith(query: directionsQuery)
    let rendere = mapControl?.newDirectionsRenderer()
    rendere?.route = route
}
```

--------------------------------

### MapsIndoors Caching and Offline Data Management (Java)

Source: https://docs.mapsindoors.com/sdks-and-frameworks/android/caching-and-offline-data.md

Java examples for MapsIndoors caching and offline data management. Includes manual synchronization, changing cache scope, listing managed datasets, adding/removing datasets, getting cache sizes, and synchronizing datasets with MPDataSetCacheManager.

```java
MapsIndoors.synchronizeContent((e) -> {
    ...
});
```

```java
MPDataSetCache dataSet = MPDataSetCacheManager.getInstance().getDataSetByID("API KEY");
dataSet.setScope(mContext, MPDataSetCacheScope.DETAILED);
MPDataSetCacheManager.getInstance().synchronizeDataSets(Collections.singletonList(dataSet));
```

```java
for (MPDataSetCache dataSet : MPDataSetCacheManager.getInstance().getManagedDataSets()) {
    Log.i("dataset", dataSet.getSolutionId() + ": size " + dataSet.getCacheItem().getSyncSize());
}
```

```java
MPDataSetCacheManager.getInstance().addDataSetWithCachingScope("API KEY", MPDataSetCacheScope.BASIC);
```

```java
MPDataSetCacheManager.getInstance().removeDataSetCache(MPDataSetCache);
```

```java
MPDataSetCache dataSet = MPDataSetCacheManager.getInstance().getDataSetByID("API KEY");
dataSet.setScope(mContext, MPDataSetCacheScope.DETAILED);
MPDataSetCacheManager.getInstance().synchronizeDataSets(Collections.singletonList(dataSet));
```

```java
dataSet.getCacheItem().getCacheSize(mContext);
dataSet.getCacheItem().getSyncSize();
```

```java
MPDataSetCacheManager.getInstance().getSyncSizesForDataSetCaches(Collections.singletonList(dataSet), this);
```

```java
MPDataSetCacheManager dataSetCacheManager = MPDataSetCacheManager.getInstance();

// sync all managed datasets
dataSetCacheManager.synchronizeDataSets();

// sync specific datasets
dataSetCacheManager.synchronizeDataSets(dataSets);
```

--------------------------------

### Using the Built-in RoomStore

Source: https://docs.mapsindoors.com/academy/use-case-guides/route-optimization-for-cleaning-operations.md

Shows how to use the built-in RoomStore: either the singleton instance or a new instance, both with setRooms.

```js
import { roomStore, RoomStore } from './js/roomStore.js';

// Use the singleton instance
roomStore.setRooms(myRoomsArray);

// Or create a new instance
const customStore = new RoomStore();
customStore.setRooms(myRoomsArray);
```

--------------------------------

### PUT /{apiKey}/api/routing/routeelements request body

Source: https://docs.mapsindoors.com/sdks-and-frameworks/integration-api.md

Example request body for updating route elements via the Integration API. Use with PUT /{apiKey}/api/routing/routeelements to set restrictions to "locked" for routes with too many people. The IDs and other information can be obtained from a prior GET call.

```json
[
  {
    "id": "string",
    "datasetId": "string",
    "externalId": "string",
    "geometry": {
      "type": 0
    },
    "restrictions": [
      "locked"
    ],
    "onewayDirection": 0,
    "waitTime": 0
  }
]
```

--------------------------------

### Quick Start: Save, Load, and Clear Parking

Source: https://docs.mapsindoors.com/academy/use-case-guides/parking-spot-mark-and-navigate-back.md

Shows the basic usage of ParkingManager: create an instance (using localStorage by default), save a MapsIndoors location, check if parking exists, load the saved parking data, and clear it. The example logs the saved parking name to the console.

```javascript
import { ParkingManager } from './parking.js';

// Create a ParkingManager instance (uses localStorage by default)
const parking = new ParkingManager();

// Save a MapsIndoors location as parking
parking.saveParkingSpot(mapsIndoorsLocation);

// Check if parking exists
if (parking.hasSavedParking()) {
  // Load the saved parking data
  const savedParking = parking.loadParkingSpot();
  console.log('Parked at:', savedParking.name);
}

// Clear saved parking
parking.clearParkingSpot();
```

--------------------------------

### Cisco Positioning Service Usage Example

Source: https://docs.mapsindoors.com/sdks-and-frameworks/web/other-guides/user-positioning/using-cisco-dna-spaces.md

Demonstrates how to initialize the CiscoPositioningService using solution configuration and watch for position updates on the map.

```javascript
const map = mapView.getMap();
let watchId;

mapsindoors.services.SolutionsService.getSolution('57e4e4992e74800ef8b69718').then(solution => {
    if (solution.positionProviderConfigs && solution.positionProviderConfigs.ciscodna) {
        const tenantId = solution.positionProviderConfigs.ciscodna.ciscoDnaSpaceTenantId;
        const region = solution.positionProviderConfigs.ciscodna.ciscoDnaSpaceTenantRegion || 'usa';
        const clientIp = '10.0.0.134';
        const cps = new CiscoPositioningService({ clientIp, tenantId, region });

        watchId = cps.watchPosition(function (data) {
            console.log(data);
            map.setCenter({ lat: data.latitude, lng: data.longitude });
        }, function (err) {
            console.log(err);
        })
    }
});

const floorSelector = document.createElement('div');
new mapsindoors.FloorSelector(floorSelector, mi);
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(floorSelector);
```

--------------------------------

### Get dataset cache size with cacheItem.getCacheSize and syncSize

Source: https://docs.mapsindoors.com/sdks-and-frameworks/android/caching-and-offline-data.md

Retrieves the estimated and cached size of a dataset. The first line gets the estimated size, the second gets the synchronized size.

```kotlin
dataSet?.cacheItem?.getCacheSize(mContext)
dataSet?.cacheItem?.syncSize
```

--------------------------------

### Run the Map Template app

Source: https://docs.mapsindoors.com/products/fast-track-maptemplate/getting-started.md

Starts the app from the packages/map-template directory. The app will be served at http://localhost:3000/.

```bash
npm run start
```

--------------------------------

### Configure Contextual Info Settings

Source: https://docs.mapsindoors.com/sdks-and-frameworks/ios/directions/directions-renderer.md

Example of initializing and applying settings to show Location information of type 'Entry' within a 20-meter radius.

```swift
let contextualSettings = DirectionsRendererContextualInfoSettings()
contextualSettings.types = ["Entry"]
contextualSettings.maxDistance = 20
myDirectionsRenderer.contextualInfoSettings = contextualSettings
```

--------------------------------

### MainActivity.kt implementation for dynamic map provider switching

Source: https://docs.mapsindoors.com/sdks-and-frameworks/android/using-multiple-map-providers.md

This example shows how to define a buildConfig method to swap between Google and Mapbox map fragments and initialize MapControl with the selected provider.

```kotlin
import android.os.Build
import android.os.Bundle
import androidx.annotation.RequiresApi
import androidx.fragment.app.FragmentActivity
import com.mapsindoors.core.MPDebugLog
import com.mapsindoors.core.MapControl
import com.mapsindoors.core.MapsIndoors
import com.mapsindoors.core.OnMapsIndoorsReadyListener
import com.mapsindoors.core.OnResultReadyListener
import com.mapsindoors.core.errors.MIError
import com.mapsindoors.core.models.MPCameraPosition
import com.mapsindoors.testapp.Provider.Google
import com.mapsindoors.testapp.Provider.Mapbox
import com.mapsindoors.testapp.providers.GoogleMapFragment
import com.mapsindoors.testapp.providers.MIMap
import com.mapsindoors.testapp.providers.MapFragment
import com.mapsindoors.testapp.providers.MapboxMapFragment

class MainActivity : FragmentActivity(), OnResultReadyListener {
  private var mMapControl: MapControl? = null
  private lateinit var mFragment: MapFragment
  private lateinit var mMIMap: MIMap

  @RequiresApi(api = Build.VERSION_CODES.M)
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    buildConfig(Mapbox, "mapspeople3d") { e: MIError? -> }
  }

  override fun onResultReady(error: MIError?) {
    mMIMap = mFragment.getMap()
    initMapControl()
  }

  private fun initMapControl() {
    val mapConfig = mFragment.getMapConfigBuilder().setShowUserPosition(true).build()
    MapControl.create(mapConfig) { mapControl: MapControl?, miError: MIError? ->
      if (miError == null) {
        mMapControl = mapControl
        val venue = (MapsIndoors.getVenues() ?: return@create).defaultVenue
        runOnUiThread {
          if (venue != null) {
            mMapControl?.selectFloor(venue.defaultFloor)
            mMIMap.animateCamera(MPCameraPosition.Builder().setTarget(venue.bounds?.center).setZoom(17f).build())
          }
        }
      }
    }
  }

  private fun buildConfig(provider: Provider, apiKey: String, listener: OnMapsIndoorsReadyListener) {
    mFragment = when (provider) {
      Google -> GoogleMapFragment()
      Mapbox -> MapboxMapFragment()
    }
    supportFragmentManager.beginTransaction().add(R.id.map_fragment, mFragment).commit()
    MapsIndoors.load(application, apiKey, listener)
    mFragment.isReady(this)
  }

  override fun onDestroy() {
    super.onDestroy()
    mFragment.onDestroy()
  }
}

enum class Provider {
  Mapbox, Google,
}
```

--------------------------------

### Start Updating Positions

Source: https://docs.mapsindoors.com/sdks-and-frameworks/android/displaying-objects/location-data-sources.md

Starts a timer to trigger location updates at a fixed rate.

```kotlin
private fun startUpdatingPositions() {
    mUpdateTimer?.cancel()
    mUpdateTimer = Timer()
    mUpdateTimer?.scheduleAtFixedRate(object: TimerTask() {
        override fun run() {
            updateLocations();
        }
    }, 2000, 500)
}
```

--------------------------------

### Install CocoaPods Dependencies

Source: https://docs.mapsindoors.com/sdks-and-frameworks/react-native/getting-started/project-setup.md

Run pod install from the ios folder to link native dependencies.

```bash
pod install
```

--------------------------------

### Build the application with a base path

Source: https://docs.mapsindoors.com/products/fast-track-maptemplate/deploying-map-template-to-a-cloud-storage-provider.md

Use this command to build the application with the bucket name prepended to all links, ensuring correct asset resolution when deployed to a storage bucket.

```bash
vite build --base=/YOUR_BUCKET_NAME
```

--------------------------------

### Set up WayfindingFragment onCreateView

Source: https://docs.mapsindoors.com/sdks-and-frameworks/android/directions/wayfinding-instructions.md

Sets up the WayfindingFragment's view: inflates the binding, loads MapsIndoors with the API key "gettingstarted", attaches a RouteCollectionAdapter to a ViewPager2, and initializes the map fragment. The onPageSelected callback is currently empty but can be used to react to page changes.

```kotlin
override fun onCreateView(view: View, @Nullable savedInstanceState: Bundle?) {
    _binding = FragmentWayfindingBinding.inflate(inflater, container, false)

    MapsIndoors.load(requireActivity().applicationContext, "gettingstarted", null)

    val routeLegAdapter = RouteCollectionAdapter(this)
    val viewPager = binding.stepViewPager
    viewPager.adapter = routeLegAdapter
    viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
        override fun onPageSelected(position: Int) {
            super.onPageSelected(position)
        }
    })

    val root: View = binding.root
    val supportMapFragment = childFragmentManager.findFragmentById(R.id.map) as SupportMapFragment
    mMapView = supportMapFragment.view
    supportMapFragment.getMapAsync(this)
    return root
}
```

--------------------------------

### Install MapsIndoors Google Maps Provider

Source: https://docs.mapsindoors.com/sdks-and-frameworks/react-native/getting-started/project-setup.md

Install the MapsIndoors Google Maps binding package.

```bash
npm install @mapsindoors/react-native-maps-indoors-google-maps
```

--------------------------------

### Setup member variables

Source: https://docs.mapsindoors.com/sdks-and-frameworks/ios/searching/creating-a-search-experience.md

Creates the required properties for the search controller: location service, query, results array, delegate, table view, and search bar.

```swift
let locationService = MPLocationService.sharedInstance()
let query = MPQuery()
var locations:[MPLocation] = []
var delegate:MySearchControllerDelegate? = nil
let tableView = UITableView()
let searchBar = UISearchBar()
```

--------------------------------

### Install MapsIndoors Map Template via NPM

Source: https://docs.mapsindoors.com/products/fast-track-maptemplate/getting-started/react-component.md

Install the stable version of the MapsIndoors map template package.

```bash
npm install @mapsindoors/map-template@stable
```

--------------------------------

### Initialize React Native Project

Source: https://docs.mapsindoors.com/sdks-and-frameworks/react-native/getting-started/project-setup.md

Create a new React Native project using the latest version.

```shell
npx react-native@latest init GettingStartedProject
```

--------------------------------

### Setup and execute a directions query with MPDirectionsQuery

Source: https://docs.mapsindoors.com/sdks-and-frameworks/ios/directions/directions-service.md

Sets up a route request with origin and destination points, executes it, and renders the route on the map with fit bounds and animation. Requires a valid API key and map configuration.

```swift
try await MPMapsIndoors.shared.load(apiKey: #INSERT_API_KEY)
          
mapControl = MPMapsIndoors.createMapControl(mapConfig: #INSERT_YOUR_MAPCONFIG)
          
let origin = MPPoint(latitude:57.059884140172585, longitude: 9.939936105948238, z: 0)
let destination = MPPoint(latitude: 57.05718292988392, longitude: 9.930720035736968, z: 0)
let directionsQuery = MPDirectionsQuery(originPoint: origin, destinationPoint: destination)
let route = try? await directionsService.routingWith(query: directionsQuery)

let renderer = mapControl?.newDirectionsRenderer()
renderer?.fitBounds = true
renderer?.route = route
renderer?.animate(duration: 5)
```

--------------------------------

### Dataset JSON example

Source: https://docs.mapsindoors.com/sdks-and-frameworks/integration-api/data-description.md

Example of a dataset object showing available languages, base language, and root objects.

```json
{
  "id": "550c26a864617400a40f0000",
  "name": "RTX",
  "availableLanguages": [
    "en",
    "da"
  ],
  "baseLanguage": "en",
  "rootObjects": [
    "550c286964617400a4100000"
  ]
}
```
Tokens:
Raw