DEV Community

axurcio
axurcio

Posted on • Originally published at insight-services-apac.github.io on

Azure Maps

As the topic suggests, Azure Maps is the geospatial Platform-as-a-Service (PaaS) service provided by Microsoft.

It is part of their cloud computing offering, Azure.

Pricing

With Microsoft cloud offering, the OPEX 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.

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, 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]]
}

Enter fullscreen mode Exit fullscreen mode

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'
    ]

Enter fullscreen mode Exit fullscreen mode

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.

Considerations also has to be taken when rendering pins. There will be a performance hit 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!

Top comments (0)