map-add-bubble-layer.md

title	description	author	ms.author	ms.date	ms.topic	ms.service	ms.custom
Add a Bubble layer to a map | Microsoft Azure Maps	Learn how to render points on maps as circles with fixed sizes. See how to use the Azure Maps Web SDK to add and customize bubble layers for this purpose.	stevemunk	v-munksteve	07/29/2019	conceptual	azure-maps	codepen, devx-track-js

Add a bubble layer to a map

This article shows you how to render point data from a data source as a bubble layer on a map. Bubble layers render points as circles on the map with a fixed pixel radius.

Tip

Bubble layers by default will render the coordinates of all geometries in a data source. To limit the layer such that it only renders point geometry features set the filter property of the layer to ['==', ['geometry-type'], 'Point'] or ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] if you want to include MultiPoint features as well.

Add a bubble layer

The following code loads an array of points into a data source. Then, it connects the data points are to a bubble layer. The bubble layer renders the radius of each bubble with five pixels and a fill color of white. And, a stroke color of blue, and a stroke width of six pixels.

//Add point locations.
var points = [
    new atlas.data.Point([-73.985708, 40.75773]),
    new atlas.data.Point([-73.985600, 40.76542]),
    new atlas.data.Point([-73.985550, 40.77900]),
    new atlas.data.Point([-73.975550, 40.74859]),
    new atlas.data.Point([-73.968900, 40.78859])
];

//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);

//Add multiple points to the data source.
dataSource.add(points);

//Create a bubble layer to render the filled in area of the circle, and add it to the map.
map.layers.add(new atlas.layer.BubbleLayer(dataSource, null, {
    radius: 5,
    strokeColor: "#4288f7",
    strokeWidth: 6, 
    color: "white" 
}));

Below is the complete running code sample of the above functionality.

<iframe height='500' scrolling='no' title='BubbleLayer DataSource' src='//codepen.io/azuremaps/embed/mzqaKB/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen BubbleLayer DataSource by Azure Maps (@azuremaps) on CodePen. </iframe>

Show labels with a bubble layer

This code shows you how to use a bubble layer to render a point on the map. And, how to use a symbol layer to render a label. To hide the icon of the symbol layer, set the image property of the icon options to 'none'.

<iframe height='500' scrolling='no' title='MultiLayer DataSource' src='//codepen.io/azuremaps/embed/rqbQXy/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen MultiLayer DataSource by Azure Maps (@azuremaps) on CodePen. </iframe>

Customize a bubble layer

The Bubble layer only has a few styling options. Here is a tool to try them out.

<iframe height='700' scrolling='no' title='Bubble Layer Options' src='//codepen.io/azuremaps/embed/eQxbGm/?height=700&theme-id=0&default-tab=result' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen Bubble Layer Options by Azure Maps (@azuremaps) on CodePen. </iframe>

Next steps

Learn more about the classes and methods used in this article:

[!div class="nextstepaction"] BubbleLayer

[!div class="nextstepaction"] BubbleLayerOptions

See the following articles for more code samples to add to your maps:

[!div class="nextstepaction"] Create a data source

[!div class="nextstepaction"] Add a symbol layer

[!div class="nextstepaction"] Use data-driven style expressions

[!div class="nextstepaction"] Code samples