Azure Maps
Tags: azure, azuremaps
Published: 2021-11-15 23:06:39

---
title: Azure Maps
published: true
date: 2021-07-28 00:00:00 UTC
tags: Azure,AzureMaps
canonical_url: https://insight-services-apac.github.io/2021/07/28/azure-maps.html
---

As the topic suggests, [Azure Maps](https://azure.microsoft.com/en-us/services/azure-maps/ "Azure Maps") is the geospatial Platform-as-a-Service (PaaS) service provided by [Microsoft](https://www.microsoft.com/ "Microsoft").

It is part of their cloud computing offering, [Azure](https://azure.microsoft.com/ "Azure").

### Pricing

With Microsoft cloud offering, the [OPEX](https://www.myaccountingcourse.com/accounting-dictionary/operating-expenses "OPEX") model applies. More on their pricing model [here](https://azure.microsoft.com/en-us/pricing/details/azure-maps/ "Azure Maps pricing"). The article also describe Azure Map functionality enabled for each pricing tiers.

### Technical offering

The Azure Maps product team at Microsoft has extensive code [samples](https://azuremapscodesamples.azurewebsites.net/ "Azure Map samples") available.

The following are nifty information that are worth knowing when working with Azure Maps.

Out of the box, pin aggregation aka clustering only happens when there are 2 or more pins.

In order to have a single pin show up as a cluster, use the Bubble Layer and apply data-driven layer styling.

The samples do not provide the solution, so after some reading of the [documentation](https://docs.microsoft.com/en-us/azure/azure-maps/data-driven-style-expressions-web-sdk "Azure Map Data Driven Style expression"), here is how.

In order to enable aggregation, set the cluster property of the atlas.source.DataSource object to true.

The data source must contain a property that you want to use to aggregate with. I have used the isCheapest property from my data item in the example below.

Incrementing the Cheapest property within the clusterProperties of the DataSource object accounts for the scenario when 2 or more pins have the cheapest and are within close proximity.

```

cluster: true,
clusterProperties: {
    Cheapest: ['+', ['case', ['==', ['get', 'isCheapest'], true], 1, 0]]
}

```

You will then create a Bubble Layer object and alter its properties.

The example below shows the colour property of the Bubble Layer being set to red when there is a cluster of 1 or more cheapest pins **or** when there is only 1 pin and the isCheapest property of the data item is true. Otherwise, the bubble shown will be black in colour.

```

color: [
        'case',
        ['all', ['has', 'Cheapest'], ['>', ['get', 'Cheapest'], 0]],
        '#ff0000',
        ['all', ['has', 'myDataItem'], ['==', ['get', 'isCheapest'], true]],
        '#ff0000',
        '#000000'
    ]

```

Another nifty information to keep an eye out for is the disabling of pan, rotate and tilt in Azure Maps. By default, the map allows pan, rotate and tilting. Thus to disable them, you will have to set the following map properties.

1. dragRotate : this is for drag event as well as right-click. The \_pitchWithRotate property will disable pitch when rotating. There is also a disabled function to prevent dragging and rotating.
2. touchZoomRotate : this is for touch enabled devices. There is a disableRotation function that you can invoke.
3. touchPitch : this is also for touch enabled devices. Use the disabled function to prevent pitch.

The map also has a setMaxPitch function that you can invoke to set the maximum desired pitch. If you pass in 0, that means the map has no pitch. However, I still encountered undesired map rendering. In order to completely nullify pitch, you can invoke the preventDefault function on pitch events of the map. A full list of map events can be found [here](https://docs.microsoft.com/en-us/azure/azure-maps/map-events "Azure Map Events").

Considerations also has to be taken when rendering pins. There will be a [performance hit](https://azure.microsoft.com/en-us/blog/data-driven-styling-and-more-in-the-latest-azure-maps-web-sdk-update/ "Azure Maps performance consideration") with a liberal use of the addPins function of the map. The recommended approach is to have 1 atlas.source.DataSource object and adding items to it by invoking the add function or removing items from it by invoking the remove function.

Happy Azure Mapping!