Angular CLI       : 21.1.4
Angular           : 21.1.4
Node.js           : 24.13.1
Package Manager   : npm 11.8.0
Operating System  : linux x64

Package Details:
- @angular/build            : 21.1.4
- @angular/cli              : 21.1.4
- @angular/common           : 21.1.4
- @angular/compiler         : 21.1.4
- @angular/compiler-cli     : 21.1.4
- @angular/core             : 21.1.4
- @angular/forms            : 21.1.4
- @angular/platform-browser : 21.1.4
- @angular/router           : 21.1.4
- rxjs                      : 7.8.2
- typescript                : 5.9.3
- vitest                    : 4.0.18

Project Description

This project develops an interactive world map using the Angular framework. The application features:

Visual interface with SVG map
Mouse event handling for country selection
World Bank API integration for country-specific data
Two-column layout displaying map and country information
Hover effects and click events on country paths

Technical Requirements

Framework: Angular 21.1.4
Language: JavaScript/TypeScript
IDE: VS Code / IntelliJ Ultimate
Version Control: Gitea (git.n8lab.io)
Branch: Working (for all development commits)
No External Libraries: Only Angular framework used

Project Architecture

Phase A: Repository & Configuration ✅

Angular project initialization
README with Student ID and version information
All required configuration files (tsconfig..json, angular.json, package.json)
SVG map asset integration

Phase D: Routing Configuration ✅

Root path (/) auto-redirects to /map
MapComponent routing
Angular Router implementation

Phase C/G: World Bank API Integration ✅

WorldBankService with HttpClient
Service method accepting 2-letter country codes
API endpoint: https://api.worldbank.org/v2/country/{code}
Component method triggering service calls

Phase E: UI Layout ✅

Two-column responsive design
Column 1: Interactive SVG world map
Column 2: Country data display panel
Loading, error, and placeholder states
Professional styling with card layout

Phase F: SVG Interactivity ✅

MapSvgComponent for inline SVG rendering
Event binding on country path elements
Click handlers extracting country codes
Hover effects with CSS transitions
Dynamic API calls on country selection

Data Displayed (6 Properties)

Country Name - Official country name from World Bank
Capital - Capital city
Region - Geographic region classification
Income Level - Economic income level classification
Longitude (Custom Property 1) - Geographic longitude coordinate
Latitude (Custom Property 2) - Geographic latitude coordinate

Features

Interactive Map: Click any country on the SVG map
Real-time Data: Fetches current country data from World Bank API
Visual Feedback: Hover effects show clickable countries
Error Handling: Graceful error messages for API failures
Responsive Design: Mobile-friendly two-column layout
Clean Architecture: Separation of concerns with services and components

Getting Started

Installation

npm install

Development Server

ng serve

Navigate to http://localhost:4200/ - automatically redirects to /map

Build

ng build

Build artifacts will be stored in the dist/ directory.

Git Repository

Repository: https://git.n8lab.io/Shenron/d280-javascript
Branch: Working

Commit History

Each project phase has a dedicated commit:

Phase A: Initial project setup with Angular 21.1.4
Phase A: Add Student ID and SVG map asset
Phase D: Configure routing with root redirect to /map
Phase C: Create World Bank API service with HttpClient
Phase E: Implement two-column UI layout with SVG map and data display
Phase F: Add SVG interactivity with event binding for country selection

Project Structure

d280-javascript/
├── src/
│   ├── app/
│   │   ├── map/                    # Main map component
│   │   ├── map-svg/                # Interactive SVG component
│   │   ├── services/
│   │   │   └── world-bank.ts       # API service
│   │   ├── app.config.ts           # App configuration with HttpClient
│   │   ├── app.routes.ts           # Routing configuration
│   │   └── app.ts                  # Root component
│   ├── assets/
│   │   └── map-image.svg           # SVG world map (1.2MB)
│   ├── index.html
│   └── main.ts
├── angular.json
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.spec.json
└── README.md

Implementation Notes

Angular Standalone Components: Project uses Angular 21 standalone component architecture
RxJS Observables: API calls handled with Observable pattern
SVG Manipulation: Dynamic SVG loading and event handler attachment
TypeScript Interfaces: Type-safe data structures for API responses
CSS Variables: Consistent styling with custom properties
Error Boundaries: Comprehensive error handling throughout

Future Enhancements

Add search functionality for countries
Implement country comparison feature
Add more World Bank data visualizations
Cache API responses for performance
Add unit and integration tests

Developed by: Shenron (Student ID: 010659768)
Course: D280 - JavaScript Programming
Institution: Western Governors University