Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Data-Driven Styling - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows some basics around data-driven styling of layers in Azure Maps." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, circle, bubble, layers, data-driven, bubblelayer, geojson, data driven styling" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
var map, datasource;
var testData = [
//Has myRadius and category value.
new[-122.3802, 47.54384]), {
myRadius: 30,
category: 'cat1'
//Has myRadius and category value.
new[-122.1842, 47.61123]), {
myRadius: 40,
category: 'cat2'
//Has radius value (not myRadius), no category. Since the expression doesn't use "radius" this value will be ignored.
new[-122.3514, 47.66606]), {
radius: 25
//Has no myRadius or category value.
new[-122.1601, 47.54059]))
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 10,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Azure Active Directory authentication.
authType: 'anonymous',
clientId: 'c9f2f391-13f1-407b-a4a5-f0a241bacfbf', //Your Azure Active Directory client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Azure Active Directory Token.
var tokenServiceUrl = '';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
//Alternatively, use an Azure Maps key. Get an Azure Maps key at NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//Load the test data.
//Create a layer that defines how to render the shapes in the data source and add it to the map.
map.layers.add(new atlas.layer.BubbleLayer(datasource, null, {
//Define an expression to match on the category property and assign a value based on its color.
color: [
['get', 'category'],
'cat1', 'Purple',
'cat2', 'Green',
//Specify a default color if no match found.
//Define an expression that checks to see if a custom property is defined on a feature, and if it is, use it as the setting for the radius.
radius: [
//Check to see if the feature has a myRadius property.
['has', 'myRadius'],
['get', 'myRadius'],
//Specify a default radius if the feature doesn't have a myRadius property.
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Data-Driven Styling</h1></legend>
This sample shows some basics around data-driven styling of layers in Azure Maps.
Under the covers Azure Maps converts data from a data source into a vector tile layer for better rendering performance.
As part of this, many styling options in the rendering layers support expressions which apply business logic to determine
an options value based on properties on the feature being rendered. All of this happens are render time for better performance.