Blog

Géolocalisation

Géolocalisation

Bonjour et bienvenue !

Avant de vous lancer dans la réalisation de cette application, il est important de posséder un niveau de base en Angular.

Nous allons développer une application web de géolocalisation en utilisant le framework Angular et la bibliothèque Mapbox.

Avant de commencer, veuillez installer les dépendances requises : 

				
					npm install --save @types/mapbox-gl

Après avoir installé les dépendances, ouvrez votre projet Angular via un éditeur de code.

Dans le fichier HTML de votre projet, copiez le code suivant : 

				
					<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
<div id="map" class="map-container"></div>

Nous souhaitons que notre application occupe l’intégralité de l’espace disponible sur notre poste de travail. Pour cela, nous lui appliquons une feuille de style CSS.

Pour réaliser cela, dans le fichier CSS de votre projet, veuillez copier le code suivant :

				
					.map-container{
    width: 100%;
    height: 100%;
    position: absolute;
}

Maintenant, passons au TypeScript. Nous allons écrire la dernière partie de ce tutoriel.

Dans le fichier TS de votre projet, vous allez écrire le code suivant :

				
					import { Component, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-localisation',
  templateUrl: './localisation.component.html',
  styleUrls: ['./localisation.component.scss']
})

export class LocalisationComponent implements OnInit{
  map:mapboxgl.Map | undefined;
  style = 'mapbox://styles/mapbox/streets-v12'
  lat = 35.6929709;
  lng = -116.9788651;
  zoom = 2;

  constructor(){
    (mapboxgl as any).accessToken = environment.mapboxKey;
  }

  ngOnInit(): void {
    this.buildMap();
  }

  buildMap() {
    const navControl = new mapboxgl.NavigationControl({
      visualizePitch: true
    })
    this.map = new mapboxgl.Map({
      container: 'map',
      style: this.style,
      zoom: this.zoom,
      center: [this.lng, this.lat],
      attributionControl: false
      /*
        projection:{
        name:'globe'
      }
      */
    });
    this.map.addControl(navControl, 'top-right');
    this.map.addControl(new mapboxgl.GeolocateControl({
      positionOptions:{
        enableHighAccuracy:true
      },
      trackUserLocation: true,
      showUserHeading: true
    }))
  }
}

En cliquant sur l’un des deux boutons « GitHub » ou « Voir le résultat » :

  • Si vous cliquez sur « GitHub », vous serez redirigé vers la page GitHub du projet et pourrez télécharger l’application complète.
  • Si vous cliquez sur « Voir le résultat », vous serez redirigé vers la page de l’application où vous pourrez voir le résultat.
GitHub
Voir le résultat