title	description	author	ms.author	ms.date	ms.topic	ms.service	ms.custom
Add a polygon layer to a map \| Microsoft Azure Maps	Learn how to add polygons or circles to maps. See how to use the Azure Maps Web SDK to customize geometric shapes and make them easy to update and maintain.	stevemunk	v-munksteve	07/29/2019	conceptual	azure-maps	codepen, devx-track-js

Add a polygon layer to the map

This article shows you how to render the areas of Polygon and MultiPolygon feature geometries on the map using a polygon layer. The Azure Maps Web SDK also supports the creation of Circle geometries as defined in the extended GeoJSON schema. These circles are transformed into polygons when rendered on the map. All feature geometries can easily be updated when wrapped with the atlas.Shape class.

Use a polygon layer

When a polygon layer is connected to a data source and loaded on the map, it renders the area with Polygon and MultiPolygon features. To create a polygon, add it to a data source, and render it with a polygon layer using the PolygonLayer class.

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

//Create a rectangular polygon.
dataSource.add(new atlas.data.Feature(
    new atlas.data.Polygon([[
        [-73.98235, 40.76799],
        [-73.95785, 40.80044],
        [-73.94928, 40.7968],
        [-73.97317, 40.76437],
        [-73.98235, 40.76799]
    ]])
));

//Create and add a polygon layer to render the polygon to the map, below the label layer.
map.layers.add(new atlas.layer.PolygonLayer(dataSource, null,{
    fillColor: 'red',
    fillOpacity: 0.7
}), 'labels');

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

Use a polygon and line layer together

A line layer is used to render the outline of polygons. The following code sample renders a polygon like the previous example, but now adds a line layer. This line layer is a second layer connected to the data source.

Fill a polygon with a pattern

In addition to filling a polygon with a color, you may use an image pattern to fill the polygon. Load an image pattern into the maps image sprite resources and then reference this image with the fillPattern property of the polygon layer.

Tip

The Azure Maps web SDK provides several customizable image templates you can use as fill patterns. For more information, see the How to use image templates document.

Customize a polygon layer

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

Add a circle to the map

Azure Maps uses an extended version of the GeoJSON schema that provides a definition for circles, as noted here. A circle is rendered on the map by creating a Point feature. This Point has a subType property with a value of "Circle" and a radius property with a number that represents the radius in meters.

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-122.126986, 47.639754]
    },
    "properties": {
        "subType": "Circle",
        "radius": 100
    }
}

The Azure Maps Web SDK converts these Point features into Polygon features. Then, these features are rendered on the map using polygon and line layers as shown in the following code sample.

Make a geometry easy to update

A Shape class wraps a Geometry or Feature and makes it easy to update and maintain these features. To instantiate a shape variable, pass a geometry or a set of properties to the shape constructor.

//Creating a shape by passing in a geometry and a object containing properties.
var shape1 = new atlas.Shape(new atlas.data.Point[0,0], { myProperty: 1 });

//Creating a shape using a feature.
var shape2 = new atlas.Shape(new atlas.data.Feature(new atlas.data.Point[0,0], { myProperty: 1 });

The following code sample shows how to wrap a circle GeoJSON object with a shape class. As the value of the radius changes in the shape, the circle renders automatically on the map.

Next steps

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

[!div class="nextstepaction"] Polygon

[!div class="nextstepaction"] PolygonLayer

[!div class="nextstepaction"] PolygonLayerOptions

For more code examples to add to your maps, see the following articles:

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

[!div class="nextstepaction"] Add a popup

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

[!div class="nextstepaction"] How to use image templates

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

Additional resources:

[!div class="nextstepaction"] Azure Maps GeoJSON specification extension

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Files

map-add-shape.md

map-add-shape.md

Add a polygon layer to the map

Use a polygon layer

Use a polygon and line layer together

Fill a polygon with a pattern

Customize a polygon layer

Add a circle to the map

Make a geometry easy to update

Next steps

Files

map-add-shape.md

Latest commit

History

map-add-shape.md

File metadata and controls

Add a polygon layer to the map

Use a polygon layer

Use a polygon and line layer together

Fill a polygon with a pattern

Customize a polygon layer

Add a circle to the map

Make a geometry easy to update

Next steps