Display Rules in Practice for Web

Last updated:

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

Changing the Appearance When the User Clicks a Location

let selectedPOI;
mapsIndoors.addListener("click", function (poi) {
if (selectedPOI) {
mapsIndoors.setDisplayRule(selectedPOI.id, null);

mapsIndoors.setDisplayRule(poi.id, {
iconSize: { width: 30, height: 30 },

selectedPOI = poi;

Change the Label for All Locations for the Type PRINTER

mapsIndoors.setDisplayRule('PRINTER',  {
label: "Printer: {{ name }}"

Change the Label for a Single Location

mapsIndoors.setDisplayRule('c66dccd480624c428ea5b78d',  {
label: "Printer: {{ name }}"

Apply the Same Display Rule to Multiple Locations

mapsIndoors.setDisplayRule(['c66dccd480624c428ea5b780', 'c66dccd480624c428ea5b79c','c66dccd480624c428ea5b76a', ...], {
icon: "https://app.mapsindoors.com/mapsindoors/cms/assets/icons/building-icons/printer.png"

Reset the Display Rule Back to Default

mapsIndoors.setDisplayRule('PRINTER', null);
mapsIndoors.setDisplayRule('c66dccd480624c428ea5b78d', null);
mapsIndoors.setDisplayRule(['c66dccd480624c428ea5b780', 'c66dccd480624c428ea5b79c','c66dccd480624c428ea5b76a', ...], null);