Create custom styles for indoor maps (preview)

When you create an indoor map using Azure Maps Creator, default styles are applied. This article discusses how to customize these styling elements.

Prerequisites

Create custom styles using Creators visual editor

While it's possible to modify your indoor maps styles using Creators Rest API, Creator also offers a visual style editor to create custom styles that doesn't require coding. This article will focus exclusively on creating custom styles using this style editor.

Open style

When an indoor map is created in your Azure Maps Creator service, default styles are automatically created for you. In order to customize the styling elements of your indoor map, you'll need to open that default style.

Open the Creator Style Editor and select the Open toolbar button.

A screenshot of the open menu in the visual style editor.

The Open Style dialog box opens.

Enter your subscription key in the Enter your Azure Maps subscription key field.

Next, select the geography associated with your subscription key in the drop-down list.

A screenshot of the open dialog box in the visual style editor.

Select the Get map configuration list button to get a list of every map configuration associated with the active Creator resource.

A screenshot of the open style dialog box in the visual style editor with the Select map configuration drop-down list highlighted.

Note

If the map configuration was created as part of a custom style and has a user provided alias, that alias will appear in the map configuration drop-down list, otherwise the mapConfigurationId will appear. The default map configuration ID for any given tileset can be found by using the tileset Get HTTP request and passing in the tileset ID:

https://{geography}.atlas.microsoft.com/tilesets/{tilesetId}?2022-09-01-preview

The mapConfigurationId is returned in the body of the response, for example:

"defaultMapConfigurationId": "68d74ad9-4f84-99ce-06bb-19f487e8e692"

Once the map configuration drop-down list is populated with the IDs of all the map configurations in your creator resource, select the desired map configuration, then the drop-down list of style + tileset tuples will appear. The style + tileset tuples consists of the style alias or ID, followed by the plus (+) sign then the tilesetId.

Once you've selected the desired style, select the Load selected style button.

About the open style dialog

A screenshot of the Open Style dialog box in the visual style editor, with each edit field numbered, each number correlates to the numbers in the following table.

# Description
1 Your Azure Maps account subscription key
2 Select the geography of the Azure Maps account.
3 A list of map configuration aliases. If a given map configuration has no alias, the mapConfigurationId will be shown instead.
4 This value is created from a combination of the style and tileset. If the style has as alias it will be shown, if not the styleId will be shown. The tilesetId will always be shown for the tileset value.

Modify style

Once your style is open in the visual editor, you can begin to modify the various elements of your indoor map such as changing the background colors of conference rooms, offices or restrooms. You can also change the font size for labels such as office numbers and define what appears at different zoom levels.

Change background color

To change the background color for all units in the specified layer, put your mouse pointer over the desired unit and select it using the left mouse button. You’ll be presented with a popup menu showing the layers that are associated with the categories the unit is associated with. Once you select the layer that you wish to update the style properties on, you’ll see that layer ready to be updated in the left pane.

A screenshot of the unit layer pop-up dialog box in the visual style editor.

Open the color palette and select the color you wish to change the selected unit to.

A screenshot of the color pallet in the visual style editor.

Base map

The base map drop-down list on the visual editor toolbar presents a list of base map styles that affect the style attributes of the base map that your indoor map is part of. It will not affect the style elements of your indoor map but will enable you to see how your indoor map will look with the various base maps.

A screenshot of the base maps drop-down list in the visual editor toolbar.

Save custom styles

Once you have made all of the desired changes to your styles, save the changes to your Creator resource. You can overwrite your style with the changes or create a new style.

To save your changes, select the Save button on the toolbar.

A screenshot of the save menu in the visual style editor.

The will bring up the Upload style & map configuration dialog box:

A screenshot of the upload style and map configuration dialog box in the visual style editor.

The following table describes the four fields you're presented with.

Property Description
Style description A user-defined description for this style.
Style alias An alias that can be used to reference this style.
When referencing programmatically, the style will need to be referenced by the style ID if no alias is provided.
Map configuration description A user-defined description for this map configuration.
Map configuration alias An alias used to reference this map configuration.
When referencing programmatically, the map configuration will need to be referenced by the map configuration ID if no alias is provided.

Some important things to know about aliases:

  1. Can be named using alphanumeric characters (0-9, a-z, A-Z), hyphens (-) and underscores (_).
  2. Can be used to reference the underlying object, whether a style or map configuration, in place of that object's ID. This is especially important since neither the style or map configuration can be updated, meaning every time any changes are saved, a new ID is generated, but the alias can remain the same, making referencing it less error prone after it has been modified multiple times.

Warning

Duplicate aliases are not allowed. If the alias of an existing style or map configuration is used, the style or map configuration that alias points to will be overwritten and the existing style or map configuration will be deleted and references to that ID will result in errors. See map configuration in the concepts article for more information.

Once you have entered values into each required field, select the Upload map configuration button to save the style and map configuration data to your Creator resource.

Tip

Make a note of the map configuration alias value, it will be required when you Instantiate the Indoor Manager of a Map object when developing applications in Azure Maps.

Custom categories

Azure Maps Creator has defined a list of categories. When you create your manifest, you associate each unit in your facility to one of these categories in the unitProperties object.

There may be times when you want to create a new category. For example, you may want the ability to apply different styling attributes to all rooms with special accommodations for people with disabilities like a phone room with phones that have screens showing what the caller is saying for those with hearing impairments.

To do this, enter the desired value in the categoryName for the desired unitName in the manifest JSON before uploading your drawing package.

A screenshot showing the custom category name in the manifest.

Once opened in the visual editor, you'll notice that this category name isn't associated with any layer and has no default styling. In order to apply styling to it, you'll need to create a new layer and add the new category to it.

A screenshot showing the difference in the layers that appear after changing the category name in the manifest.

To create a new layer, select the duplicate button on an existing layer. This creates a copy of the selected layer that you can modify as needed. Next, rename the layer by typing a new name into the ID field. For this example, we entered indoor_unit_room_accessible.

A screenshot the duplicate button in the layers pane in the visual editor toolbar, along with the layer ID showing the name of the new layer that is the same as the original layer with a dash copy added to the end.

Once you've created a new layer, you need to associate your new category name with it. This is done by editing the copied layer to remove the existing categories and add the new one.

For example, the JSON might look something like this:

{
  "id": "indoor_unit_room_accessible",
  "type": "fill",
  "filter": [
    "all",
    ["has", "floor0"],
    [
      "any",
      [
        "case",
        [
          "==",
          [
            "typeof",
            ["get", "categoryName"]
          ],
          "string"
        ],
        [
          "==",
          ["get", "categoryName"],
          "room.accessible.phone"
        ],
        false
      ]
    ]
  ],
  "layout": {"visibility": "visible"},
  "metadata": {
    "microsoft.maps:layerGroup": "unit"
  },
  "minzoom": 16,
  "paint": {
    "fill-antialias": true,
    "fill-color": [
      "string",
      ["feature-state", "color"],
      "rgba(230, 230, 230, 1)"
    ],
    "fill-opacity": 1,
    "fill-outline-color": "rgba(120, 120, 120, 1)"
  },
  "source-layer": "Indoor unit",
  "source": "{tilesetId}"
}

Only features that match the filter are displayed on the map. You need to edit the filter to remove any categories that you don't want to appear on the map and add the new category.

For example, the filter JSON might look something like this:

[
  "all",
  ["has", "floor0"],
  [
    "any",
    [
      "case",
      [
        "==",
        [
          "typeof",
          ["get", "categoryName"]
        ],
        "string"
      ],
      [
        "==",
        ["get", "categoryName"],
        "room.accessible.phone"
      ],
      false
    ]
  ]
]

Now when you select that unit in the map, the pop-up menu will have the new layer ID, which if following this example would be indoor_unit_room_accessible. Once selected you can make style edits.

A screenshot of the pop-up menu showing the new layer appearing when the phone 11 unit is selected.

Next steps