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

Was this helpful?

Export as PDF

Last updated 1 year 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.

To get an overview of what Display Rules are and can be used for, read the page first.

Style the Map using Display Rules

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 reboots or when you call MapsIndoors.synchroniseContent() 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:

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

  • Modify the Display Rule for the Selected Location

  • Modify the Display Rule for the Building outline

  • Modify a Display Rule for a type of Location

  • Modify a Display Rule for a specific Location

Modify the Display Rule for the Selected Location

When a Location is selected, this Location is highlighted using the Display Rule name found through MPSolutionDisplayRule.SELECTION. You can change the values of the Display Rule like any other DisplayRule.

Setting Display Rule for a Type

To set new display rules for a type of Location, 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 getSolution(). The type objects can be read from getTypes(). You can then retrieve the Display Rule and modify it through MapsIndoors.getDisplayRule(String name).

Setting a display rule for a type will only apply to the single instance of MapControl.

To set new display rules for a single Location, you need to have the Location at hand. Locations can be fetched using getLocationById or searched for through getLocationsAsync. Once you have a location, you can modify the display rule for it.

For multiple Locations, you fetch a list of Locations using getLocationsAsync instead:

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

MapsIndoors is built on top of Google Maps or Mapbox which has its 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. The MapsIndoors styling applies a Google Maps styling that hides most POI icons that may collide with MapsIndoors content. This can be turned on and off through the MPMapConfig.

You can apply your own styling to Google Maps using googleMap.setMapStyle.

When styling the map in Mapbox make sure to add the style on the map before creating MapControl. The style needs to be applied first, to ensure you can add layers onto it to show MapsIndoors data on the map.

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:

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

  • Modify the Display Rule for the Selected Location

  • Modify the Display Rule for the Building outline

  • Modify a Display Rule for a type of Location

  • Modify a Display Rule for a specific Location

When a Location is selected, this Location is highlighted using the Display Rule name found through MPSolutionDisplayRule.SELECTION. You can change the values of the Display Rule like any other DisplayRule.

To set new display rules for a single Location, you need to have the Location at hand. Locations can be fetched using getLocationById or searched for through getLocationsAsync. Once you have a location, you can modify the display rule for it.

Setting a display rule for a type will only apply to the single instance of MapControl.

To set new display rules for a single Location, you need to have the Location at hand. Locations can be fetched using getLocationById. Once you have a location, you can set a custom display rule for it.

For multiple Locations, you fetch a list of Locations using getLocationsAsync instead:

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

MapsIndoors is built on top of Google Maps or Mapbox which has its 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. The MapsIndoors styling applies a Google Maps styling that hides most POI icons that may collide with MapsIndoors content. This can be turned on and off through the MPMapConfig.

You can apply your own styling to Google Maps using googleMap.setMapStyle.

When styling the map in Mapbox make sure to add the style on the map before creating MapControl. The style needs to be applied first, so that we can add layers onto it to show MapsIndoors data on the map.

Setting Display Rule for a Single and Multiple Locations

Presenting Locations Using Polygons

Style the Map using Google Maps Styling

Further documentation on the Google Maps styling can be found here:

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

Style the Map using Mapbox Styling

Further documentation on the Mapbox styling can be found here:

Style the Map using Display Rules with Kotlin

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 reboots or when you call MapsIndoors.synchroniseContent() within the app session.

Modify the Display Rule for the Selected Location

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 with Kotlin

Further documentation on the Google Maps styling can be found here:

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

Style the Map using Mapbox Styling with Kotlin

Further documentation on the Mapbox styling can be found here:

  1. SDKS & Frameworks
  2. Android

Display Rules in Practice

Android v4

MPDisplayRule displayRule = MapsIndoors.getDisplayRule("Office");
if (displayRule != null) {
    displayRule.setIcon(R.drawable.ic_baseline_close_24, Color.BLUE);
}
MPLocation mpLocation = MapsIndoors.getLocationById("MyLocationId");
MPDisplayRule mpDisplayRule = MapsIndoors.getDisplayRule(mpLocation);
if (mpDisplayRule != null) {
    mpDisplayRule.setIcon(R.drawable.ic_baseline_air_24, Color.GRAY);
}
MapsIndoors.getLocationsAsync(null, new MPFilter.Builder().setTypes(Collections.singletonList("Meetingroom")).build(), (locations, miError) -> {
    if (locations != null) {
        for (MPLocation mpLocation : locations) {
            MPDisplayRule mpDisplayRule = MapsIndoors.getDisplayRule(mpLocation);
            if (mpDisplayRule != null) {
                mpDisplayRule.setIcon(R.drawable.ic_baseline_air_24, Color.GRAY);
            }
        }
    }
});
MPDisplayRule mpDisplayRule = MapsIndoors.getDisplayRule("Office");
if (mpDisplayRule != null) {
    mpDisplayRule.setIcon(R.drawable.ic_baseline_close_24, Color.GRAY);
    mpDisplayRule.setPolygonVisible(true);
    mpDisplayRule.setPolygonZoomFrom(12f);
    mpDisplayRule.setPolygonZoomTo(21f);
    mpDisplayRule.setPolygonFillColor("#0000FF");
    mpDisplayRule.setPolygonStrokeColor("#0000FF");
}
googleMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json));
mapboxMap.loadStyleUri(Style.MAPBOX_STREETS);
MapsIndoors.getDisplayRule(MPSolutionDisplayRule.SELECTION)?.polygonStrokeColor = blue
MapsIndoors.getDisplayRule(MPSolutionDisplayRule.SELECTION)?.polygonFillColor = green
MapsIndoors.getDisplayRule(MPSolutionDisplayRule.SELECTION)?.polygonStrokeWidth = 8f
MapsIndoors.getDisplayRule("Office")?.let {
    it.setIcon(R.drawable.ic_baseline_close_24, Color.BLUE)
}
val mpLocation = MapsIndoors.getLocationById("MyLocationId")
MapsIndoors.getDisplayRule(mpLocation)?.setIcon(R.drawable.ic_baseline_air_24, Color.GRAY);
MapsIndoors.getLocationsAsync(null, MPFilter.Builder().setTypes(listOf("Meetingroom")).build()) { locations, _ ->
    for (location in locations) {
        location?.let {
            MapsIndoors.getDisplayRule(it)?.setIcon(R.drawable.ic_baseline_air_24, Color.GRAY)
        }
    }
}
val mpDisplayRule = MapsIndoors.getDisplayRule("Office")
mpDisplayRule?.let {
    it.setIcon(R.drawable.ic_baseline_bolt_24, Color.GRAY)
    it.isPolygonVisible = true
    it.polygonZoomFrom = 12f
    it.polygonZoomTo = 21f
    it.polygonFillColor = "0000FF"
    it.polygonStrokeColor = "0000FF"
}
googleMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json))
mapboxMap.loadStyleUri(Style.MAPBOX_STREETS)ko
MapsIndoors.getDisplayRule(MPSolutionDisplayRule.SELECTION).setPolygonStrokeColor(blue);
MapsIndoors.getDisplayRule(MPSolutionDisplayRule.SELECTION).setPolygonFillColor(green);
MapsIndoors.getDisplayRule(MPSolutionDisplayRule.SELECTION).setPolygonStrokeWidth(8f);
Display Rules
​
MapsIndoors CMS
​
​
​
​
​
https://developers.google.com/maps/documentation/android-sdk/styling
Google Maps Styling Wizard
Google Maps Android SDK Docs
​
https://docs.mapbox.com/android/maps/guides/styles/set-a-style/
​
MapsIndoors CMS
​
​
​
​
​
https://developers.google.com/maps/documentation/android-sdk/styling
Google Maps Styling Wizard
Google Maps Android SDK Docs
​
https://docs.mapbox.com/android/maps/guides/styles/set-a-style/