https://github.com/mbelmontes7/map
world map calling an API to fetch data and display the name of the country and details
https://github.com/mbelmontes7/map
Last synced: 8 months ago
JSON representation
world map calling an API to fetch data and display the name of the country and details
- Host: GitHub
- URL: https://github.com/mbelmontes7/map
- Owner: mbelmontes7
- Created: 2025-02-11T22:57:45.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-11T23:11:54.000Z (8 months ago)
- Last Synced: 2025-02-12T00:19:53.126Z (8 months ago)
- Size: 133 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
JAVASCRIPT PROGRAMMING
**What the project does**
This project uses the World Bank API to dynamically to fetch and display information about countries by using an SVG. For example, When a user clicks on a country, the id of the clicked path is captured in the getCountryData method and then The id from the clicked country is sent to the API service which fetches detailed information about that country
**How you implemented the requirements**
-Create an HTML layout with two columns
The SVG map is displayed in one column by using the event binding to make the map interactive
The country information panel is displayed in the other column by using a div element with CSS is a way to create two side-by-side columns
### Routing Configuration
Angular's routing
- When users visit the root URL local/host4200, they are automatically redirected to /map.
- The /map route renders the main component the app component, which contains the SVG map and displays country data.
### API Integration
- A service is implemented to make HTTP requests using Angular's provideHttpClient() for API calls
- The method (getcountrydata) then accepts a two-letter country code and retrieves detailed information about the selected country when the user clicks on the map
https://github.com/user-attachments/assets/7ea7c65e-472e-452f-be82-abb230c6aa87