Map System

Map System

This project integrates MapLibre for rendering interactive maps and GeoServer for spatial data management. The map system enables users to visualize, interact with, and manipulate geospatial data efficiently.

Important Note on Function Documentation

Each function in the project is documented using TSDoc comments within its respective file. For detailed explanations of function parameters, return values, and usage, please refer directly to the corresponding source files in the project.

For example:

• API functions → Check store/geoserver.ts and store/participation.ts.
• Filtering functions → See components/Map/Layer/Filter/AttributeFiltering.vue and GeometryFiltering.vue.
• State management functions → Refer to store/map.ts, store/filter.ts, etc.

For a complete breakdown of how each function works, refer to its respective TypeScript file and its TSDoc comments.

Technology Stack

• MapLibre – Client-side map rendering.
• GeoServer – Backend for serving spatial data.
• Turf.js – Geospatial analysis and filtering.

Map System Architecture

The core map components are located in src/components/Map/ and are responsible for rendering and interacting with the map.

📂 components
 ┣ 📂 Map            # Map-related components
 ┃ ┣ 📂 Buffer       # Buffer analysis components
 ┃ ┣ 📂 Layer        # Layer management and filtering
 ┃ ┃ ┣ 📂 Draw       # Drawing-related components
 ┃ ┃ ┣ 📂 Filter     # Filtering and query components
 ┃ ┣ 📜 MapContainer.vue   # Initializes and renders the map
 ┃ ┣ 📜 MapAttributeDialog.vue # Displays attribute information

1. Core Map Components

MapContainer.vue

Purpose:

• Initializes and renders the MapLibre map.
• Loads base maps and custom layers.
• Provides interaction handling (click, zoom, pan).

When to Use:

• Always included in pages requiring a map view.

MapAttributeDialog.vue

Purpose:

• Displays attribute information of selected features.

When to Use:

• Used in conjunction with layer selection and filtering.

---

2. Layer Management Components

MapLayerListing.vue

Purpose:

• Displays active layers on the map.
• Allows toggling layer visibility.
• Allows editing style of the layer.

MapLayerResultTable.vue

Purpose:

• Shows tabular data for map features.
• Integrated with GeoServer vector layers.

When to Use:

• Used when displaying tabular attributes of geospatial features.

---

3. Drawing & Buffer Components

DrawContainer.vue

Purpose:

• Provides drawing tools for polygons, lines, and points.

BufferContainer.vue

Purpose:

• Enables buffer analysis on selected geometries.

When to Use:

• When users need to analyze proximity-based spatial queries.

---

4. Filtering & Query Components

AttributeFiltering.vue

Purpose:

• Filters layers based on attributes.
• Works only with vector layers served from GeoServer.

GeometryFiltering.vue

Purpose:

• Filters features based on spatial relationships.
• Uses Turf.js for geospatial analysis.

When to Use:

• When applying attribute-based or geometry-based filtering to map data.

---

Integration with State Management

Map state is managed using Pinia (store/map.ts).

• Stores active layers.
• Maintains map center and zoom state.
• Handles drawing and filtering state.
• Filtering, drawing and buffering has their own store files.

---

For further customization, refer to MapLibre and Turf.js documentation.