LogoLogo
CMSGitHubSupportBook a demo
  • Documentation
  • Academy
  • Help Center
  • Welcome
  • SDKS & Frameworks
    • Web
      • Getting Started
        • Prerequisites
          • MapsIndoors
          • Map Engine Provider
            • Option 1: Get your Mapbox Access Token
            • Option 2: Get your Google Maps API Keys​
          • Map Engine Setup
        • Getting Started: MapsIndoors
      • Map Visualization
        • Highlight, Hover and Select
        • Remove Labels from Buildings and Venues
        • Change Building Outline
        • Managing Collisions Based on Zoom Level
        • 3D Maps
          • Managing your 3D Maps
        • Base Map Styling - Google Maps
        • Managing feature visibility for Mapbox
      • Wayfinding
        • Directions
        • Directions Service
          • Tailoring the directions to your specific needs
        • Directions Renderer
          • Customizing the Route Animation
        • Multi-stop navigation
          • Custom Icons
        • User's Location as Point of Origin
      • Search
        • Search Operations
        • Searching
        • Using External ID, Geospatial Joins
        • Utilizing MapsIndoors Web Components and Other Searches
      • Map Management
      • Data Visualization
        • Display Heatmap Overlay
      • Other guides
        • Authentication
          • Single Sign-On
            • SSO Configuration
            • SSO Authorisation
          • 2-Factor Authentication
          • Password Reset
        • Application User Roles
        • Custom Properties
        • Display Language
        • Language
        • User Positioning
          • Show User's Location aka. Blue Dot
          • Using Cisco DNA Spaces
        • Working with Events
        • Turn Off Collisions Based on Zoom Level
        • Remove Labels from Buildings and Venues for Web
        • Synchronizing data for a subset of venues
        • Custom Floor Selector
      • Display Rules in Practice
      • Offline Data
      • Managing map visibility
    • Android
      • Getting Started
        • Prerequisites
        • Create a New Project
        • Show a Map
        • Create a Search Experience
        • Getting Directions
        • Enable Live Data
        • Integrating MapsIndoors into your own App
        • Migrating from V3 to V4
          • Migrating to Mapbox V11
      • Directions
        • Directions Service
        • Directions Renderer
          • User's Location as Point of Origin
        • Wayfinding Instructions
          • See Route Element Details
        • Using multi-stop navigation
      • Searching
        • Searching on a Map
        • Creating a Search Experience
      • Switching Solutions
      • Caching & Offline Data
      • Display Language
      • Displaying Objects
        • Application User Roles
        • Getting a Polygon from a Location
        • Location Clustering
        • Location Data Sources
        • Location Details
        • Turn Off Collisions Based on Zoom Level
        • Enabling and Disabling features on the map
      • Change Building Outline Color
      • Event Logging
      • Configuring a menu with AppConfig
      • Display Heatmap Overlay
      • Custom Properties
      • Custom Floor Selector
      • External IDs
      • User Positioning
        • Show User's Location aka. Blue Dot
        • Using Cisco DNA Spaces
        • Using Google Fused Location Provider
        • Using Indoor Atlas
      • Authentication
        • Single Sign-On
          • SSO Configuration
          • SSO Authorisation
        • 2-Factor Authentication
        • Password Reset
      • Display Rules in Practice
        • Label styling through Display Rules
      • Highlight and Select
    • iOS
      • Getting Started
        • Prerequisites
        • Set Up Your Environment
        • Display a Map
        • Search
        • Getting Directions
        • Migrating from v3 to v4
      • Directions
        • Directions Renderer
          • User's Location as Point of Origin
        • Wayfinding Instructions
          • See Route Element Details
        • Directions Service
        • Using multi-stop navigation
      • Searching
        • Searching on a Map
        • Creating a Search Experience
      • Caching & Offline Data
      • Displaying Objects
        • Application User Roles
        • Getting a Polygon from a Location
        • Location Details
        • Turn Off Collisions Based on Zoom Level
        • Enabling and Disabling features on the map
      • Custom Floor Selector
      • Change Building Outline Color
      • Custom Map Padding
      • Custom Properties
      • Display Rules in Practice
        • Label styling through Display Rules
      • Switching Solutions
      • Show User's Location aka. Blue Dot
        • Using Indoor Atlas
        • Using Cisco DNA Spaces
      • Highlight and Select
      • Display Language
    • React Native
      • Getting Started
        • Prerequisites
        • Project Setup
        • Displaying a Map
        • Creating a Search Experience
        • Getting Directions
        • Enabling Live Data
      • Showing Blue Dot
    • Flutter
      • Getting Started
        • Prerequisites
        • Create a New Project
        • Show a Map
        • Create a Search Experience
        • Getting Directions
      • Migration Guide
    • Integration API
      • Integration API Access
        • Access with Swagger
        • Access with Postman
        • Access with Python
        • Client credentials flow
      • Data Description
      • Reverse Geocoding
      • Route Access
      • OpenAPI Specification
    • Built-In Map Edits
      • Getting started
      • Authentication
      • Release notes
      • Reference docs
  • Products
    • Product Overview
    • CMS
      • Interface Overview
      • Display Rules
      • Media Library
        • 2D Models and Icons
        • 3D Models
      • Editing Data
      • Solution Settings
      • Settings
      • Data Concepts
      • User Roles
      • Route Network
        • Barrier Route Element
        • Door Route Element
      • Additional Location Details
    • Map Template
      • Getting Started
        • Web Component
        • React Component
      • Configuration
        • Query Parameters
      • Customization
      • Deploying Map Template to a cloud storage provider
      • 2D/3D Visibility Switch
      • External customization of the Map Template
      • Location Details configuration
      • Kiosk
        • QR code configuration
  • Other
    • Design
      • Standard MapsIndoors Map Style
      • Using a Custom Mapbox MapStyle
    • Changelog
      • Web SDK
        • V4
        • V3
      • Android SDK
        • V4
        • V3
      • iOS SDK
        • V4
        • V3
      • React Native SDK
      • Flutter SDK
      • MI Components
      • Map Template
    • Glossary
  • Legacy Docs
    • Android SDK V3
      • Getting Started
        • Prerequisites
        • Create a New Project
        • Show a Map
        • Create a Search Experience
        • Getting Directions
        • Enable Live Data
        • Integrating MapsIndoors into your own App
    • iOS SDK V3
      • Getting Started
        • Prerequisites
        • Set Up Your Environment
        • Display a Map
        • Search
        • Directions
        • Live Data
        • Integrating MapsIndoors into your own App
      • Inspect Route Element for iOS v3
      • Using Cisco DNA Spaces
      • Using Indoor Atlas
      • Switching Solutions
      • Show User's Location aka. Blue Dot
      • Application User Roles
      • Getting a Polygon from a Location
      • Location Details
  • MapsIndoors SDK Firewall
  • Google Analytics & Logging
  • Reference Docs
    • Web SDK
    • Android SDK
    • iOS SDK
    • React Native SDK
    • Flutter SDK
Powered by GitBook
On this page
  • Controlling the Visible Segments on the Directions Renderer​
  • Show Content of Nearby Locations​

Was this helpful?

Export as PDF
  1. SDKS & Frameworks
  2. iOS
  3. Directions

Directions Renderer

iOS V4

Last updated 7 months ago

Was this helpful?

When getting the result Route from a , we may want to display this Route on a map. To perform this task the MPDirectionsRenderer can be used.

See , for examples of how to handle localization of routes and their presentation on the map.

To configure a mapConfig see

This example shows how to setup a query for a route and display the result on a Google Map using the MPDirectionsRenderer:

Task {
    try await MPMapsIndoors.shared.load(apiKey: #INSERT_API_KEY)
            
    mapControl = MPMapsIndoors.createMapControl(mapConfig: #INSERT_YOUR_MAPCONFIG)
            
    let origin = MPMapsIndoors.shared.locationWith(locationId: "a6be6af53db44c1e8cc7fe4f")

    let destination = MPMapsIndoors.shared.locationWith(locationId: "0c44207987174561a53fb00a")
            
    let directionsQuery = MPDirectionsQuery(origin: origin!, destination: destination!)

    let directionsService = MPMapsIndoors.shared.directionsService

    let route = try? await directionsService.routingWith(query: directionsQuery)

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

As previously mentioned, the route object is seperated into objects of MPRouteLeg. Each leg is again separated into objects of MPRouteStep.

Unless the Route only contains one Leg, the Directions Renderer does not allow the full Route to be rendered all at once. Therefore, if a Leg contains multiple Steps, they will all be shown on the map at the same time, but once the Leg is changed, the previous Steps are not visible anymore.

A specific segment of the route can be rendered by setting the legIndex on the MPDirectionsRenderer.

let renderer = mapControl?.newDirectionsRenderer()
renderer?.routeLegIndex = 5

The length of the legs array determines the possible values of routeLegIndex (0 ..< length).

The Directions Labels refer to labels shown at the start and/or end of the rendered route segment (leg or step) path, that may provide contextual information or show instructions for the needed user action at that point. E.g. the end label can be retrieved with .nextRouteLegButton. The labels are created as simple UIButton instances that are rendered as markers on the map. As with most buttons, it is possible to add targets to these labels, so you can react to touch events.


override func viewDidAppear(_ animated: Bool) {
    let renderer = MPDirectionsRenderer.init()
    renderer.delegate = self
    renderer.map = self.map

    renderer.nextRouteLegButton?.addTarget(self, action: #selector(nextLeg), for: .touchUpInside)
    renderer.previousRouteLegButton?.addTarget(self, action: #selector(previousLeg), for: .touchUpInside)
}

@objc func nextLeg() {
    renderer.routeLegIndex += 1
}

@objc func previousLeg() {
    renderer.routeLegIndex -= 1
}

In the above example, a target is added to nextRouteLegButton and nextRouteLegButton calling the method nextLeg and previousLeg respectively. These methods then changes the visible Route Leg.

It is possible to show contextual information on the start or end points of the rendered path of a route segment by configuring the directions renderer to look for nearby Locations or POIs.

This is done by creating an appropriate MPDirectionsRendererContextualInfoSettings object and passing it to the directions renderer. If the contextualInfoSettings property is not set, no contextual information will be searched for and shown.

class MPDirectionsRendererContextualInfoSettings {
    // The Types of Location that should be used when showing text and icon for a start or end marker.
    // If no Types are supplied, all Types of Locations will be considered.
    var types: [String]?

    // The Categories of Location that should be used when showing text and icon for a start or end marker.
    // If no Categories are supplied, all Categories of Locations will be considered.
    var categories: [String]?

    // The maximum distance in meters allowed for using text and icon from a Location. Leave blank for a default of 5 meters.
    var maxDistance: Double

    // Which content should be used. Default is IconAndName.
    var contentScope: MPDirectionsRendererContextualInfoScope
}

Possible values for contentScope are IconAndName (default), IconOnly, or NameOnly as defined in MPDirectionsRendererContextualInfoScope.

This is an example of how to show information about Locations of Type "Entry" within 20 meters from the route, with both an icon and the name:

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

Controlling the Visible Segments on the Directions Renderer

Reacting to Label Tapping

Show Content of Nearby Locations

​
​
​
Directions Service
Getting Started
Wayfinding Translations