Maps UI SDK - Add a data viewer

This example demonstrates how to use the DataViewer component to display weather data from the Weather API on a map.

Click on the map below to open the custom DataViewer:

Key Features

Modal-based data display
Pre-built, dynamic weather data cards
Location-aware data fetching
Responsive design
Map integration

Implementation

First, set up the required providers:


const AppProviders = ({ children }: { children: ReactNode }) => {
    return (
        <ModalProvider>
            <SettingsProvider>
                {children}
            </SettingsProvider>
        </ModalProvider>
    );
};

The providers enable:

ModalProvider: Manages modal state and provides the useModalContext hook needed for showing/hiding the DataViewer
SettingsProvider: Provides configuration context like units and display preferences used by the data cards

Create a custom component using the DataViewer and weather data cards:


import {
    DataViewer,
    WeatherApiDataFetcher,
    PlacesView,
    AlertsCard,
    ImpactsCard,
    ForecastCard,
    ConditionalCard
 } from '@xweather/maps-ui-sdk';
 
const LocalWeatherViewer = () => {
    const { coordinatesString } = useLocationContext();
    if (!coordinatesString) return null;
 
    return (
        <Anchor.Responsive
            className="z-[100]"
            anchor={{ base: 'top-left' }}>
            <DataViewer
                className="w-full sm:w-[370px] bg-slate-100 rounded-xl
                           max-h-[450px] text-xs text-black">
                <DataViewer.Header className="p-2 sm:p-4">
                    <DataViewer.Title>Local Weather</DataViewer.Title>
                    <DataViewer.CloseButton
                        className="ml-auto bg-slate-200 w-7 h-7 rounded-full" />
                </DataViewer.Header>
 
                <DataViewer.Banner className="px-2 pb-2">
                    <WeatherApiDataFetcher
                        endpoint="places"
                        params={{ p: coordinatesString }}>
                        <PlacesView />
                    </WeatherApiDataFetcher>
                </DataViewer.Banner>
                <DataViewer.Body>
                    <AlertsCard title="Latest Alerts" />
                    <ImpactsCard minimumSeverity={1} />
                    <ConditionalCard />
                    <ForecastCard />
                </DataViewer.Body>
            </DataViewer>
        </Anchor.Responsive>
    );
};

The DataViewer is intentionally decoupled from location handling for increased flexibility.

Set up location handling and map controller integration with the LocationProvider and MapsGLMapControllerProvider:


import { useCallback, useState } from 'react';
import { LocationProvider, useModalContext, useLocationContext } from '@xweather/maps-ui-sdk';
 
const WeatherMap = () => {
    const [coordinates, setCoordinates] = useState<Coordinates>();
    const { setModalData } = useModalContext();
 
    const handleMapClick = useCallback((event: MapsGLCoordinateEvent) => {
        if (event?.coord) {
            const { lat, lon } = event.coord;
 
            setCoordinates({ lat, lon });
            setModalData({ id: 'data-viewer' }); // Show the DataViewer
 
            map?.flyTo({
                center: [lon, lat],
                essential: true
            });
        }
    }, [map, setModalData]);
 
    return (
        <Anchor.Position offset={12}>
            <MapsGLMapControllerProvider
                accessKeys={accessKeys}
                strategy="mapbox"
                map={map}
                onClick={handleMapClick}
            >
                <LocationProvider coordinates={coordinates}>
                    <LocalWeatherViewer />
                </LocationProvider>
            </MapsGLMapControllerProvider>
        </Anchor.Position>
    );
};

Finally, wrap your application in the AppProviders and pass the WeatherMap component:


<AppProviders>
    <WeatherMap />
</AppProviders>

For more information about available cards and customization options, refer to the DataViewer documentation. For details on setting up the map and controller, see the Add a map controller with controls example.