title	description	author	ms.author	ms.date	ms.topic	ms.service	services	manager	ms.custom
Add a shape with Azure Maps \| Microsoft Docs	How to add a shape to a Javascript map	jingjing-z	jinzh	10/30/2018	conceptual	azure-maps	azure-maps		codepen

Add a shape to a map

This article shows you how to add a Shape to the map and update properties of an existing shape on the map.

Add a line

The first block of code in the code above constructs a Map object. You can see create a map for instructions.

In the second block of code, a data source object is created using the DataSource class. A LineString object is created and added to the data source.

A LineLayer renders line objects wrapped in the DataSource. The last block of code creates and adds a line layer to the map. See properties of a line layer at LineLayerOptions. The data source and the line layer are created and added to the map within the event listener function to ensure that the line is displayed after the map loads fully.

Customize a line layer

The Line layer several styling options. Here is a tool to try them out.

Add a circle

The first block of code in the code above constructs a Map object. You can see create a map for instructions.

In the second block of code, a data source object is created using the DataSource class. A circle is a Feature of Point and has a subType property set to "circle" and a radius property value meters. When a Point feature with a subType of circle is added to a data source, it converts it into a circular polygon within the map.

A PolygonLayer renders data wrapped in the DataSource on the map. The last block of code creates and adds a polygon layer to the map. See properties of a polygon layer at PolygonLayerOptions. The data source and the polygon layer are created and added to the map within the event listener function to ensure that the circle is displayed after the map loads fully.

Add a polygon

There are two different ways you can add a polygon to the map. Both are explained in the following examples.

Use polygon layer

In the code above, the first block of code constructs a Map object. You can see create a map for instructions.

In the second block of code, a data source object is created using the DataSource class. A Polygon is created from an array of coordinates and added to the data source.

A PolygonLayer renders data wrapped in the DataSource on the map. The last block of code creates and adds a polygon layer to the map. See properties of a polygon layer at PolygonLayerOptions. The data source and the polygon layer are created and added to the map within the event listener function to ensure that the polygon is displayed after the map loads fully.

Use polygon and line layer

In the code above, the first block of code constructs a Map object. You can see create a map for instructions.

In the second block of code, a data source object is created using the DataSource class. A Polygon is created from an array of coordinates and added to the data source.

A PolygonLayer renders data wrapped in the DataSource on the map. See properties of a polygon layer at PolygonLayerOptions. A LineLayer is an array of lines. See properties of a line layer at LineLayerOptions. The third block of code creates polygon and line layers.

The last block of code adds the polygon and line layers to the map. The data source and the layers are created and added to the map within the event listener function to ensure that the polygon is displayed after the map loads fully.

Customize a polygon layer

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

Update a shape

A Shape class wraps a Geometry or Feature and makes it easy to update and maintain them. new Shape(data: Feature<data.Geometry, any>) constructs a shape object and initializes it with the specified feature.

The first block of code above constructs a Map object. You can see create a map for instructions.

A point is a Feature of Point the class. The second block of code initializes the radius value for the HTML slider element and then constructs and wraps a point object in a Shape class object.

The third code block creates a function that takes the value from the HTML range slider element and changes the radius value using the shape class addProperty method.

In the fourth block of code, a data source object is created using the DataSource class. The point is then added to data source.

A PolygonLayer renders data wrapped in the DataSource on the map. The third block of code creates a polygon layer. See properties of a polygon layer at PolygonLayerOptions. The data source, the click event listener, and the polygon layer are created and added to the map within the event listener function to ensure that the point is displayed after the map loads fully.

Next steps

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

[!div class="nextstepaction"] Add custom HTML

[!div class="nextstepaction"] Show search results

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

map-add-shape.md

map-add-shape.md

Add a shape to a map

Add a line

Customize a line layer

Add a circle

Add a polygon

Use polygon layer

Use polygon and line layer

Customize a polygon layer

Update a shape

Next steps

Files

map-add-shape.md

Latest commit

History

map-add-shape.md

File metadata and controls

Add a shape to a map

Add a line

Customize a line layer

Add a circle

Add a polygon

Use polygon layer

Use polygon and line layer

Customize a polygon layer

Update a shape

Next steps