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 configurationsonLoadSample: Function to handle sample selectionloadSampleConfigurations: Function to load sample configurationserror: Error object for error displayisMapLoading: Boolean for loading statelocale: 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 iconsSampleMapPanel: Displays information about the current sample map
Props:
currentSample: Object containing current sample map information