AccessiblePopups.tsx

AccessiblePopups.tsx

import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
import {
  AzureMap,
  AzureMapDataSourceProvider,
  AzureMapFeature,
  AzureMapLayerProvider,
  AzureMapsProvider,
  IAzureMapOptions,
  AzureMapPopup,
  IAzureMapFeature,
  IAzureMapsContextProps,
  AzureMapsContext,
} from 'react-azure-maps';
import { AuthenticationType, data, PopupOptions } from 'azure-maps-control';
import { key } from '../key';

const points = Array.from({ length: 20 }).map(() => {
  const randomLongitude = Math.floor(Math.random() * (-80 - -120) + -120);
  const randomLatitude = Math.floor(Math.random() * (30 - 65) + 65);
  return new data.Position(randomLongitude, randomLatitude);
});

const renderPoint = (coordinates: data.Position): IAzureMapFeature => {
  const rendId = Math.random();
  return (
    <AzureMapFeature
      key={rendId}
      id={rendId.toString()}
      type="Point"
      coordinate={coordinates}
      properties={{
        id: rendId,
        prop: 'My Feature Prop',
      }}
    />
  );
};

const MarkersExample: React.FC = () => {
  const option: IAzureMapOptions = useMemo(() => {
    return {
      authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: key,
      },
      center: [-100.01, 45.01],
      zoom: 2,
      view: 'Auto',
    };
  }, []);

  return (
    <AzureMapsProvider>
        <div style={styles.map}>
          <MapController options={option}/>
        </div>
      </AzureMapsProvider>
  );
};

const MapController = (props: { options: IAzureMapOptions}) => {
  const [markers, setMarkers] = useState([...points]);
  const [popupOptions, setPopupOptions] = useState<PopupOptions>({});
  const [popupsLoaded, treatPopupsAsLoaded] = useState<boolean>(false);
  const { mapRef } = useContext<IAzureMapsContextProps>(AzureMapsContext)

  useEffect(() => {
    if(!mapRef){ return }
    mapRef.events.addOnce('ready', () => setTimeout(() => treatPopupsAsLoaded(true)));
  }, [mapRef])

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

  return (<AzureMap options={props.options}>
    <AzureMapDataSourceProvider id={'MultiplePoint AzureMapDataSourceProvider'}>
      <AzureMapLayerProvider
        id={'MultiplePoint AzureMapLayerProvider'}
        options={{
          iconOptions: {
            image: 'pin-red',
          },
        }}
        events={{}}
        type="SymbolLayer"
      />
      {memoizedMarkerRender}
    </AzureMapDataSourceProvider>

    <>
      {points.map((point, idx) => 
        <AzureMapPopup
          key={idx}
          isVisible={!idx || !popupsLoaded}
          options={{
            ...popupOptions,
            position: point,
            pixelOffset: [0, -18],
          }}
          popupContent={
            <div style={styles.popupStyles}>{JSON.stringify({lng: point[0], lat: point[1]})}</div> // Inject your JSX
          }
        />  
      )}
    </>
  </AzureMap>)
}

const styles = {
  map: {
    height: "50vh",
  },
  buttonContainer: {
    display: 'grid',
    gridAutoFlow: 'column',
    gridGap: '10px',
    gridAutoColumns: 'max-content',
    padding: '10px 0',
    alignItems: 'center',
  },
  button: {
    height: 35,
    width: 80,
    backgroundColor: '#68aba3',
    'text-align': 'center',
  },
  popupStyles: {
    padding: '20px',
    color: 'black',
  },
};

export default memo(MarkersExample);