https://github.com/maitepv87/map-explorer
Map Explorer is a React and TypeScript-based mapping application integrating OpenStreetMap API. It features Context API for state management, responsive UI improvements, and accessibility enhancements. Users can search locations, view details, and interact with dynamic maps using Leaflet.
https://github.com/maitepv87/map-explorer
context-api fecth-api leaflet-map react-leaflet tailwind-css
Last synced: about 2 months ago
JSON representation
Map Explorer is a React and TypeScript-based mapping application integrating OpenStreetMap API. It features Context API for state management, responsive UI improvements, and accessibility enhancements. Users can search locations, view details, and interact with dynamic maps using Leaflet.
- Host: GitHub
- URL: https://github.com/maitepv87/map-explorer
- Owner: maitepv87
- Created: 2025-05-29T10:56:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-23T21:03:23.000Z (8 months ago)
- Last Synced: 2025-10-23T23:17:15.716Z (8 months ago)
- Topics: context-api, fecth-api, leaflet-map, react-leaflet, tailwind-css
- Language: TypeScript
- Homepage: https://map-explorer-seven.vercel.app
- Size: 52.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Map Explorer**
A mapping application integrating **OpenStreetMap API, React, TypeScript, and Context API** for modular state management.
---
## Live Demo
Explore the app live on Vercel:
🔗 [map-explorer-seven.vercel.app](https://map-explorer-seven.vercel.app)
---
## **Description**
Map Explorer is a technical demo showcasing how to interact with OpenStreetMap API using React, TypeScript, and Leaflet. It features **Context API for centralized state management**, enabling seamless data handling and improved scalability. The project allows users to search for locations and visualize them on an interactive map, making it an excellent portfolio piece for working with geospatial data.
This project is part of my portfolio to showcase **editorial clarity**, **emotionally aware UI feedback**, and **scalable architecture** using modern React tools.
---
### **Key Features**
- Search for places using OpenStreetMap’s Nominatim API
- Display a dynamic marker for selected locations
- Smooth map navigation (flyTo) upon selecting a place
- Responsive UI for better user experience
---
## Technologies Used
- **React** – Frontend library for building modular UI components
- **Context API & useReducer** – Centralized state management for scalability
- **TypeScript** – Static typing for better reliability and maintainability
- **Leaflet & react-leaflet** – Interactive mapping with OpenStreetMap integration
- **OpenStreetMap API (Nominatim)** – Location search and geocoding
- **Vite** – Fast development and optimized build process
- **TailwindCSS** – Utility-based styling for responsive and modern UI
- **ARIA Labels & Accessibility Best Practices** – Improved usability for all users
---
## **Getting Started**
### **Installation & Setup**
Follow these steps to run the project locally:
1. Clone the repository:
```bash
git clone https://github.com/maitepv87/map-explorer.git
cd map-explorer
```
2. Install dependencie:
```bash
npm install
```
3. Set up environment variables in a .env file:
```ini
VITE_API_URL=https://nominatim.openstreetmap.org
```
4. Start the development server:
```bash
npm run dev
```
Then open http://localhost:3000 in your browser.
---
## Future Enhancements
- Save favorite locations for quick access
- Enhance map styles and UI interactions
- Integrate OpenRouteService API for route navigation