Next.JS Map Example

React-azure-maps with NEXT.JS

Loading React azure maps ...

Usage:

Use dynamic import with ssr: false option when importing component that contains map.

Map component working on as client side - so you need to import is without SSR.

Code:

const DynamicComponentWithNoSSR = dynamic(
    () => import('./components/mapDynamicComponent'),
    {loading: () => <p>Loading React azure maps ...</p>, ssr: false}
)

import { useEffect, useReducer, useRef } from "react";

const option = {
  authOptions: {
    authType: "subscriptionKey",
    subscriptionKey: "" // Your subscription key
  }
};

export default function MapComponent() {
  const reactMapRef = useRef(null);
  const forceUpdate = useReducer(() => ({}), {})[1];

  useEffect(() => {
    import("react-azure-maps").then(module => {
      reactMapRef.current = module;
      forceUpdate();
    });
  }, []);

  return (
    <div>
      {!!reactMapRef.current && (
        <div>
          <p>Module is ready</p>
          <div style={{ height: "300px" }}>
            <reactMapRef.current.AzureMapsProvider>
              <reactMapRef.current.AzureMap options={option} />
            </reactMapRef.current.AzureMapsProvider>
          </div>
        </div>
      )}
    </div>
  );
}