indoor-map-dynamic-styling.md

title	description	author	ms.author	ms.date	ms.topic	ms.service	services
Implement dynamic styling for Azure Maps Creator indoor maps	Learn how to Implement dynamic styling for Creator indoor maps	stevemunk	v-munksteve	10/28/2021	how-to	azure-maps	azure-maps

Implement dynamic styling for Creator indoor maps

You can use Azure Maps Creator Feature State service to apply styles that are based on the dynamic properties of indoor map data features. For example, you can render facility meeting rooms with a specific color to reflect occupancy status. This article describes how to dynamically render indoor map features with the Feature State service and the Indoor Web module.

Prerequisites

1. Create an Azure Maps account
2. Obtain a primary subscription key, also known as the primary key or the subscription key.
3. Create a Creator resource
4. Download the sample Drawing package.
5. Create an indoor map to obtain a tilesetId and statesetId.
6. Build a web application by following the steps in How to use the Indoor Map module.

This tutorial uses the Postman application, but you may choose a different API development environment.

Implement dynamic styling

After you complete the prerequisites, you should have a simple web application configured with your subscription key, tilesetId, and statesetId.

Select features

To implement dynamic styling, a feature - such as a meeting or conference room - must be referenced by its feature id. You use the feature id to update the dynamic property or state of that feature. To view the features defined in a dataset, you can use one of the following methods:

• WFS API (Web Feature service). You can use the WFS API to query datasets. WFS follows the Open Geospatial Consortium API Features. The WFS API is helpful for querying features within a dataset. For example, you can use WFS to find all mid-size meeting rooms of a specific facility and floor level.

• Implement customized code that a user can use to select features on a map using your web application. We use this option in this article.

The following script implements the mouse-click event. The code retrieves the feature id based on the clicked point. In your application, you can insert the code after your Indoor Manager code block. Run your application, and then check the console to obtain the feature id of the clicked point.

/* Upon a mouse click, log the feature properties to the browser's console. */
map.events.add("click", function(e){

    var features = map.layers.getRenderedShapes(e.position, "unit");

    features.forEach(function (feature) {
        if (feature.layer.id == 'indoor_unit_office') {
            console.log(feature);
        }
    });
});

The Create an indoor map tutorial configured the feature stateset to accept state updates for occupancy.

In the next section, we'll set the occupancy state of office UNIT26 to true and office UNIT27 to false.

Set occupancy status

We'll now update the state of the two offices, UNIT26 and UNIT27:

1. In the Postman app, select New.

2. In the Create New window, select HTTP Request.

3. Enter a Request name for the request, such as POST Data Upload.

4. Enter the following URL to the Feature Update States API (replace {Azure-Maps-Primary-Subscription-key} with your primary subscription key and statesetId with the statesetId):

   https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT26?api-version=2.0&subscription-key={Your-Azure-Maps-Primary-Subscription-key}

5. Select the Headers tab.

6. In the KEY field, select Content-Type. In the VALUE field, select application/json.

   :::image type="content" source="./media/indoor-map-dynamic-styling/stateset-header.png"alt-text="Header tab information for stateset creation.":::

7. Select the Body tab.

8. In the dropdown lists, select raw and JSON.

9. Copy the following JSON style, and then paste it in the Body window:

   {
       "states": [
           {
               "keyName": "occupied",
               "value": true,
               "eventTimestamp": "2020-11-14T17:10:20"
           }
       ]
   }

   [!IMPORTANT] The update will be saved only if the posted time stamp is after the time stamp used in previous feature state update requests for the same feature ID.

10. Change the URL you used in step 7 by replacing UNIT26 with UNIT27:

    https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT27?api-version=2.0&subscription-key={Your-Azure-Maps-Primary-Subscription-key}

11. Copy the following JSON style, and then paste it in the Body window:

    {
        "states": [
            {
                "keyName": "occupied",
                "value": false,
                "eventTimestamp": "2020-11-14T17:10:20"
            }
        ]
    }

Visualize dynamic styles on a map

The web application that you previously opened in a browser should now reflect the updated state of the map features:

• Office UNIT27(142) should appear green.
• Office UNIT26(143) should appear red.

See live demo

Next steps

Learn more by reading:

[!div class="nextstepaction"] Creator for indoor mapping

See the references for the APIs mentioned in this article:

[!div class="nextstepaction"] Data Upload

[!div class="nextstepaction"] Data Conversion

[!div class="nextstepaction"] Dataset

[!div class="nextstepaction"] Tileset

[!div class="nextstepaction"] Feature State set

[!div class="nextstepaction"] WFS service