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
      • Location Types
      • Categories
      • 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
        • Categories
      • 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
    • Map Design
      • Map Design System
      • Using a Custom Mapbox MapStyle
      • 2D Models
    • 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
  • Style the Map using Display Rules on iOS​
  • Style the Map using Google Maps Styling​

Was this helpful?

Export as PDF
  1. SDKS & Frameworks
  2. iOS

Display Rules in Practice

iOS v4

Last updated 6 months ago

Was this helpful?

here are two ways to change the appearance of the map content in MapsIndoors and Google Maps.

  • Using Display Rules

  • Using Google Maps styling (or Mapbox for Android and Web)

Each has its own purpose which will be explained below.

Style the Map using Display Rules on iOS

In the you can set display rules for the different types of locations in your MapsIndoors content. The changes you make in the CMS will take effect whenever your app reloads or when you call MPMapsIndoors.shared.synchronise() within the app session.

A Display Rule encapsulates both what, how and when a Location should be displayed on the map. A Location is presented on the map using a combination of icon, text and polygon. Each of these can appear at different, independent ranges of zoom-levels. For example a venue can appear as a marker-icon on low zoom-levels, when zooming in the venue name can appear, and zooming even more in the venue polygon can appear.

In some cases, you may also want to programmatically set display rules that define when and how to show a location. Display rules are defined in a Display Rule object. These Display Rule objects are tied to a solution, and can be modified at runtime.

You can modify display rules programatically in multiple ways depending on your use case:

  • Modify the Display Rule for the Selected Location

  • Set a Display Rule for a type of Location

  • Set a Display Rule for a single specific Location

  • Set a Display Rule for multiple Locations

Modify the Display Rule for the Selected Location

When a Location is selected it is highlighted using the Display Rule found through MPMapsIndoors.shared.displayRuleFor(displayRuleType: .selectionHighlight). You can change the values of the Display Rule like any other DisplayRule.

let selectionDisplayRule = MPMapsIndoors.shared.displayRuleFor(displayRuleType: .selectionHighlight)
selectionDisplayRule?.polygonStrokeColor = .blue
selectionDisplayRule?.polygonFillColor = .green
selectionDisplayRule?.polygonStrokeWidth = 8

To set new display rules for a type of Locations, you need to know the types of Locations in your Location dataset, so you may look these up in the CMS. The types can also be retrieved in code with MPMapsIndoors.shared.solution.types. The display rule name corresponds to the Location Type we want the rule to apply for. So in order to style a specific type of Location differently, just put in the type name as the Display Rule name.

if let infoDisplayRule = MPMapsIndoors.shared.displayRuleFor(type: "Office") {
    infoDisplayRule.icon = UIImage(named : "office")
    infoDisplayRule.zoomFrom = 17
}

To set new display rules for a Location, you need to have the Location at hand. Locations can be fetched e.g. using MPMapsIndoors.shared.locationWith(locationId:). Once you have a location, you can set a custom display rule for it.

let myLocation = MPMapsIndoors.shared.locationWith(locationId: "MyLocationId")
let myDisplayRule = MPMapsIndoors.shared.displayRuleFor(location: myLocation)
myDisplayRule.icon = myImage
myDisplayRule.zoomFrom = 15

For multiple Locations, you can fetch a list of Locations using locationsWith(query:filter:):

let query = MPQuery()
query.query = "lounge"
let locations = await MPMapsIndoors.shared.locationsWith(query: query, filter: MPFilter())
for location in locations {
    let dr = MPMapsIndoors.shared.displayRuleFor(location: location)
    dr?.icon = UIImage(named: "chair")
}

To present a polygon, either configure the Display Rule using the CMS, or configure a Display Rule programatically:

let polygonDisplayRule = MPMapsIndoors.shared.displayRuleFor(type: "Office")
polygonDisplayRule?.polygonVisible = true
polygonDisplayRule?.polygonZoomFrom = 12
polygonDisplayRule?.polygonZoomTo = 21
polygonDisplayRule?.polygonStrokeWidth = 2
polygonDisplayRule?.polygonStrokeColor = .yellow
polygonDisplayRule?.polygonFillColor = .yellow.withAlphaComponent(0.45)

MapsIndoors is built on top of Google Maps or Mapbox which each have their own way of styling the map. Google Maps styling will only affect the MapsIndoors map if Google Maps has Points of Interest placed inside or near the buildings that you build a MapsIndoors solution for. By default, MapsIndoors applies a Google Maps styling that hides most POI icons that may collide with MapsIndoors content.

You can apply your own styling to Google Maps using mapStyle on GMSMapView.

myGoogleMapView.mapStyle = GMSMapStyle(jsonString: myStyleJSON)

Setting Display Rule for a Type

Setting Display Rule for a Single and Multiple Locations

Presenting Locations Using Polygons

Style the Map using Google Maps Styling

The JSON string that you apply in this case can be built using the . Read more about styling the Google Map in the .

​
MapsIndoors CMS
​
​
​
​
​
Google Maps Styling Wizard
Google Maps iOS SDK Docs