title	description	author	ms.author	ms.date	ms.topic	ms.service	ms.custom
Create a map with Azure Maps \| Microsoft Azure Maps	Find out how to add maps to web pages by using the Azure Maps Web SDK. Learn about options for animation, style, the camera, services, and user interactions.	stevemunk	v-munksteve	07/26/2019	conceptual	azure-maps	codepen, devx-track-js

Create a map

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

Loading a map

To load a map, create a new instance of the Map class. When initializing the map, pass a DIV element ID to render the map and pass a set of options to use when loading the map. If default authentication information isn't specified on the atlas namespace, this information will need to be specified in the map options when loading the map. The map loads several resources asynchronously for performance. As such, after creating the map instance, attach a ready or load event to the map and then add any additional code that interacts with the map to the event handler. The ready event fires as soon as the map has enough resources loaded to be interacted with programmatically. The load event fires after the initial map view has finished loading completely.

Tip

You can load multiple maps on the same page. Multiple map on the same page may use the same or different authentication and language settings.

Show a single copy of the world

When the map is zoomed out on a wide screen, multiple copies of the world will appear horizontally. This option is great for some scenarios, but for other applications it's desirable to see a single copy of the world. This behavior is implemented by setting the maps renderWorldCopies option to false.

Map options

When creating a map there, are several different types of options that can be passed in to customize how the map functions as listed below.

CameraOptions and CameraBoundOptions are used to specify the area the map should display.
ServiceOptions are used to specify how the map should interact with services that power the map.
StyleOptions are used to specify the map should be styled and rendered.
UserInteractionOptions are used to specify how the map should reach when the user is interacting with the map.

These options can also be updated after the map has been loaded using the setCamera, setServiceOptions, setStyle, and setUserInteraction functions.

Controlling the map camera

There are two ways to set the displayed area of the map using the camera of a map. You can set the camera options when loading the map. Or, you can call the setCamera option anytime after the map has loaded to programmatically update the map view.

Set the camera

The map camera controls what is displayed in the viewport of the map canvas. Camera options can be passed into the map options when being initialized or passed into the maps setCamera function.

//Set the camera options when creating the map.
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

In the following code, a Map object is created and the center and zoom options are set. Map properties, such as center and zoom level, are part of the CameraOptions.

Set the camera bounds

A bounding box can be used to update the map camera. If the bounding box was calculated from point data, it is often useful to also specify a pixel padding value in the camera options to account for the icon size. This will help ensure that points don't fall off the edge of the map viewport.

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

In the following code, 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

When setting the camera options of the map, animation options can also be set. These options specify the type of animation and duration it should take to move the camera.

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

In the following code, the first code block creates a map and sets the enter and zoom map styles. In the second code block, a click event handler is created for the animate button. When this button is clicked, the setCamera function is called with some random values for the CameraOptions and AnimationOptions.

Request transforms

Sometimes it is useful to be able to modify HTTP requests made by the map control. For example:

Add additional headers to tile requests. This is often done for password protected services.
Modify URLs to run requests through a proxy service.

The service options of the map has a transformRequest that can be used to modify all requests made by the map before they are made. The transformRequest option is a function that takes in two parameters; a string URL, and a resource type string that indicates what the request is used for. This function must return a RequestParameters result.

transformRequest: (url: string, resourceType: string) => RequestParameters

The following example shows how to use this to modify all requests to the size https://example.com by adding a username and password as headers to the request.

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

Try out the code

Look at the code samples. You can edit the JavaScript code inside the JS tab and see the map view changes on the Result tab. You can also click Edit on CodePen, in the top-right corner, and modify the code in CodePen.

Next steps

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

[!div class="nextstepaction"] Map

[!div class="nextstepaction"] CameraOptions

[!div class="nextstepaction"] AnimationOptions

See code examples to add functionality to your app:

[!div class="nextstepaction"] Change style of the map

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

[!div class="nextstepaction"] Code samples

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Files

map-create.md

map-create.md

Create a map

Loading a map

Show a single copy of the world

Map options

Controlling the map camera

Set the camera

Set the camera bounds

Animate map view

Request transforms

Try out the code

Next steps

Files

map-create.md

Latest commit

History

map-create.md

File metadata and controls

Create a map

Loading a map

Show a single copy of the world

Map options

Controlling the map camera

Set the camera

Set the camera bounds

Animate map view

Request transforms

Try out the code

Next steps