### 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) { } 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 ``` -------------------------------- ### 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() } } ``` -------------------------------- ### 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) } ``` -------------------------------- ### 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() } ``` -------------------------------- ### 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 ``` -------------------------------- ### 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() } ... } } ``` -------------------------------- ### 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) } ``` -------------------------------- ### 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); ``` -------------------------------- ### Setup MapsIndoors with Mapbox (Swift) Source: https://docs.mapsindoors.com/sdks-and-frameworks/ios/switching-solutions.md Initializes MapsIndoors with a Mapbox map view. Sets the camera to a specific coordinate, creates an MPMapConfig with the Mapbox MapView, loads MapsIndoors with the provided API key, and creates a map control. Use this as the initial setup to enable smooth switching between Solutions later. ```swift func setupMapsIndoors(mapsIndoorsAPIKey: String, mapboxAccessToken: String) async throws { // Set up the Mapbox map view let mapInitOptions = MapInitOptions(resourceOptions: ResourceOptions(accessToken: mapboxAccessToken)) self.mapView = MapView(frame: self.view.bounds, mapInitOptions: mapInitOptions) self.view = self.mapView // Orient your map to where you need data to be shown. // This can e.g. be done by pointing the camera to a specific location (shown below) // or getting the default venue after MapsIndoors is loaded and panning the camera there. let centerCoordinate = CLLocationCoordinate2D(latitude: 57.057964, longitude: 9.9504112, zoom: 20) self.mapView.mapboxMap.setCamera(to: CameraOptions(center: centerCoordinate, zoom: 20)) // Initialize the MPMapConfig with the Mapbox MapView self.mapConfig = MPMapConfig(mapBoxView: mapView, accessToken: mapboxAccessToken) try await MPMapsIndoors.shared.load(apiKey: mapsIndoorsAPIKey) self.mapControl = MPMapsIndoors.createMapControl(mapConfig: mapConfig) } ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### Setup route navigation Source: https://docs.mapsindoors.com/sdks-and-frameworks/ios/directions/wayfinding-instructions.md Instantiates RouteSegmentsController, adds it as a child view controller, and sets the delegate. ```swift fileprivate func setupRouteNav() { routeVC = RouteSegmentsController.init() self.addChildViewController(routeVC!) view.addSubview(routeVC.view) routeVC.didMove(toParentViewController: self) routeVC.delegate = self as RouteSegmentsControllerDelegate } ``` -------------------------------- ### 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 ``` -------------------------------- ### Custom Storage Adapter Implementation Source: https://docs.mapsindoors.com/academy/use-case-guides/parking-spot-mark-and-navigate-back.md Create a custom storage adapter by implementing the required get, set, and remove methods. ```javascript class MyCustomAdapter { get(key) { // Return parsed data or null } set(key, value) { // Store data, return true on success } remove(key) { // Remove data, return true on success } } const parking = new ParkingManager({ storageAdapter: new MyCustomAdapter() }); ``` -------------------------------- ### Getting Directions with MPDirectionsService and RouteInstructions Component Source: https://docs.mapsindoors.com/sdks-and-frameworks/react-native/getting-started/getting-directions.md The first snippet shows how to create a directions service, set travel mode to walking, get a route, render it with MPDirectionsRenderer, and listen for leg selection. The second snippet defines a RouteInstructions component that displays the current leg and provides next/previous buttons, using a useEffect to update the leg when goToPage changes. ```tsx const [mproute, setMPRoute] = useState(); const [directionsRenderer, setDirectionsRenderer] = useState(undefined); const [routeLeg, setRouteLeg] = useState(); const getRoute = async () => { if (!fromLocation || !toLocation) { return } // Query route console.debug('Querying Route'); //Creating the directions service, if it has not been created before. const directionsService = await MPDirectionsService.create(); //Setting the travel mode to walking, to ensure instructions are for walking. await directionsService.setTravelMode('walking'); let from = fromLocation.position let to = toLocation.position; console.debug({from}, {to}) //Querying the route through the directionsService after const route = await directionsService.getRoute(from, to); console.debug({route}); setMPRoute(route); //Creating the directions renderer const directionsRenderer = new MPDirectionsRenderer(NativeEventEmitter); //Setting the route on the directions renderer, causing it to be rendered onto the map. await directionsRenderer.setRoute(route); setDirectionsRenderer(directionsRenderer); //Listen for leg changes directionsRenderer.setOnLegSelectedListener((leg) => { setRouteLeg(leg); }); } ``` ```tsx export default function RouteInstructions({route, goToPage, onPrevious, onNext}: {route: MPRoute|undefined, goToPage: number|undefined, onPrevious: (()=>void)|undefined, onNext: (()=>void)|undefined}) { const [leg, setLeg] = useState(route?.legs![0]); useEffect(() => { if (goToPage !== undefined) { setLeg(route?.legs![goToPage]); } }, [goToPage]) return legs: {route?.legs?.length}