Default Map Example

That sample will render map with all their maps basic features.

Usage:

AzureMap component should be wrap by AzureMapProvider.

Map must have styled container with specified height.

• AzureMap - Component that contain map canvas

• AzureMapOptions - Props that contain map initial options.
• ServiceOptions - Global properties used in all atlas service requests.
• StyleOptions - The options for the map's style.
• UserInteractionOptions - The options for enabling/disabling user interaction with the map.
• CameraOptions - The options for setting the map control's camera.
• CameraBoundsOptions - The options for setting the bounds of the map control's camera.

Code:

import React from 'react'
import {AzureMap, AzureMapsProvider, IAzureMapOptions} from 'react-azure-maps'
import {AuthenticationType} from 'azure-maps-control'

const option: IAzureMapOptions = {
    authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: // Your subscription key
    },
}

const DefaultMap: React.FC = () => (
    <div style={{height: '300px'}}>
        <AzureMapsProvider>
            <AzureMap options={option}>
            </AzureMap>
        </AzureMapsProvider>
    </div>
)
export default DefaultMap