azure / react-azure-maps

React Wrapper for azure-maps-control

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

or

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"`

Code coverage

Contributing

Pull requests are welcomed. For major changes, please open an issue first to discuss what you would like to change.

Creators ✨

psrednicki

msasinowski

tbajda

License

MIT

react-azure-maps's Issues

Maps do not automatically set the width and height of the container

version: 0.4.2
react version: 17.0.2

when initialize, this code's dependence library mapbox-gl[https://github.com/mapbox/mapbox-gl-js/blob/main/src/ui/map.js] use getBoundingClientRect to get container's width and height, but get value 0

this code can solve this problem, but i don't know it is correct

Azure Maps Government Cloud Support

Could you add a way to set the Domain of the Map before the map is rendered if needed. This would allow for usage with the Microsoft Government clouse support.

atlas.setDomain('atlas.azure.us');

https://docs.microsoft.com/en-us/azure/azure-maps/how-to-use-map-control#azure-government-cloud-support

While using react app for azure for locator.It is showing at coordinates[0,0]

I have created LocationMarker.js to import the symbol and expect it to be displayed on the coordinates given by in Map.js..(ie) following code. But by default it showing wrong..

import React from 'react'
import {AzureMap, AzureMapsProvider, IAzureMapOptions} from 'react-azure-maps'
import {AuthenticationType} from 'azure-maps-control'
import LocationMarker from './LocationMarker'
const option: IAzureMapOptions = {
    authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: '<key>'
    },
}
const Map = (center,zoom) => {
    return(
        <div style={{height: '1300px'}}>
            <AzureMapsProvider>
                <AzureMap options={option}>
                    <LocationMarker center= {78.9629, 20.5937}/>
                </AzureMap>
                
            </AzureMapsProvider>
        </div>
    )
}
export default Map

Integrate Indoor maps

Is there a way to add indoor maps to this wrapper?

Traffic Options

Traffic options don't seem to be passing through. Unless I am misunderstanding something it is expected that the following map would show traffic events.

<>
    <AzureMapsProvider>
        <AzureMap options={option} trafficOptions={{ incidents: true, flow: "relative" }}>
        </AzureMap>
    </AzureMapsProvider>
</>

Traffic options seem unused in the playground examples.

React 17

Please upgrade to React 17.

Also, is this project still active?

Unable to add traffic Options in AzureMap

Hi,

I am trying to add traffic options into the azure Map, but it is giving me following error:

The source 'incidents-source' could not be added to the map because the map is not ready. Please use a ready event listener to guarantee the map is ready before adding a source to it.

Using the below basic Setup code:

<AzureMapsProvider>
  <AzureMap  options={option} trafficOptions={{ flow: 'absolute', incidents: true }} />
</AzureMapsProvider>

Please help!

requires mapblox-gl which doesn't have a standard license?

We noticed that this package requires mapblox-gl: https://www.npmjs.com/package/mapbox-gl
which doesn't have any standard license, so inside Microsoft, it gets flagged in Component Governance as "missing legal info"

Is mapblox-gl required for this wrapper? or could it be made an optional component?

AzureMapHtmlMarker options.popupContent doesn't seem allow for click events anywhere in the content

I tried adding a div with an onClick handler to the popContent and it seems it's never invoked. Almost like the event is never getting registered.

To verify and eliminate any thing that I might have been doing. I took the PopupExample.tsx from the playground and added an onClick handler to the div:

  const onPopupCLick = (): void => {	
	console.log('I got clicked');
  };

  const htmlMarkerOptions = {
    popup: useCreatePopup({
      options: {},
      popupContent: <div style={wrapperStyles.popupStyles} **onClick={() => onPopupCLick()}** >Html marker popup with some random value click Change Number to see actual value <br /> {someHtmlMarkerPopupState}</div>
    })
  }

It never get's invoked when clicking the div.

Side note: Also seems to be the same issue with the AzureMapPopup

How to add animation using library azure-map-animations

I have a problem adding the azure-map-animation library and combining them with react-azure-map. Can they work together? Thank you!

Erro: Non-standard crypto library

Using this package in Next.js gives an Error.

import {
  AzureMap,
  AzureMapsProvider,
} from "react-azure-maps";
import { AuthenticationType } from "azure-maps-control";

const option = {
  authOptions: {
    authType: AuthenticationType.subscriptionKey,
    subscriptionKey: // "mysubscriptionkeyhere",
  },
};

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

export default DefaultMap;

Error: Non-standard crypto library
at /node_modules/react-azure-maps/dist/react-azure-maps.umd.js:137:819431

After Installation getting "ReferenceError: self is not defined"

Add custom control

Is and how is it possible to add a custom control? https://azuremapscodesamples.azurewebsites.net/Custom%20Modules/Bring%20Data%20Into%20View%20Control/Bring%20Data%20Into%20View%20Control.html

Draggable marker location resets after zoom out on Map

I have a marker where draggable = true;

        // Create an HtmlMarker.
        const marker = new HtmlMarker({
            draggable: props.isDraggable
        });

I drag the marker on the map and I get the dragend event and process it:

                mapRef.events.add('dragend', marker, (e: any) => {
                    var pos = e.target.options.position;
                    handleLocationChange(pos);
                });

Now if I zoom out on the map, the marker sometimes jumps back to the original location. No dragend event is captured, and handleLocationChange is never fired. This doesn't always happen. Sometimes depends on how much you zoom out. I don't see an issue if I just drag the map around and send the pin out of frame. It stays where it should be.

Perhaps related... I notice that after I drag the pin once, the handleLocationChange event fires once. When I drag it a second time, it fires twice. Three times four, etc... I've verified that I am only adding the markerLayer to the mapRef once, and only adding the point to the datasource once.

Am using
"react-azure-maps": "^0.4.4",
"azure-maps-control": "^2.0.32",

Also noticed that when marker is draggable, the click event on the mapref is never fired.

    useEffect(() => {
        if (mapRef && props.isEventDataLoaded && props.isMapKeyLoaded && !isDataSourceLoaded && isMapReady) {

            // Simple Camera options modification
            mapRef.setCamera({ center: props.center, zoom: MapStore.defaultUserLocationZoom });

            var dataSourceRef = new source.DataSource("mainDataSource", { cluster: true });

            mapRef.sources.add(dataSourceRef);
            setIsDataSourceLoaded(true);

            // Create a reusable popup.
            const popup = new Popup({
                pixelOffset: [0, -20],
                closeButton: false
            });

            // Create an HtmlMarker.
            const marker = new HtmlMarker({
                draggable: props.isDraggable
            });

            // Create a HTML marker layer for rendering data points.
            var markerLayer = new HtmlMarkerLayer(dataSourceRef, "marker1", {
                markerCallback: (id: any, position: data.Position, properties: any) => {

                    marker.setOptions({
                        position: position
                    });

                    mapRef.events.add('mouseover', marker, (event: any) => {
                        const marker = event.target as HtmlMarker & { properties: any };
                        const date = new Date(marker.properties.eventDate).toLocaleDateString([], { month: "long", day: "2-digit", year: "numeric" });
                        const time = new Date(marker.properties.eventDate).toLocaleTimeString([], { timeZoneName: 'short' });
                        const content = marker.properties.cluster
                            ? `Cluster of ${marker.properties.point_count_abbreviated} markers`
                            : `<div className="map-popup-container" style="padding:0.5rem;">
                                <h5 style="font-weight: 500; font-size: 18px; margin-top: 0.5rem;">${marker.properties.name}</h5>
                                <div><span className="font-weight-bold">Event Date: </span><span>${date}</span></div>
                                <div><span className="font-weight-bold">Time: </span><span>${time}</span></div>

                                <div>
                            </div>`;
                        popup.setOptions({
                            content: content,
                            position: marker.getOptions().position
                        });

                        // Open the popup.
                        if (mapRef) {
                            popup.open(mapRef);
                        }
                    });

                    mapRef.events.add('dragend', marker, (e: any) => {
                        var pos = e.target.options.position;
                        handleLocationChange(pos);
                    });

                    //mapRef.events.add('click', marker, (e: any) => {
                    //    var pos = e.target.options.position;
                    //    handleLocationChange(pos);
                    //});

                    mapRef.events.add('mouseout', marker, () => popup.close());

                    return marker
                }
            });

            // Add marker layer to the map.
            mapRef.layers.add(markerLayer);

            var position = new data.Point(new data.Position(props.longitude, props.latitude));

            var featureProperties = ({
                name: props.eventName,
                eventDate: props.eventDate,
            });

            dataSourceRef.add(new data.Feature(position, featureProperties));
        }
    }, [mapRef,
        props.center,
        props.isEventDataLoaded,
        props.isMapKeyLoaded,
        props.currentUser,
        props.isUserLoaded,
        props.eventName,
        props.eventDate,
        props.longitude,
        props.latitude,
        isDataSourceLoaded,
        props.isDraggable,
        // eslint-disable-next-line
        handleLocationChange,
        isMapReady,
        isPrevLoaded]);

    useEffect(() => {
        if (mapRef && props.isEventDataLoaded && props.isMapKeyLoaded && isDataSourceLoaded && isMapReady && !isPrevLoaded) {
            var dsr = mapRef.sources.getById("mainDataSource") as source.DataSource;
            var feature = dsr.getShapes()[0];

            var position = new data.Position(props.longitude, props.latitude);

            // if the value is (0,0) this is a default. Use the user's position instead if available
            if (props.latitude === 0 && props.longitude === 0) {
                position = props.center;
            }

            feature.setCoordinates(position);

            // Simple Camera options modification
            mapRef.setCamera({ center: position, zoom: MapStore.defaultUserLocationZoom });
            setIsPrevLoaded(true);
        }
    }, [mapRef,
        props.center,
        props.isEventDataLoaded,
        props.isMapKeyLoaded,
        props.longitude,
        props.latitude,
        isDataSourceLoaded,
        isMapReady]);

    // eslint-disable-next-line
    function handleLocationChange(e: any) {
        props.onLocationChange(e);
    }

Update map data points when featureCollection changes

I have something like this

<AzureMapDataSourceProvider id="MapView" collection={featureCollection}>

where featureCollection is a state. Is it possible for the map to update the data points if featureCollection changes? or what's the correct approach to do this?

Targeting es5 causing issues when using types derived from EventEmitter

ES5 Targeting in react-azure-maps causes an issue when you try to combine react-azure-maps with the HtmlMapLayer SDK available from Microsoft.
(https://github.com/Azure-Samples/azure-maps-html-marker-layer)

In the Azure Maps SDK EventManager.Invoke method, the code appears as follows:

  public invoke(eventType: string, targetOrArgs: any, args?: any) {
    // If args is undefined assume there is not target for the event.
    if (typeof args === "undefined") {
      // Empty string indicates the map global level.
      this._invokeListeners(eventType, "", targetOrArgs);
    } else {
      if (targetOrArgs instanceof Layer && Layer._isMBoxEvent(eventType)) {
        this._invokeListeners(eventType, targetOrArgs.getId(), args);
      } else if **(targetOrArgs instanceof EventEmitter)** {
        targetOrArgs._invokeEvent(eventType, args);
      } else {
        throw new Error("The invoke target is invalid.");
      }
    }
  }

In the Azure-Maps-Html-Marker-Layer src/extentions/ExtendedHtmlMarker.ts file, the HtmlMarker is extended as follows:
export interface ExtendedHtmlMarker extends azmaps.HtmlMarker {

Unfortunately, this results in the line (targetOrArgs instanceOf EventEmitter) behaving differently in ES5 than it does in ES6.

Under ES6, it behaves correctly, because the ES6 version of JS recognizes a derived class of a derived class of a base class as an instance of the base class... but ES5 instanceOf cannot do this, so in ES5, this check returns false, where in ES6, this returns true.

And since react-azure-maps includes the es5 minified version of the Azure Maps SDK, any app that uses react-azure-maps and wants to also use the HtmlMarkerLayer cannot.

Upgrade mapbox-gl to 1.10.0

The current version of mapbox-gl in package.json (^1.8.1) includes few security risks due to an old version of minimist (version 0.0.8). Upgrading to the latest 1.10.0 will solve it.

from https://github.com/mapbox/mapbox-gl-js/releases/tag/v1.10.0:

Upgrade minimist to ^1.2.5 to get fix for security issue CVE-2020-7598 upstream (#9425, fixed by #9425)

Since anyway package.json is marked to auto-accept minor releases (^), I assume this should be a minor change.

Invalid hook call help?

I'm sure this is something I'm doing wrong, but I'm stuck and am hoping you can point me in the right direction. I'm trying to get the simple default example working and am getting the following when I navigate to the page that contains the React stuff. Here is the code for that page:

import * as 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: "***MY KEY***"
    },
}

export default function Assets() {
    return (
        <div style={{ height: '300px' }}>
            <AzureMapsProvider>
                <AzureMap options={option}>
                </AzureMap>
            </AzureMapsProvider>
        </div>
    );
}

It is being called like this:

import * as React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import Home from './components/Home';
import Counter from './components/Counter';
import FetchData from './components/FetchData';
import CoreEditor from './components/CoreEditor';
import Assets from './components/Assets';

import './custom.css'

export default () => (
    <Layout>
        <Route exact path='/' component={Home} />
        <Route path='/counter' component={Counter} />
        <Route path='/fetch-data/:startDateIndex?' component={FetchData} />
        <Route path='/core-editor' component={CoreEditor} />
        <Route path='/assets' component={Assets} />
    </Layout>
);

Here is the client developer console log.

Thanks so much for any pointers. If I had control of it, I would know what to look for (since I've had this in my own code). I'm NOT an expert on React and am learning as I go.

log.js:24 [HMR] Waiting for update signal from WDS...
        
       Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at g (https://localhost:44309/static/js/0.chunk.js:76028:16)
    at div
    at Assets
    at Route (https://localhost:44309/static/js/0.chunk.js:261833:29)
    at div
    at Container (https://localhost:44309/static/js/0.chunk.js:268296:25)
    at Layout (https://localhost:44309/static/js/main.chunk.js:3530:206)
    at Router (https://localhost:44309/static/js/0.chunk.js:261470:30)
    at ConnectedRouter (https://localhost:44309/static/js/0.chunk.js:173564:7)
    at ConnectedRouterWithContext (https://localhost:44309/static/js/0.chunk.js:173661:25)
    at ConnectFunction (https://localhost:44309/static/js/0.chunk.js:259678:75)
    at Provider (https://localhost:44309/static/js/0.chunk.js:259495:20)
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react.development.js:207
error @ react.development.js:181
resolveDispatcher @ react.development.js:1590
useState @ react.development.js:1619
g @ react-azure-maps.es5.js:55
renderWithHooks @ react-dom.development.js:14977
mountIndeterminateComponent @ react-dom.development.js:17803
beginWork @ react-dom.development.js:19041
beginWork$1 @ react-dom.development.js:23932
performUnitOfWork @ react-dom.development.js:22768
workLoopSync @ react-dom.development.js:22699
renderRootSync @ react-dom.development.js:22662
performSyncWorkOnRoot @ react-dom.development.js:22285
(anonymous) @ react-dom.development.js:11319
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11268
flushSyncCallbackQueueImpl @ react-dom.development.js:11314
flushSyncCallbackQueue @ react-dom.development.js:11301
discreteUpdates$1 @ react-dom.development.js:22412
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5881
index.js:1 
        
       Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at g (https://localhost:44309/static/js/0.chunk.js:76028:16)
    at div
    at Assets
    at Route (https://localhost:44309/static/js/0.chunk.js:261833:29)
    at div
    at Container (https://localhost:44309/static/js/0.chunk.js:268296:25)
    at Layout (https://localhost:44309/static/js/main.chunk.js:3530:206)
    at Router (https://localhost:44309/static/js/0.chunk.js:261470:30)
    at ConnectedRouter (https://localhost:44309/static/js/0.chunk.js:173564:7)
    at ConnectedRouterWithContext (https://localhost:44309/static/js/0.chunk.js:173661:25)
    at ConnectFunction (https://localhost:44309/static/js/0.chunk.js:259678:75)
    at Provider (https://localhost:44309/static/js/0.chunk.js:259495:20)
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react.development.js:207
error @ react.development.js:181
resolveDispatcher @ react.development.js:1590
useState @ react.development.js:1619
g @ react-azure-maps.es5.js:55
renderWithHooks @ react-dom.development.js:14977
mountIndeterminateComponent @ react-dom.development.js:17803
beginWork @ react-dom.development.js:19041
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23956
performUnitOfWork @ react-dom.development.js:22768
workLoopSync @ react-dom.development.js:22699
renderRootSync @ react-dom.development.js:22662
performSyncWorkOnRoot @ react-dom.development.js:22285
(anonymous) @ react-dom.development.js:11319
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11268
flushSyncCallbackQueueImpl @ react-dom.development.js:11314
flushSyncCallbackQueue @ react-dom.development.js:11301
discreteUpdates$1 @ react-dom.development.js:22412
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5881
react.development.js:1620 
        
       Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (react.development.js:1620:1)
    at g (react-azure-maps.es5.js:55:1)
    at renderWithHooks (react-dom.development.js:14977:1)
    at mountIndeterminateComponent (react-dom.development.js:17803:1)
    at beginWork (react-dom.development.js:19041:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23956:1)
    at performUnitOfWork (react-dom.development.js:22768:1)
    at workLoopSync (react-dom.development.js:22699:1)
    at renderRootSync (react-dom.development.js:22662:1)
    at performSyncWorkOnRoot (react-dom.development.js:22285:1)
    at react-dom.development.js:11319:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11268:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11314:1)
    at flushSyncCallbackQueue (react-dom.development.js:11301:1)
    at discreteUpdates$1 (react-dom.development.js:22412:1)
    at discreteUpdates (react-dom.development.js:3756:1)
    at dispatchDiscreteEvent (react-dom.development.js:5881:1)
useState @ react.development.js:1620
g @ react-azure-maps.es5.js:55
renderWithHooks @ react-dom.development.js:14977
mountIndeterminateComponent @ react-dom.development.js:17803
beginWork @ react-dom.development.js:19041
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23956
performUnitOfWork @ react-dom.development.js:22768
workLoopSync @ react-dom.development.js:22699
renderRootSync @ react-dom.development.js:22662
performSyncWorkOnRoot @ react-dom.development.js:22285
(anonymous) @ react-dom.development.js:11319
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11268
flushSyncCallbackQueueImpl @ react-dom.development.js:11314
flushSyncCallbackQueue @ react-dom.development.js:11301
discreteUpdates$1 @ react-dom.development.js:22412
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5881
index.js:1 
        
       The above error occurred in the <g> component:

    at g (https://localhost:44309/static/js/0.chunk.js:76028:16)
    at div
    at Assets
    at Route (https://localhost:44309/static/js/0.chunk.js:261833:29)
    at div
    at Container (https://localhost:44309/static/js/0.chunk.js:268296:25)
    at Layout (https://localhost:44309/static/js/main.chunk.js:3530:206)
    at Router (https://localhost:44309/static/js/0.chunk.js:261470:30)
    at ConnectedRouter (https://localhost:44309/static/js/0.chunk.js:173564:7)
    at ConnectedRouterWithContext (https://localhost:44309/static/js/0.chunk.js:173661:25)
    at ConnectFunction (https://localhost:44309/static/js/0.chunk.js:259678:75)
    at Provider (https://localhost:44309/static/js/0.chunk.js:259495:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:4026
logCapturedError @ react-dom.development.js:20077
update.callback @ react-dom.development.js:20110
callCallback @ react-dom.development.js:12310
commitUpdateQueue @ react-dom.development.js:12331
commitLifeCycles @ react-dom.development.js:20728
commitLayoutEffects @ react-dom.development.js:23418
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23143
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11268
commitRoot @ react-dom.development.js:22982
performSyncWorkOnRoot @ react-dom.development.js:22321
(anonymous) @ react-dom.development.js:11319
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11268
flushSyncCallbackQueueImpl @ react-dom.development.js:11314
flushSyncCallbackQueue @ react-dom.development.js:11301
discreteUpdates$1 @ react-dom.development.js:22412
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5881
react.development.js:1620 
        
       Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (react.development.js:1620:1)
    at g (react-azure-maps.es5.js:55:1)
    at renderWithHooks (react-dom.development.js:14977:1)
    at mountIndeterminateComponent (react-dom.development.js:17803:1)
    at beginWork (react-dom.development.js:19041:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23956:1)
    at performUnitOfWork (react-dom.development.js:22768:1)
    at workLoopSync (react-dom.development.js:22699:1)
    at renderRootSync (react-dom.development.js:22662:1)
    at performSyncWorkOnRoot (react-dom.development.js:22285:1)
    at react-dom.development.js:11319:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11268:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11314:1)
    at flushSyncCallbackQueue (react-dom.development.js:11301:1)
    at discreteUpdates$1 (react-dom.development.js:22412:1)
    at discreteUpdates (react-dom.development.js:3756:1)
    at dispatchDiscreteEvent (react-dom.development.js:5881:1)
useState @ react.development.js:1620
g @ react-azure-maps.es5.js:55
renderWithHooks @ react-dom.development.js:14977
mountIndeterminateComponent @ react-dom.development.js:17803
beginWork @ react-dom.development.js:19041
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23956
performUnitOfWork @ react-dom.development.js:22768
workLoopSync @ react-dom.development.js:22699
renderRootSync @ react-dom.development.js:22662
performSyncWorkOnRoot @ react-dom.development.js:22285
(anonymous) @ react-dom.development.js:11319
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11268
flushSyncCallbackQueueImpl @ react-dom.development.js:11314
flushSyncCallbackQueue @ react-dom.development.js:11301
discreteUpdates$1 @ react-dom.development.js:22412
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5881

Popup components with React hooks don't call hooks or render updates

Versions:
react-azure-maps 0.0.7
react 16.13.0

Problem:
I'm using a AzureMapPopup - when I supply a React component that uses hooks (or classes with async fetching) to popupContent - it renders the initial view but never re-renders the component or calls the Hooks/API. I believe this could be caused by the use of renderToStaticMarkup in useCreatePopup().

Expect Behavior:
My component uses a Hook to fetch API results. While waiting for the API response the component renders a loading spinner, then the results. I only see the loading spinner however, it never actually invokes the hook or re-renders.

When the component is used outside Maps, it works as expected.

React-native

Does this repo work with React native? I need to build a mobile app that works on both Android and iOS so that's why I'm not using the Azure Maps Android Sdk.
The problem is that when I try to import these two:

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

import {AuthenticationType} from 'azure-maps-control';

it's throwing an Cannot create URL for blob! exception in the react-azure-maps.umd.js and in the atlas.min.js files.

The dependencies installed in package.json are:

 "azure-maps-control": "^2.0.31",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-azure-maps": "^0.1.4",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-web": "~0.13.7",
    "typescript": "^3.7.5"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },

No implementation of bubble layer?

Not sure what else is missing, but this one stands out

Shallow comparison of props in memoized component preventing rerender

Consider the following component with an AzureMap child component. Whenever this component is rerendered with different props, the AzureMap component fails to rerender with the new cameraOptions, as a shallow comparison of the object literal is being made. Are there any different usage suggestions to ensure the AzureMap gets rerendered when different props are passed to this component?

const MyComponent = ({bounds}) => { 
    const option = {
           ....
     }

    const cameraOptions = {
         bounds: bounds
    }
    return (
        <AzureMapsProvider>
            <AzureMap option={option} cameraOptions={cameraOptions}>
                ...
            </AzureMap>
        </AzureMapsProvider>
    )
}

Regarding writing test cases for react-azure-maps implementation in react app

Hi,

I did a very simple implementation for react-azure-maps as below :

import * as azureMap from "react-azure-maps";
import {
  ControlOptions,
  AuthenticationType as auth
} from "azure-maps-control";

import "./App.css";

const cameraOptions: azureMap.AzureSetCameraOptions = {
  center: [-1.9591947375679695, 52.46891727965905],
  maxBounds: [-6.0, 49.959999905, 1.68153079591, 58.6350001085],
};

const controls: azureMap.IAzureMapControls[] = [
  {
    controlName: "StyleControl",
    controlOptions: {
      mapStyles: ["road", "grayscale_light", "satellite_road_labels"],
    },
    options: {
      position:"bottom-left",
    } as ControlOptions,
  },
  {
    controlName: "ZoomControl",
    options: { position: "bottom-right" } as ControlOptions,
  },
];

const mapConfigState: azureMap.IAzureMapOptions = {
  authOptions: {
    authType: auth.subscriptionKey,
    subscriptionKey: "********************************",
    clientId: ""********************************",
  },
};

function App() {
  return (
    <div className="map-container">
      <azureMap.AzureMapsProvider>
        <div style={{ height: "600px" }}>
          <azureMap.AzureMap
            options={mapConfigState}
            controls={controls}
            cameraOptions={cameraOptions}
          ></azureMap.AzureMap>
        </div>
      </azureMap.AzureMapsProvider>
    </div>
  );
}

export default App;

I tried to write the test case for the implementation using Jest. It gives me this error :

Please help !

npm package 0.1.4 does not match git commit with tag 0.1.4

The types file updated in #74 (commit tagged 0.1.4) does not match the one in npm package 0.1.4.

Sample repro:

• npx create-react-app my-app --template typescript
• Change directory to /my-app
• npm i react-azure-maps
• Check node_modules/react-azure-maps/dist/types/types.d.ts - it is not updated

Alternatively download the .tgz directly from npm using link below, extract it, and you'll notice that types.d.ts is still the old version.
https://registry.npmjs.org/react-azure-maps/-/react-azure-maps-0.1.4.tgz

No code changes are required, so there's nothing I can do to help but report the issue. The npm package may need to be re-published.

Close btn for AzureMapPopup

Problem when using Webpack with react-azure-maps

Hi, i'm trying to use react-azure-maps in one of my projects but i'm having difficulties with Webpack not being able to bundle my project.

I'm getting this error during the bundle process:
ModuleNotFoundError: Module not found: Error: Can't resolve 'react-dom/server' in 'C:\Dev\oak\Ui\Ui.WebApp\ClientApp\node_modules\react-azure-maps\dist'

I'm hoping this is the right place for these kinds of issues and any help is greatly appreciated.

How to Make AzureMap Stretch to Fit Parent?

Currently I have an AzureMap inside of a div that can be resized. The canvas within the AzureMap component unfortunately does not resize when the parent div is resized, resulting in an empty section of the parent div. Is there any way to get the AzureMap component to stretch to fit it's parent? Thanks!

PS - I've tried messing with the autoResize function but this apparently only hooks onto the window's size.

Html markers

Hi, this is not really an issue, but I couldn't find sample from playground samples.
What I'm looking for, is how clustering HTML markers work?
I see, its done on azure maps web SDK but cant figure out, how to archieve it with react-azure-maps

Unable to Import React Azure Maps

Vitest is unable to correctly import react-azure-maps during testing with an import error.

This is likely caused by incorrect package.json.

At the moment:

{
"source": "src/react-azure-maps.ts",
"module": "dist/react-azure-maps.es5.js",
"typings": "dist/types/react-azure-maps.d.ts",
}

It should be:

{
"module": "dist/react-azure-maps.es5.js",
"types": "dist/types/react-azure-maps.d.ts",
"exports": {
    ".": {
      "import": "./dist/react-azure-maps.es5.js",
      "types": "./dist/types/react-azure-maps.d.ts"
    }
  },
}

AzureMapHtmlMarker doesn't include styles generated by styled components

Hello guys,
I'm not able to see in browser any styles generated by MUI styled() utility when I'm passing styled component as a markerContent prop into an AzureMapHtmlMarker.

`
const StyledIcon = styled(Icon)(({ theme }) => ({
fontSize: 25,
}));

const StyledText = styled('span')({
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
});

...

const markerContent = (

{text}

);

<AzureMapHtmlMarker
key={some-generated-key}
options={{
position: [longitude, latitude],
}}
markerContent={markerContent}
/>
`
Will be styled components supported in a future or is there any pretty workaround?
Thanks in advance!

[Question] react-azure-maps and azure-maps-control lazy loading

We are trying to do code splitting and observed that react-azure-maps and azure-maps-control take a significant amount of space in bundle.
When trying to use react.lazy to lazy load the required portions of the components it is giving below errors in typescript for compilation.
Are there any samples to do the code lazy loading of the component?

Type 'Promise<{ default: never; } | { default: typeof AuthenticationType; }>' is not assignable to type 'Promise<{ default: ComponentType; }>'.
Type '{ default: never; } | { default: typeof AuthenticationType; }' is not assignable to type '{ default: ComponentType; }'.
Type '{ default: typeof atlas.AuthenticationType; }' is not assignable to type '{ default: ComponentType; }'.
Types of property 'default' are incompatible.
Type 'typeof AuthenticationType' is not assignable to type 'ComponentType'.ts(2322)
index.d.ts(869, 18): The expected type comes from the return type of this signature.

Drawing Manager and Indoor Manager

Hi,

A project I am working in is using this wrapper but it will require azure maps drawing and indoor modules. Will the project be open to PRs with these features? I have looked into drawing and think the best way would be to make a AzureMapsDrawingManagerProvider following the same pattern so far with layers and data source components.

NVDA is not announcing the information of coordinates tooltips of the map using Tab/arrow keys.

NVDA is not announcing the information of coordinates tooltips of the map using Tab/arrow keys - https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html.

This issue is also observed with the "Chromium Edge+ Narrator".

NVDA should announce the information of coordinates tooltips of the map using Tab/arrow keys. As a result, screen reader users will not be able to understand the information of coordinates tooltips of the map

Invalid Authentication Type

Simply following the starter code and getting the following errors:

`react-azure-maps.es5.js:55

   Error: An invalid authentication type was specified.
at react-azure-maps.es5.js:55:1
at new Promise (<anonymous>)
at Rf.initialize (react-azure-maps.es5.js:55:1)
at new tg (react-azure-maps.es5.js:55:1)
at react-azure-maps.es5.js:55:1
at commitHookEffectListMount (react-dom.development.js:23150:1)
at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
at commitPassiveMountEffects (react-dom.development.js:24866:1)

qf._invokeListeners @ react-azure-maps.es5.js:55
qf.invoke @ react-azure-maps.es5.js:55
(anonymous) @ react-azure-maps.es5.js:55
Promise.catch (async)
tg @ react-azure-maps.es5.js:55
(anonymous) @ react-azure-maps.es5.js:55
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
performSyncWorkOnRoot @ react-dom.development.js:26076
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-azure-maps.es5.js:55

   Error: An invalid authentication type was specified.
at react-azure-maps.es5.js:55:1
at new Promise (<anonymous>)
at Rf.initialize (react-azure-maps.es5.js:55:1)
at new tg (react-azure-maps.es5.js:55:1)
at react-azure-maps.es5.js:55:1
at commitHookEffectListMount (react-dom.development.js:23150:1)
at invokePassiveEffectMountInDEV (react-dom.development.js:25154:1)
at invokeEffectsInDev (react-dom.development.js:27351:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27330:1)
at flushPassiveEffectsImpl (react-dom.development.js:27056:1)

qf._invokeListeners @ react-azure-maps.es5.js:55
qf.invoke @ react-azure-maps.es5.js:55
(anonymous) @ react-azure-maps.es5.js:55
Promise.catch (async)
tg @ react-azure-maps.es5.js:55
(anonymous) @ react-azure-maps.es5.js:55
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
performSyncWorkOnRoot @ react-dom.development.js:26076
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533`

Code I am using is pretty straight forward and simple...

`import React, { useState } from "react";
import {
AzureMap,
AzureMapsProvider,
IAzureMapOptions,
} from "react-azure-maps";
import { AuthenticationType } from "azure-maps-control";

function HomePage() {
const { option } = {
authOptions: {
authType: AuthenticationType.subscriptionKey,
subscriptionKey: "MYSUBSCRIPTIONKEY", // Your subscription key
},
};

return (

Welcome to Home Page

<div style={{ height: "300px" }}>

);
}

export default HomePage;`

Tool tip over polygon layer on hover.

Hi, by any chance can we add a tooltip over any layer, specifically on polygon layer?

[GLOBAL CSS IMPORT ISSUE] --- Help Wanted

Trying to use the react-azure-maps with my next js project but getting below issue

./node_modules/mapbox-gl/src/css/mapbox-gl.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-azure-maps/dist/react-azure-maps.es5.js

versions of dependencies ----
    "next": "12.2.3",
    "react": "17.0.2",
    "react-azure-maps": "^0.4.2",
    "react-dom": "17.0.2"

Please provide proper steps to integrate this library in my project

Restrict area and zoom level

Hi, I'm using azure maps for the first time and I have a requirement, that users can only see a certain region of the map and only up to a certain zoom level (e.g. show only the south of Germany).

I have checked the documentation but was not able to find a solution to my problem.

Is there a way to do this properly with the React wrapper that I could just not find or do I have to figure something out myself?

Thanks

Julius

Is this repo dead?

Been a long time now since any releases or changes. Anyone got a solid fork that's up to date and has all the PR'd fixes?

How to add circles using Point and Polygon with JSX syntax

Ask:
Specifically I want to do this:
https://docs.microsoft.com/en-us/azure/azure-maps/map-add-shape#add-a-circle-to-the-map

I want a geospatially correct circle as the user zooms in and out.

Alternatives I've tried:
Bubble layer gets me a circle but the radius is pixel fixed which is why I discarded this approach and want to get the above point/shape + Polygon layer combo working.

Question:
It is not clear to me where to apply properties subType and radius when using the JSX components offered by this library.

I tried something like this where I specify type as a point and variant as shape. Then I add subType and radius to properties. This did not work and nothing from this layer shows up on the map.

Is this on the right track and if so, what is missing in order to render a point as a geospatially correct circle?

myPoints

<AzureMapFeature
  key={id}
   id={id}
   variant="shape"
   type="point"
   coordinates={[new Position(0, 0)]}
   properties={{
       subType: 'Circle',
       radius: 10000 //meters
     }}
 />

Later I create a PolygonLayer like this
myPolygonLayer

<AzureMapLayerProvider
  id={`${layerId}-polygonLayer-circles`}
  options={{
    fillOpacity: 0.75,
    fillColor: 'red',
  }}
  type="PolygonLayer"
  events={eventsHandlers}
/>

Finally I create a DataSource provider like this with the above two JSX components
DataSource

<AzureMapDataSourceProvider id={layerId}>
  {myPolygonLayer}
  {myPoints}
</AzureMapDataSourceProvider>

Thanks!

AzureMapPopup 'options' prop

Currently working on a project needing a lot of markers, each with a popup on hover. I was planning to implement something like this: reusing a popup with multiple points

I'm trying to alter the position with state, but after the initial load nothing within the options prop changes. I think it's due to the use of memo in AzureMapPopup.tsx, though I'm not exactly sure of the changes that need to be made to make it work.

If you think there's a better way to do this or could give me an example of implementation that'd be really useful!

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Using subscription key publicly

I would like to question the promotion of using the subscription key as the primary method of authentication in this repo. Our development team dig into the Azure Maps documentation. The documentation does provide a tutorial with the use of the subscription key, but they do not clearly state that it's actually wrong to use it in a production application, as it can be picked up by anyone who can look into your source code, and used in their application. CORS options do something to prevent this, but this is not promoted anywhere.

I will reference some other tutorials. Here is one that Azure Maps Samples links to, and has a small note below the code example.

This quickstart uses the Shared Key authentication approach for demonstration purposes, but the preferred approach for any production environment is to use Azure Active Directory authentication.

There are multiple different authentication paths for applications to use and using the subscription key is the fastest but most unsecure one and should never be pushed to a production application.

My recommendation is to fix the documentation to promote other authentication methods, telling users that using the subscription key is for development purposes only.

OGC layer not implemented

Since this wrapper does not provide any AzureMapLayerProvider of type='OgcMapLayer', I tried to create my custom layer and use it, but in vain. It is throwing an error - 'emitValidationErrors'. Please suggest some solution.

AzureMapHtmlMarker 'markerContent' prop

Looking to change the markerContent for AzureMapHtmlMarker after initial load, but I can't get it to work - is this something similar to #36?

Thanks for the quick response!

layer events does not work when using mapref

I try adding a mouse click event on the layer in the MapRef example in the playground, but it does not trigger the event.

MapController.tsx

  useEffect(() => {
    if (isMapReady && mapRef) {
      // Need to add source and layer to map on init and ready
      mapRef.sources.add(dataSourceRef);
      mapRef.layers.add(layerRef);

      // ADDED THE LINE BELOW
      mapRef.events.add('click', layerRef, () => alert('im clicked!'));
      // ADDED THE LINE ABOVE

    }
  }, [isMapReady]);

How to load IAzureDataSourceChildren of type="Polygon"

I am trying to create an array of data source children of type polygon. I am not able to follow much from the typing of IAzureDataSourceChildren as i don't see a way to pass the atlas.data.Polygon element by AzureMapFeature props. Any pointers or sample on how to load polygon using AzureDataSourceChildren and AzureMapfeature would help me here.

Bad typing of children of AzureMapDataSourceProvider

As mentioned in Azure/react-azure-maps-playground#40

The aforementioned contains rendering of array of markers. However children type of AzureMapDataSourceProvider does not take array as children thus

// in the example the type is IAzureDataSourceChildren (without array) which is achieved by "hack" cas via any type, but thats wrong type as it is in fackt IAzureDataSourceChildren[] and not IAzureDataSourceChildren
 const renderedMarkers: IAzureDataSourceChildren[] = useMemo(
    () =>
      markers.map(({ lat, lon, key, label }) => {
        const position = new data.Position(lon, lat);
        return (
          <AzureMapFeature
            key={key}
            id={key}
            type="Point"
            coordinate={position}
            properties={{ tile: label, icon: 'pin-round-blue' }}
          />
        );
      }),
    [markers],
  );
/* omitted* /
<AzureMapDataSourceProvider
                id={`${name} AzureMapDataSourceProvider`}
                options={{ cluster: true, clusterRadius: 2 }}
              >
                <AzureMapLayerProvider id={`${name} AzureMapLayerProvider EstateMarkers`} type={'SymbolLayer'} />
                {renderedMarkers} // <= problem
              </AzureMapDataSourceProvider>

will cause TypeError.

The type of props is:

export declare type IAzureDataSourceStatefulProviderProps = {
    id: string;
    children?: Array<IAzureDataSourceChildren | null> | IAzureDataSourceChildren | null;
    options?: DataSourceOptions;
    events?: IAzureMapDataSourceEvent | any;
    dataFromUrl?: string;
    collection?: atlas.data.FeatureCollection | atlas.data.Feature<atlas.data.Geometry, any> | atlas.data.Geometry | atlas.data.GeometryCollection | Shape | Array<atlas.data.Feature<atlas.data.Geometry, any> | atlas.data.Geometry | Shape>;
    index?: number;
};

where children?: Array<IAzureDataSourceChildren | null> | IAzureDataSourceChildren | null; does not allow array as children. The proper type is Array<IAzureDataSourceChildren | Array<IAzureDataSourceChildren> | null> and not just Array<IAzureDataSourceChildren | null>.

Not able to move the coordinates tooltips of the map using Tab/arrow keys

React azure maps fails SC 2.1.1 accessibility requirement.

User is not able to move the coordinates tooltips of the map using Tab/arrow keys. When we move to the map we are able to see only one tooltip data and not able to move other tooltips.

As a result, keyboard only users will not be able to view the coordinates tooltip data.

Keyboard focus is moving on the coordinates tooltip present on the map more than one time using the Tab key.

Environment: Windows Version: Win10, Chrome Version: 87.0.4280.88 (Official Build) (64-bit)

On React Azure Maps, Keyboard focus is moving on the coordinates tooltip present on the map more than one time using the tab key. This fails WCAG 2.4.3 - https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html

Expected:
Keyboard Focus should move on the coordinates tooltip present on the map only one time using the Tab key.

User Impact:
Keyboard only users will face difficulty while navigating on the screen.

Note that Azure Maps Web SDK accessibility example meets this accessibility requirement.

Uncaught error 'source-id' is already added to the map

Uncaught error 'source-id' is already added to the map
I can trigger this error by toggling a rendered data source and layer. For example by toggling the value of showLayer off and on again:

const { showLayer } = props;

return (
    {showLayer 
        ?
        <AzureMapDataSourceProvider
              id={`source-id`}
              collection={someGeojson}
          >
          <AzureMapLayerProvider
              id={`layer-id`}
              options={{}}
              type='LineLayer'
          />
      </AzureMapDataSourceProvider> : null
    }
)

It looks like data source cleanup is not being done by react-azure-maps?

If I manually remove the source and layer in a cleanup useEffect:

useEffect(() => {
 return () => {
    map.layers.remove('layer'id');
    map.sources.remove('source-id);
}
}, []);

It fixes the error, but then I get further errors from the wrapper as it tries to remove the layers itself:
Error on remove layer Error: The layer 'layer-id' has not been added to the map and cannot be removed