Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
108 lines (93 sloc) 5.21 KB
<!DOCTYPE html>
<title>Data-Driven Bubble Layer Styling - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<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 how to use data-driven styles on a BubbleLayer to define the radius and color of each circle based on the magnitude of each data point." />
<meta name="keywords" content="map, gis, API, SDK, circle, bubble, layer, data-driven, bubblelayer, geojson, data driven styling, weather, earthquakes, USGS" />
<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;
//GeoJSON feed of significant earthquakes from the past 30 days. Sourced from the USGS.
var earthquakeFeed = '';
//Find more earthquake data feeds here:
function GetMap() {
//Add your Azure Maps s
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-180, 0],
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at
authOptions: {
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 earthquake data.
//Create a layer that defines how to render the shapes in the data source and add it to the map.
new atlas.layer.BubbleLayer(datasource, 'earthquake-circles', {
//Bubbles are made semi-transparent.
opacity: 0.75,
//Color of each bubble based on the value of "mag" property using a color gradient of green, yellow, orange, and red.
color: [
['get', 'mag'],
0, 'green',
5, 'yellow',
6, 'orange',
7, 'red'
* Radius for each data point scaled based on the value of "mag" property.
* When "mag" = 0, radius will be 2 pixels.
* When "mag" = 8, radius will be 40 pixels.
* All other "mag" values will be a linear interpolation between these values.
radius: [
['get', 'mag'],
0, 2,
8, 40
//Create a symbol layer using the same data source to render the magnitude as text above each bubble and add it to the map.
new atlas.layer.SymbolLayer(datasource, 'earthquake-labels', {
iconOptions: {
//Hide the icon image.
image: 'none'
textOptions: {
//An expression is used to concerte the "mag" property value into a string and appends the letter "m" to the end of it.
textField: ['concat', ['to-string', ['get', 'mag']], 'm'],
textSize: 12
<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>Data-Driven Bubble Layer Styling</legend>
This sample shows how to use data-driven styles on a BubbleLayer to define the radius and color of each circle based on the magnitude of each data point.
The data in this sample consists of point based data that represents significant earthquakes that have occurred in the last 30 days.
This data is sourced from the <a href="" target="_blank">USGS Earthquake Hazards Program</a>.
You can’t perform that action at this time.