React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

OpenLayers ReactJS Project

Overview

This project is a web application built with ReactJS and OpenLayers, aimed at providing an interactive map experience with features like dark and light modes, geocoding-based location search, and weather information popups. The application leverages React Context API, useRef, and useState hooks for state management and component interaction.

Features

• Dark and Light Modes: Toggle between dark and light themes for the map to enhance user experience.
• Geocoding Search: Search for locations using geocoding services and display a popup with weather information for the searched location.
• Interactive Map Click: Click on the map to retrieve weather data for the clicked location.
• Clustered Markers: View clustered markers on the map, with popups emerging based on clustering characteristics.

Technologies Used

• ReactJS: Frontend library for building user interfaces.
• OpenLayers: JavaScript library for displaying map data in web browsers.
• Context API: Manage global state in React applications.
• useRef and useState: React hooks for managing state and references within components.
• Geocoding API: Service to convert addresses into geographic coordinates.
• Weather API: Service to fetch weather data for specific locations.

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/openlayers-react-project.git
   cd openlayers-react-project
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

Usage

1. Toggle Dark/Light Mode:

   • Use the provided button to switch between dark and light map themes.

2. Search for a Location:

   • Enter a location in the search bar.
   • The map will center on the searched location, and a popup with weather information will appear.

3. Click on the Map:

   • Click any location on the map.
   • A popup will display the weather data for the clicked location.

4. View Clustered Markers:

   • Zoom in and out of the map to see markers clustered together.
   • Click on a cluster to view individual markers and their information.

Code Highlights

Context API for Theme Management

The ThemeContext is used to manage the dark and light mode states across the application.

Map Component with OpenLayers

The MapComponent uses useRef to interact with the OpenLayers map instance.

Contributing

Contributions are welcome! Please fork the repository and create a pull request with your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

By providing a comprehensive overview and usage instructions, this README file will help users understand the purpose of the project and how to get started with it quickly.