azure / react-azure-maps-playground Goto Github PK

        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>
        );
        }

function renderHTMLPoint(coordinates: data.Position): any {
  const rendId = Math.random();
  return (
    <AzureMapHtmlMarker
      key={rendId}
      markerContent={<div className="pulseIcon"></div>}
      options={{ ...azureHtmlMapMarkerOptions(coordinates) } as any}
      events={eventToMarker}
    />
  );
}

const iconUrl = 'http://open-notify.org/Open-Notify-API/map/ISSIcon.png';

const spaceshipImageSprites: IAzureMapImageSprite = {
  id: 'spaceship',
  color: 'DarkOrchid',
  secondaryColor: 'DarkOrchid',
  icon: iconUrl,
};

const memoizedMarkerRender: IAzureDataSourceChildren = useMemo(
    (): any => markers.map((marker) => renderPoint(marker)),
    [markers],
  );

Type 'IAzureDataSourceChildren[]' is not assignable to type 'ReactElement<IAzureMapFeature, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactElement<...> | null'.
  Type 'IAzureDataSourceChildren[]' is missing the following properties from type 'ReactElement<IAzureLayerStatefulProviderProps, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>': type, props, keyts(2322)