Azure Maps Dynamic Styling dosnt work

Question

Azure Maps Dynamic Styling dosnt work

David Schmidt 11

Hello Guys, we are trying now for a couple of days to get Azure Maps Service running. We have a Customer which want to use it an productiv way. For that we have to implement an small POC.

But we have a Problem with changing the Color of rooms inside of the HTML View. Following the basic tutorial didnt work(tutorial). The console inside of the browser dosnt show any error.

Uploading an sample of the index.html inside of the question dosnt work.

Note inside of the HTML: we have set the Options for the EU scope of Azure Maps, also an stateset is given and the setDynamicStyling function is set to true. The subscriptionKey is set staticly. I looked through the other posts inside of Q&A of which none was solving the problem for me.

Checking the API via

   https://eu.atlas.microsoft.com/featureStateSets?subscription-key=xxx&api-version=2.0

through Postman provides following Stateset:

   "statesetId": "xxx",  
               "datasetIds": [  
                   "xxx"  
               ],  
               "statesetStyle": {  
                   "styles": [  
                       {  
                           "keyName": "occupied",  
                           "type": "boolean",  
                           "rules": [  
                               {  
                                   "true": "#FF0000",  
                                   "false": "#00FF00"  
                               }  
                           ]  
                       }  
                   ]  
               },  
               "description": ""

So the stateset is mapped to the proper dataset.

The state was set via:

   https://eu.atlas.microsoft.com/featurestatesets/xxx/featureStates/UNIT26?api-version=2.0&subscription-key=xxx

the request body is:

   {  
       "states": [  
           {  
               "keyName": "occupied",  
               "value": true,  
               "eventTimestamp": "2021-12-17T05:10:20"  
           }  
       ]  
   }

checking the state with:

   https://eu.atlas.microsoft.com/featureStateSets/xxx/featureStates/UNIT26?subscription-key=xxx&api-version=2.0

the response for unit26 is:

   {  
       "states": [  
           {  
               "keyName": "occupied",  
               "value": true,  
               "eventTimestamp": "2021-12-17T05:10:20"  
           }  
       ]  
   }

After checking all the things there is no point of failure which i can see. Can you guys please check if you can reproduce the error?

António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2021-12-20T11:48:06.373+00:00

Hello @David Schmidt can you confim that the sample is working well in your browser? https://azuremapscodesamples.azurewebsites.net/Tutorials/Creator%20indoor%20maps.html

And you are using the sample code as is?: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Tutorials/Creator%20indoor%20maps.html

Thanks
David Schmidt 11 Reputation points

2021-12-20T12:33:55.117+00:00
Hello @António Sérgio Azevedo , thanks for the reply. Yes i can confirm that the first sample is working inside of the browser.

To the second point. Here i used a diffrent sample. Its from the tutorial of azure docs, and its addition for adding dynamic styling. This code didnt work as expected. Note: We added the option for geography in the EU here. In addition to that we used an static Subscription Key.

Using the code which your provided, shows the Map after adding the geography option for the EU here (still no styling applied). But the console shows some errors here. It tries to speak with the us version of azure maps even though we added the geography option. It also tries to access something over the API 1.0 version. Thats for example one of the HTTP requests which results in an error:

https://us.atlas.microsoft.com/map/stateTile?statesetId=xxxf&zoom=18&x=42137&y=91518&api-version=1.0&subscription-key=xxx

which returns an 400 Bad Request error.

I uploaded the sample code which i used to this github repo: https://github.com/DavidSchmidt1/AzureMapsExample. It contains your sample(adjusted for EU). And the sample which i used from the docs.

Thanks for your help!
David Schmidt 11 Reputation points

2021-12-20T14:16:06.957+00:00

Also clicking on the Map results in an Error:

The layer 'indoor' has not been added to the map and its rendered features cannot be retrieved.
António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2021-12-21T09:54:49.903+00:00

Thanks for sharing the sample. Let me test myself and circle back with Product Team as well.

1 answer

Your answer

António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2021-12-20T11:48:06.373+00:00

Hello @David Schmidt can you confim that the sample is working well in your browser? https://azuremapscodesamples.azurewebsites.net/Tutorials/Creator%20indoor%20maps.html

And you are using the sample code as is?: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Tutorials/Creator%20indoor%20maps.html

Thanks
David Schmidt 11 Reputation points

2021-12-20T12:33:55.117+00:00

Hello @António Sérgio Azevedo , thanks for the reply. Yes i can confirm that the first sample is working inside of the browser.

To the second point. Here i used a diffrent sample. Its from the tutorial of azure docs, and its addition for adding dynamic styling. This code didnt work as expected. Note: We added the option for geography in the EU here. In addition to that we used an static Subscription Key.

Using the code which your provided, shows the Map after adding the geography option for the EU here (still no styling applied). But the console shows some errors here. It tries to speak with the us version of azure maps even though we added the geography option. It also tries to access something over the API 1.0 version. Thats for example one of the HTTP requests which results in an error:

https://us.atlas.microsoft.com/map/stateTile?statesetId=xxxf&zoom=18&x=42137&y=91518&api-version=1.0&subscription-key=xxx

which returns an 400 Bad Request error.

I uploaded the sample code which i used to this github repo: https://github.com/DavidSchmidt1/AzureMapsExample. It contains your sample(adjusted for EU). And the sample which i used from the docs.

Thanks for your help!
David Schmidt 11 Reputation points

2021-12-20T14:16:06.957+00:00

Also clicking on the Map results in an Error:

The layer 'indoor' has not been added to the map and its rendered features cannot be retrieved.
António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2021-12-21T09:54:49.903+00:00

Thanks for sharing the sample. Let me test myself and circle back with Product Team as well.

Answer 1

David Schmidt 11

Hi asergaz,

we have found a workaround for the problem. After analyzing the code, we noticed requests that access the American servers despite the changed geography. Now that we have moved everything to the US servers, the dynamic styling works. My guess is that it is related to the SDK which wants to retrieve the style via the American servers, but this fails because the Azure Maps resource is in the European scope.

Thanks for your help!

António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2022-01-06T00:36:44.03+00:00

Hello @David Schmidt , thank you so much for sharing the workaround with rest of the community. I have converted your comment to answer.

Let us know if you face the issue again and I will escalate this to Product Team.

Regards!

Share via

Azure Maps Dynamic Styling dosnt work

1 answer

Your answer