ISS Live Map

Third-party JavaScript Library,API,JSON

This project challenged me to integrate a third-party JavaScript library—Leaflet.js—to build a fully functional, real-time map that tracks the International Space Station (ISS) as it orbits Earth. The assessment focused on practical JavaScript skills, API consumption, JSON handling, and interactive front-end development techniques beyond static web design.

The final product is a clean, responsive page displaying an interactive world map, a custom-designed marker icon, and live-updating ISS coordinates retrieved from a public API.

Role: Front-End Designer & Developer

I was responsible for:

  • Understanding the API structure, JSON data, and endpoint behaviour.

  • Implementing Leaflet.js to render the interactive map.

  • Designing, creating, and integrating a custom SVG marker icon.

  • Building real-time tracking functionality using asynchronous JavaScript.

  • Ensuring all scripts load unobtrusively and efficiently.

Outcomes

  • A fully functioning real-time ISS tracking map, updating seamlessly as the station moves across Earth.

  • Clean, standards-compliant code that meets all assessment criteria.

  • A polished custom marker icon that strengthens visual clarity and personalises the project.

  • Strengthened skills in:

    • API requests and JSON parsing

    • Leaflet.js maps and interactive UI

    • Asynchronous JavaScript and timed updates

    • Externalised, unobtrusive script handling

    • Custom asset integration and performance considerations

screencapture iss
view website