MapsGL Map Controller Provider

// Create a variable to hold the access keys
const accessKeys = {
  id: process.env.XWEATHER_ID,
  secret: process.env.XWEATHER_SECRET
};
 
export default function App() {
  // Create a state variable to hold the map instance once it's created
  const [map, setMap] = useState<mapboxgl.Map | null>(null);
  // Create a ref to hold the map container element
  const containerRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    // Create the map instance using third-party mapping library, in this case Mapbox
    mapboxgl.accessToken = YOUR_MAPBOX_KEY;
    const mapEl = new mapboxgl.Map({
      container: containerRef.current || '',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-74.5, 40],
      zoom: 3,
    });
    // Set the map in state
    setMap(mapEl);
  }, []);
 
  return (
    // accessKeys, strategy, and map instance are required
   <MapsGLMapControllerProvider 
        accessKeys={accessKeys}
        strategy="mapbox" 
        map={map}>
      {/* Any components that need access to the map context go here */}
    </MapsGLMapControllerProvider>
 
    <div ref={containerRef} id="map"></div>
  );
}

export default function App() {
  // ... existing map setup code ...
 
  const handleMapControllerLoad = () => {
    // Get user's location and animate to it using the Mapbox flyTo method
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        map?.flyTo({
          center: [position.coords.longitude, position.coords.latitude],
          zoom: 10,
          essential: true
        });
      });
    }
  };
 
  // Animate on map click to the coordinates using the Mapbox flyTo method
  const handleMapClick = (event: Event) => {
        const data = event as {
        coord?: {
            lat: number;
            lon: number;
        }};
 
        if (data?.coord) {
            const { lat, lon } = data.coord;
 
            map?.flyTo({
                center: [lon, lat],
                essential: true,
                zoom: 9
            });
        }
    };
 
  return (
    <MapsGLMapControllerProvider 
        strategy="mapbox" 
        map={map} 
        onLoad={handleMapControllerLoad}
        onClick={handleMapClick} />
 
    <div ref={containerRef} id="map"></div>
  );
}