React-Azure-Maps

This project is community-driven initiative originally created by amazing @psrednicki, @msasinowski and @tbajda and is now maintained by the Azure Maps team.

React Azure Maps is a react wrapper for Azure Maps. The whole library is written in typescript and uses React 16.8+

Installation

Use the package manager npm or yarn

npm install react-azure-maps

yarn add react-azure-maps

Styling

Embed the following css to your application. The stylesheet is required for the marker, popup and control components in react-azure-maps to work properly.

import 'azure-maps-control/dist/atlas.min.css'

Documentation

Documentation is available Documentation

Generated documentation from typedoc is available Documentation

Compatibility with azure-maps-controls

1.0.0 - 3.0.0
0.2.0 - 2.0.32
0.1.4 - 2.0.31
0.1.3 - 2.0.25

Playground

React Azure Maps have a fully documented Playground Package that implements a lot of features from Azure Maps Code Samples. If you implement new usage of the map and want to be contributor just create a PR.

Library Implementation Details

For typescript integration and core functionalities, this library uses the newest version of Azure Maps Control. The library is implemented under the hood on Contexts and uses all benefits of new react features, like new context API, hooks, etc. Across the whole library, there are three main references that depend on the basic Azure Maps API

MapReference which is stored and implemented in

AzureMapsProvider

DataSourceReference which is stored and implemented in

AzureMapDataSourceProvider

LayerReference which is stored and implemented in

AzureMapLayerProvider

If you want to directly make some changes in the above refs just use one of these contexts and feel free to use it any way you want. The library implements a lot of ready to use components like AzureMapFeature, AzureMapHTMLMarker, AzureMapPopup

Basic Usage

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

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

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

export default DefaultMap

Authentication

The subscription key is intended for development environments only and must not be utilized in a production application. Azure Maps provides various authentication options for applications to use. See here for more details.

// AAD
authOptions: {
    authType: AuthenticationType.aad,
    clientId: '...',
    aadAppId: '...',
    aadTenant: '...'
}

// Anonymous
authOptions: {
    authType: AuthenticationType.anonymous,
    clientId: '...',
    getToken: (resolve, reject) => {
        // URL to your authentication service that retrieves an Azure Active Directory Token.
        var tokenServiceUrl = "https://example.com/api/GetAzureMapsToken";
        fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
    }
}

// SAS Token
authOptions: {
    authType: AuthenticationType.sas,
    getToken: (resolve, reject) => {
        // URL to your authentication service that retrieves a SAS Token.
        var tokenServiceUrl = "https://example.com/api/GetSASToken";
        fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
    }
}

Local development with Playground Package

If you want to do some local development using Playground Package with local link to the package, you need to make the following steps:

- run yarn watch in `react-azure-maps` package
- run yarn link in `react-azure-maps` package
- go to the `azure-maps-playground` or any other folder or repository and run `yarn link "react-azure-maps"`