This project was initially used for a JavaScript Programming course. Versions used for this project:

• Angular CLI: 20.0.3
• Node: 22.16.0
• Package Manager: npm 10.9.2
• OS: win32 x64
• Angular: 20.0.4

Angular Interactive World Map

Overview

This project is a dynamic, interactive web application that provides real-time geographic and economic data for countries worldwide.

Built entirely with the Angular framework, this application utilizes a custom-mapped Scalable Vector Graphics (SVG) interface. The SVG paths are directly bound to Angular event handlers. When a user hovers over a country on the map, the application makes an asynchronous HTTP request to the World Bank API to fetch and display targeted data.

Technologies & Environment

• Framework: Angular
• Language: TypeScript, HTML5, CSS3
• API: The World Bank API
• Core Modules: @angular/common/http, @angular/router

Key Features & Technical Highlights

• Interactive SVG DOM Manipulation: Implements Angular event binding directly onto raw SVG paths. This captures user mouse events and extracts two-letter country codes based on the element being interacted with.
• REST API Integration: Utilizes an injected Angular Service utilizing HttpClient to manage asynchronous HTTP GET requests to the World Bank API.
• State Management & Data Binding: Employs component-level variables to capture, parse, and bind the JSON response data to the DOM in real-time, displaying:
  • Country Name
  • Capital City
  • Region
  • Income Level
  • Latitude
  • Longitude
• Custom Angular Routing: Features configured application routing that intercepts the default URL path and smoothly redirects users to the primary /map interface.
• Responsive UI Layout: Organizes the visual interface into a clean, two-column layout separating the interactive SVG map from the dynamic data display panel.

How to Run Locally

To run this project locally, you will need to have Node.js and the Angular CLI installed on your machine.

1. Clone the repository to your local machine:

   git clone https://github.com/rycorson/angular-interactive-map.git

2. Navigate to the cloned project directory:

   cd angular-interactive-map

3. Install the required node dependencies:

   npm install

4. Start the Angular development server:

   ng serve

5. Open a web browser and navigate to http://localhost:4200/

Author

Ryan Corson

• GitHub: @rycorson
• LinkedIn: https://www.linkedin.com/in/ryan-corson/