Components

src/components: UI Components for Map Data Loading and Control

The src/components directory contains React components that handle map data loading, visualization controls, and user interface elements for the application.

1. Load Data Modal Components

1.1. LoadRemoteMap

Located in load-remote-map.js, this component provides a form interface for loading map data from remote URLs.

Key Features:

  • URL input field with validation
  • Error handling and display
  • CORS information and examples
  • Submit button for loading remote map data

Props:

  • onLoadRemoteMap: Function to handle loading remote map data

1.2. QueryInputMap

Located in query-input-map.js, this component provides a form interface for querying map data with specific parameters.

Key Features:

  • Query type selection (points, routes, trips)
  • Time range inputs
  • Geographical boundary inputs
  • Threshold and max entries controls
  • Dynamic URL construction based on inputs

Props:

  • onLoadApiData: Function to handle API data loading

1.3. SampleMapsTab

Located in sample-maps-tab.js, this component displays a tab for accessing sample map data.

Key Features:

  • Sample map icon display
  • "Try Sample Data" action button
  • Responsive design

Props:

  • onClick: Function to handle sample map selection

1.4. SampleDataViewer

Located in sample-data-viewer.js, this component displays a gallery of sample maps.

Key Features:

  • Grid layout of sample maps
  • Image previews
  • Map size information
  • Loading states
  • Error handling

Props:

  • sampleMaps: Array of sample map configurations
  • onLoadSample: Function to handle sample selection
  • loadSampleConfigurations: Function to load sample configurations
  • error: Error object for error display
  • isMapLoading: Boolean for loading state
  • locale: Current locale setting

2. Map Control Components

2.1. MapControl

Located in map-control.js, this component provides a floating panel with map information and controls.

Key Features:

  • Collapsible information panel
  • Project title and description display
  • External links to data and configuration
  • Markdown rendering support
  • Responsive design

Subcomponents:

  • LinkButton: Renders external links with icons
  • SampleMapPanel: Displays information about the current sample map

Props:

  • currentSample: Object containing current sample map information