Insight Tech APAC Blog Logo

Azure Maps

Author:
Published: July 28, 2021

4 minutes to read

Tags: azureazuremapsmaps

In this post, I am going to provide some tips and recommendations for working with Azure Maps. If you’re new to Azure Maps, it is Microsoft’s geospatial Platform-as-a-Service (PaaS) offering. If you have experience with Google Maps Platform API or OpenStreetMap you will find many familiar mapping concepts.

It forms part of their cloud computing offering, Azure.

Pricing

With Microsoft’s cloud offering, the consumption model applies. More on their pricing model here. 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 available.

Azure Maps code samples

The following are additional information that were discovered when integrating with Azure Maps.

Single pin cluster

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, 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",
];

Configuring user’s map interaction

For one of my use case, I had to reduce the user’s interaction with the map. This is done to tailor the map to fit with the intended user experience. 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.

Best practices

Considerations also has to be taken when rendering pins. According to Ricky Brundritt, HTML markers are a suitable choice for maps where there are less than 1000 pins and the Bubble Layer utilises the GPU or canvas and supports hundreds of thousands of points. More on best practices from Microsoft Azure Maps can be found here

Happy Azure Mapping!