map-create.md

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

Create a map

This article shows you ways to create a map and animate a map.

Understand the code

There are two ways you can construct a map. You can set the camera of the map by specifying the center point and zoom level or you can set the camera bounds of the map by specifying the southwest and northeast bounding points.

Set the camera

<iframe height='500' scrolling='no' title='Create a map via CameraOptions' src='//codepen.io/azuremaps/embed/qxKBMN/?height=543&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Create a map via `CameraOptions` by Azure Location Based Services (@azuremaps) on CodePen. </iframe>

In the code above, a Map object is created via new atlas.Map() and the center and zoom are set. Map properties such as center and zoom level are part of CameraOptions.

Set the camera bounds

<iframe height='500' scrolling='no' title='Create a map via CameraBoundsOptions' src='//codepen.io/azuremaps/embed/ZrRbPg/?height=543&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Create a map via `CameraBoundsOptions` by Azure Maps (@azuremaps) on CodePen. </iframe>

In the code above, a Map object is constructed via new atlas.Map(). Map properties such as CameraBoundsOptions can be defined via setCamera function of the Map class. Bounds and padding properties are set using setCamera.

Animate map view

<iframe height='500' scrolling='no' title='Animate Map View' src='//codepen.io/azuremaps/embed/WayvbO/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Animate Map View by Azure Maps (@azuremaps) on CodePen. </iframe>

In the code above, the first code block creates a Map object via new atlas.Map(). Map properties such as center and zoom level are part of CameraOptions. CameraOptions can be defined in the Map constructor or via setCamera function of the Map class. The map style is set to road.

The second code block creates an animate map function, which animates change in map view by defining AnimationOptions via setCamera function. The function is triggered by the 'Animate Map' button to generate a random zoom level upon each click.

Try out the code

Take a look at the sample code above. You can edit the JavaScript code on the JS tab on the left and see the map view changes on the Result tab on the right. You can also click on the Edit on CodePen button and edit the code in CodePen.

Next steps

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

[!div class="nextstepaction"] Map

See code examples to add functionality to your app:

[!div class="nextstepaction"] Choose a map style

[!div class="nextstepaction"] Add map controls