🌍 Interactive World Map

An interactive, data-driven world map built with Angular, integrating real-time country data from the World Bank API.

📌 Project Overview

This project is an Angular-based web application that visualizes a world map and allows users to explore country-specific data, such as population and other key statistics. It demonstrates best practices in:

• Angular services and dependency injection
• HTTP client integration with observables
• Reactive programming using RxJS
• Clean and modular architecture

✨ Features

• 🗺️ Interactive world map visualization
• 📊 Real-time data fetching from the World Bank API
• 👥 Population and country-specific metric display
• 💡 Modular Angular services and reusable components
• 📱 Fully responsive and mobile-friendly UI

🛠️ Technologies Used

• Angular (v20.0.5)
• TypeScript
• RxJS
• Angular HttpClientModule
• World Bank API

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Angular CLI

Installation

git clone https://github.com/your-username/interactive-world-map.git
cd interactive-world-map
npm install
ng serve

💻 Usage

Click on any country on the map to view detailed, real-time data.

All data is fetched dynamically using the WorldBankAPIService.

🌐 API Integration

This project uses the World Bank API to retrieve:

• Country details by ID
• Population statistics
• Other economic and development indicators

Data is fetched via Angular's HttpClient inside a custom service (WorldBankAPIService).

🤝 Contributing

Contributions are welcome! Feel free to fork the repository, open issues, or submit pull requests.