Display Rules

Last updated: 6/14/2023

What are Display Rules

In this guide you will be introduced to the concept of Display Rules and how you can use Display Rules to change how Locations (POIs, Rooms and Areas) are displayed on the map.

The MapsIndoors CMS is used to control the initial appearance of Locations. However, the Display Rules—and thereby the appearance of Locations—can be changed from the application at runtime. This gives the application the power to change Locations based on events in the app.

Display Rule Hierarchy

In each MapsIndoors SDK, a "Main Display Rule" outlines a list of sensible defaults for all geodata. Each Location Type inherits its values from this Main Display Rule, unless the value is specifically overriden.

Each Location (Room, Area or POI) uses the Display Rule from the Type, except for values that are specifically set for the individual Location.

Here's a visualization of the inheritance principle (click to view larger version):

As an example, you might want all polygons to be red. However, the Location Type for "Meeting Room" specifies that their polygons should be blue, while the "Executive Meeting Room" Location specifically has an orange polygon.

No matter what is specified in this hierarchy, you can override it at runtime in your app. That means, as an example, that all matches for a specific search query can be specified to have a polygon color that is pink, regardless of what exisits in the defaults, on their Types, and for those Locations specifically.

To remove a value from the Display Rule (to make it inherit from further up the hierarchy) set the proptery to null.

⚠️ For Android SDK v3, you can not change Display Rules at runtime on the Location Types level to inherit for all Locations of that Type. To apply styling to all Locations of a Type, you need to filter all Locations of that Type, and update their Display Rules individually.

Display Rule Properties

A Display Rule could look like this:

{
  "displaySetting": {
    "visible": true,
    "iconVisible": true,
    "zoomFrom": 16.0,
    "zoomTo": 22.0,
    "icon": "https://app.mapsindoors.com/mapsindoors/cms/assets/icons/misc/default-marker.png?71488",
    "iconScale": 1.0,
    "iconSize": {
        "width": 20.0,
        "height": 20.0
    },
    "labelVisible": true,
    "label": "",
    "labelZoomFrom": 16.0,
    "labelZoomTo": 22.0,
    "labelMaxWidth": 0,
    "polygon": {
        "visible": false,
        "zoomFrom": 18,
        "zoomTo": 22,
        "strokeWidth": 2.0,
        "strokeColor": "#3071D9",
        "strokeOpacity": 1.0,
        "fillColor": "#3071D9",
        "fillOpacity": 0.2
    },
}

All properties are optional.

How to Use Display Rules in Practice in iOS SDK

See the iOS guide to Map Styling.

How to Use Display Rules in Practice in JS SDK

See the JS SDK guide to Using Display Rules in Practice.