react-azure-maps

react-azure-maps copied to clipboard

I created a react control which displays an azure map, its working fine displaying only just the map and pins. But if I included a popup for the details of my pins the error occurred. Here is my code.

` import * as React from 'react'; import { useState, useEffect } from 'react'; import { IInputs } from '../generated/ManifestTypes'; import { Stack } from '@fluentui/react/lib/Stack'; import { AzureMap, AzureMapsProvider, IAzureMapOptions, AzureMapDataSourceProvider, AzureMapLayerProvider, AzureMapFeature, AzureMapPopup } from 'react-azure-maps'; import { AuthenticationType, data, MapMouseEvent} from 'azure-maps-control'; import 'azure-maps-control/dist/atlas.min.css';

        export interface AzureMapsGridProp {
        mapContext: ComponentFramework.Context;
        items?: any[];
        }

        const baseMapOptions: IAzureMapOptions = {
        zoom: 10,
        center: [0, 0],
        language: 'en-US',
        view: 'Auto',
        }

        const renderPoint = (): data.Position => {
        const randomLongitude = Math.floor(Math.random() * (-80 - -120) + -120);
        const randomLatitude = Math.floor(Math.random() * (30 - 65) + 65);
        return new data.Position(randomLongitude, randomLatitude);
        };

        export const AzureMapsGrid: React.FunctionComponent = (props) => {
        const contextWebApi: any = props.mapContext.webAPI;
        const [azureMapOptions, setAzureMapOptions] = useState(baseMapOptions);
        const [showMap, setShowMap] = useState(false);
        const [coords1, setCoords1] = useState<data.Position>(renderPoint);
        const [isVisible, setIsVisible] = useState(false);

        //Checking if Azure Map control is supported on user's browser
        useEffect(() => {
            CreateAzureMapToken(props.mapContext);
        },[]);

        useEffect(() => {
            if (azureMapOptions.authOptions){
                setShowMap(true);
            }
        }, [azureMapOptions.authOptions]);

        //Custom API Call for Creating Azure Map Token
        const CreateAzureMapToken = async(context:  ComponentFramework.Context<IInputs>) => {

            //initialize Create Azure Maps Token Request
            let createAzureMapsToken_Request = {    
                getMetadata: function () {
                    return {
                        boundParameter: null,
                        parameterTypes: {},
                        operationType: 0, operationName: "<generate token custom api name here>"
                    };
                }
            };

        contextWebApi.execute(createAzureMapsToken_Request).then(
            function success(response: any) {
                if (response.ok) { return response.json(); }
            }
        ).then(function (responseBody: any) {

            let result = responseBody;
            let token = result["Token"]; // Edm.String
            let xMSClientId = result["X-MS-CLIENT-ID"]; // Edm.String

            UpdateAzureMapOptions(xMSClientId, token);
        }).catch(function (error: any) {
            console.log(error.message);

            context.navigation.openErrorDialog({
            errorCode: error.errorCode,
            details: error.message,
            message: error.raw
            });
        });
        }

        const UpdateAzureMapOptions = async(ClientId: string, bearerToken: string) => {

        let updatedOptions = {
        ...azureMapOptions, 
        authOptions: {
            authType: AuthenticationType.anonymous,
            clientId: ClientId,
            getToken: async (resolve: any, reject: any) => {
                resolve(bearerToken);
            }
        }
        }

        setAzureMapOptions(updatedOptions);
        }

        return(
        <Stack id='azureMapContainer' styles={{root: {height: '500px', position: 'relative'}}}>
            {showMap && <AzureMapsProvider>
                <AzureMap 
                    options={azureMapOptions}>
                    <AzureMapDataSourceProvider id={'DataSource Provider'}>
                        <AzureMapLayerProvider
                            id={"Layer1"}
                            options={{
                                iconOptions: {
                                    image: 'marker-blue',
                                }
                            }}
                            type={"SymbolLayer"}
                            events={{
                                click: (e: MapMouseEvent) => {
                                    if (e.shapes && e.shapes.length > 0) {
                                        setIsVisible(true);
                                    }
                                }
                            }}/>
                            <AzureMapFeature
                                key={'Pin1'}
                                id={'Pin1'}
                                type="Point"
                                coordinate={coords1}
                                properties={{
                                    title: 'Pin',
                                    icon: 'marker-blue',
                                }}
                            />
                    </AzureMapDataSourceProvider>
                    <AzureMapPopup
                        isVisible={isVisible}
                        options={{ closeButton: true,
                            position: [0, 0],
                            pixelOffset: [0, -5],			
                            showPointer: true}}
                        popupContent={<div>Hello World</div>}
                    />
                </AzureMap>
            </AzureMapsProvider>}
        </Stack>
        );
        }

`

Here is the details of the error: ErrorDetails.txt