React Wrapper for Azure Maps
npm install react-azure-mapsThis 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+
Use the package manager npm or yarn
``bash`
npm install react-azure-maps
or
`bash`
yarn add react-azure-maps
to work properly.
`javascript
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
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 which is stored and implemented in`javascript
AzureMapsProvider
` which is stored and implemented in`javascript
AzureMapDataSourceProvider
` which is stored and implemented in`javascript
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
Basic Usage
javascript
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 = () => (
);
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.
javascript
// AAD
authOptions: {
authType: AuthenticationType.aad,
clientId: '...',
aadAppId: '...',
aadTenant: '...'
}
`javascript
// 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));
}
}
`javascript
// 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:
bash
- 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"
Pull requests are welcomed. For major changes, please open an issue first to discuss what you would like to change.