| 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 |
09/14/2018 |
conceptual |
azure-maps |
azure-maps |
codepen |
This article shows you how to create a map.
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. Set the camera bounds of the map by specifying the southwest bounding point and northeast bounding point.
<iframe height='310' scrolling='no' title='Create a map via CameraOptions' src='//codepen.io/azuremaps/embed/qxKBMN/?height=265&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(). 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.
In the code above, a Map object is constructed via new atlas.Map(). Map properties such as bounding box are part of CameraBoundsOptions. CameraBoundsOptions can be defined via setCameraBounds function of the Map class.
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.
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