⚡ Angular Tomtom API

• Angular app to display map data from the Tomtom API
• Note: to open web links in a new window use: ctrl+click on link

*** Note: to open web links in a new window use: ctrl+click on link**

📄 Table of contents

• ⚡ Angular Tomtom API
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Displays a Tomtom zoomable map that shows user position with full-screen and zoom options

📷 Screenshots

📶 Technologies

• Angular v16
• Node module: @tomtom-international/web-sdk-maps v6
• Tomtom developer API

💾 Setup

• Install dependencies by running npm i
• See Tomtom: Angular Map Display API integration tutorial and add code as shown
• Get yourself an API key from Tomtom - it's free :-) and add it to environment.ts
• Run ng serve to start a server on port 4200
• Run npm run build to create build file in dist/angular-tomtom-api directory.

💻 Code Examples

• extract from app.component.ts: function to get user position

private getUserPosition = (): Observable<Position> => {
    const userPosition = new Observable((observer: Subscriber<any>) => {
      navigator.geolocation
        ? navigator.geolocation.getCurrentPosition((pos: any) => {
            observer.next({
              latitude: pos.coords.latitude,
              longitude: pos.coords.longitude,
            });
            observer.complete();
          })
        : observer.error();
    });
    return userPosition;
  };

🆒 Features

• Not much code required to get a zoomable world map

📋 Status & To-Do List

• Status: Working. Size of build file: 9.46MB - nearly all Vendor files
• To-Do: Nothing

👏 Inspiration

• Tomtom: Angular Map Display API integration tutorial
• Tomtom documentation

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com