Map Engine Integration - Githubissues

Objective

The objective of this task is to integrate a map engine into our GeoDashboard application and add basemap tiles to provide a visual foundation for geographic data. Additionally, we need to handle zoom functionality and ensure a smooth user interactive experience.

Task Details

1. Map Engine Integration

a. Map Engine Selection: Choose between react-map-gl or vanilla maplibre for map engine integration. Consider factors like ease of use, compatibility, and community support when making your choice.

b. Set Up Map Engine: Install and configure the chosen map engine library within the Braga GeoDashboard project.

2. Basemap Tiles

a. Basemap Selection: Choose an appropriate basemap style or source that aligns with the GeoDashboard's purpose. Common sources include OpenStreetMap, Mapbox, or custom tilesets.

b. Basemap Integration: Implement the selected basemap tiles within the map engine. Ensure that the basemap serves as the background layer upon which additional spatial data will be overlaid.

3. Zoom Functionality

a. Default Zoom Level: Set an initial default zoom level for the map. This level should provide an appropriate view of the Braga region when the GeoDashboard loads.

b. Zoom Controls: Implement zoom controls or buttons that allow users to zoom in and out of the map. Ensure that these controls are easily accessible and intuitive.

c. Limit Zoom Extents: Define minimum and maximum zoom levels to restrict the extent to which users can zoom in and out. This prevents over-zooming or under-zooming.

4. User Interactivity

a. Panning: Enable users to pan the map by clicking and dragging. Ensure smooth and responsive panning.

b. Tooltip on Hover: Implement tooltips that display location-specific information when users hover over map elements. This enhances user engagement and provides context.

c. Double-Click Zoom: Enable double-clicking to zoom in on a specific location on the map. Ensure a smooth transition.

d. Keyboard Controls: Consider adding keyboard controls for zooming (e.g., using "+" and "-" keys) to improve accessibility.

Acceptance Criteria

Basemap tiles are displayed as the background layer on the map.
Zoom functionality allows users to zoom in and out of the map.
User interactivity features, including panning, tooltips on hover, double-click zoom, and keyboard controls, are implemented and function smoothly.

Additional Notes

Ensure that the map engine and basemap tiles contribute to an aesthetically pleasing and informative backdrop for spatial data visualization.
Test the map engine and interactivity features on different browsers and devices to ensure cross-browser compatibility and responsiveness.

bismowibi / learning-map

Map Engine Integration #2