Implement dynamic styling for Creator (Preview) indoor maps

Important

Azure Maps Creator services are currently in public preview. This preview version is provided without a service level agreement, and it's not recommended for production workloads. Certain features might not be supported or might have constrained capabilities. For more information, see Supplemental Terms of Use for Microsoft Azure Previews.

Azure Maps Creator Feature State service lets you apply styles 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. In this article, we'll show you 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 (Preview) 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

Once 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'll 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). Datasets can be queried using the WFS API. 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 given facility and floor level.

  • Implement customized code that allows a user to select features on a map using your web application. In this article, we'll make use of this option.

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 below your Indoor Manager code block. Run your application and 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, "indoor");

    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. while office UNIT27 will be set to false.

Set occupancy status

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

  1. In the Postman application, select New. In the Create New window, select Request. Enter a Request name and select a collection. Click Save

  2. Use the Feature Update States API to update the state. Pass the stateset ID, and UNIT26 for one of the two units. Append your Azure Maps subscription key. Here's the URL of a POST request to update the state:

    https://atlas.microsoft.com/featureState/state?api-version=1.0&statesetID={statesetId}&featureID=UNIT26&subscription-key={Azure-Maps-Primary-Subscription-key}
    
  3. In the Headers of the POST request, set Content-Type to application/json. In the BODY of the POST request, write the following raw JSON with the feature updates. 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. Pass the "occupied" keyName to update its value.

    {
        "states": [
            {
                "keyName": "occupied",
                "value": true,
                "eventTimestamp": "2019-11-14T17:10:20"
            }
        ]
    }
    
  4. Redo step 2 and 3 using UNIT27, with the following JSON.

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

Visualize dynamic styles on a map

The web application you previously opened in a browser should now reflect the updated state of the map features. UNIT27(142) should appear green and UNIT26(143) should appear red.

Free room in green and Busy room in red

See live demo

Next steps

Learn more by reading:

See to the references for the APIs mentioned in this article: