📚 AtmoSwing Web Viewer Docs

← Back to Home

Map Hooks

Files


Modules

components/map/hooks/useProjectionRegistration

React hook for registering custom map projections with OpenLayers.

components/map/hooks/useOverlayGlobalLayers

Hook for loading and managing global (non-workspace-specific) overlay layers. Supports WMTS and GeoJSON sources with optional periodic refresh.

components/map/hooks/useOverlayConfigLayers

Hook for loading and managing workspace-specific overlay layers (shapefiles). Dynamically adds/removes overlay layers based on workspace configuration.

components/map/hooks/useMapInteractions

Hook for handling map click and pointer interactions with forecast points. Manages entity selection on click and tooltip display on hover.

components/map/hooks/useMapInit

React hook for initializing OpenLayers map with configured layers and controls.

components/map/hooks/useForecastPoints

Hook for rendering forecast points on the map with color-coded values. Handles entity visualization, relevance highlighting, legend updates, and map extent fitting.

components/map/hooks/useDarkMode

React hook for detecting system dark mode preference.

components/map/hooks/useProjectionRegistration

React hook for registering custom map projections with OpenLayers.

module.exports(epsg) ⇒ React.RefObject

Hook that registers a projection with OpenLayers if not already registered. Uses predefined proj4 definitions for known EPSG codes.

Kind: Exported function
Returns: React.RefObject - Ref containing the last registered projection

Param Type Description
epsg string EPSG code (e.g., "EPSG:2154")

Example

useProjectionRegistration('EPSG:2154'); // Registers Lambert-93 for France

module.exports~PREDEFINED : Object

Predefined projection definitions for common EPSG codes.

Kind: inner constant of module.exports

components/map/hooks/useOverlayGlobalLayers

Hook for loading and managing global (non-workspace-specific) overlay layers. Supports WMTS and GeoJSON sources with optional periodic refresh.

module.exports(params) ⏏

Hook that loads global overlay layers defined in runtime configuration. Handles WMTS capabilities adoption, dynamic GeoJSON fetching, refresh timers, abort controllers, and layer switcher panel updates.

Kind: Exported function

Param Type Description
params Object Hook parameters
params.mapReady boolean Whether map is initialized
params.runtimeConfig Object Runtime configuration object
params.overlayGroupRef React.RefObject Ref to overlay layer group
params.layerSwitcherRef React.RefObject Ref to layer switcher control
[params.enqueueSnackbar] function Optional notification callback

Example

useOverlayGlobalLayers({
  mapReady: true,
  runtimeConfig,
  overlayGroupRef,
  layerSwitcherRef,
  enqueueSnackbar: (msg) => console.warn(msg)
});

components/map/hooks/useOverlayConfigLayers

Hook for loading and managing workspace-specific overlay layers (shapefiles). Dynamically adds/removes overlay layers based on workspace configuration.

module.exports(params) ⏏

Hook that manages workspace-specific overlay layers on the map. Loads shapefiles defined in workspace configuration and adds them as vector layers. Automatically cleans up layers when workspace changes.

Kind: Exported function

Param Type Description
params Object Hook parameters
params.mapReady boolean Whether map is initialized
params.runtimeConfig Object Runtime configuration with workspace definitions
params.workspace string Current workspace key
params.overlayGroupRef React.RefObject Ref to overlay layer group
params.layerSwitcherRef React.RefObject Ref to layer switcher control

Example

useOverlayConfigLayers({
  mapReady: true,
  runtimeConfig: config,
  workspace: 'demo',
  overlayGroupRef,
  layerSwitcherRef
});

components/map/hooks/useMapInteractions

Hook for handling map click and pointer interactions with forecast points. Manages entity selection on click and tooltip display on hover.

module.exports(params) ⏏

Hook that sets up map interaction handlers for forecast point selection and tooltips. Handles single click for entity selection and pointer move/out for tooltip display.

Kind: Exported function

Param Type Description
params Object Hook parameters
params.mapRef React.RefObject Ref to OpenLayers map instance
params.forecastLayerRef React.RefObject Ref to forecast vector layer
params.setSelectedEntityId function Function to set selected entity ID
params.setTooltip function Function to set tooltip state (x, y, name, valueRaw)
params.mapReady boolean Whether map is initialized

Example

useMapInteractions({
  mapRef,
  forecastLayerRef,
  setSelectedEntityId: (id) => console.log('Selected:', id),
  setTooltip: (tooltip) => console.log('Tooltip:', tooltip),
  mapReady: true
});

components/map/hooks/useMapInit

React hook for initializing OpenLayers map with configured layers and controls.

module.exports(params) ⇒ Object

Hook that initializes an OpenLayers map with base layers, overlays, and controls.

Kind: Exported function
Returns: Object - Map refs and ready state

Param Type Description
params Object Hook parameters
params.t function Translation function
params.runtimeConfig Object Runtime config with layer definitions
params.enqueueSnackbar function Notification function

Example

const { containerRef, mapRef, mapReady } = useMapInit({ t, runtimeConfig, enqueueSnackbar });

components/map/hooks/useForecastPoints

Hook for rendering forecast points on the map with color-coded values. Handles entity visualization, relevance highlighting, legend updates, and map extent fitting.

module.exports(params) ⏏

Hook that renders forecast entities as colored points on the OpenLayers map. Updates point colors based on forecast values, highlights relevant entities, manages legend stops, and fits map extent to data.

Kind: Exported function

Param Type Description
params Object Hook parameters
params.ENTITIES_SOURCE_EPSG string EPSG code for entity coordinates
params.mapReady boolean Whether map is initialized
params.entities Array Array of entity objects with coordinates
params.entitiesWorkspace string Workspace key for entities
params.entitiesKey string Cache key for current entities
params.relevantEntities Set Set of relevant entity IDs
params.workspace string Current workspace
params.forecastValuesNorm Object Normalized forecast values by entity ID
params.forecastValues Object Raw forecast values by entity ID
params.forecastUnavailable boolean Whether forecast data is unavailable
params.forecastLayerRef React.RefObject Ref to forecast vector layer
params.mapRef React.RefObject Ref to OpenLayers map instance
params.setLegendStops function Setter for legend gradient stops
params.setLegendMax function Setter for legend maximum value

Example

useForecastPoints({
  ENTITIES_SOURCE_EPSG: 'EPSG:4326',
  mapReady: true,
  entities: [...],
  forecastValuesNorm: { 1: 0.5, 2: 0.8 },
  forecastLayerRef,
  mapRef,
  setLegendStops,
  setLegendMax
});

components/map/hooks/useDarkMode

React hook for detecting system dark mode preference.

module.exports() ⇒ boolean

Hook that detects and tracks the user's dark mode preference. Listens to system preference changes via prefers-color-scheme media query.

Kind: Exported function
Returns: boolean - True if dark mode is preferred, false otherwise
Example

const isDarkMode = useDarkMode();
const tileLayer = isDarkMode ? 'dark-tiles' : 'light-tiles';