Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Application Leaflet : Guide pour débutants

Bonjour, futurs superstars du codage ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde d'AngularJS et de Leaflet. Ne vous inquiétez pas si ces termes vous semblent étrangers maintenant - d'ici la fin de ce tutoriel, vous parlevez couramment le "web map" en un rien de temps !

AngularJS - Leaflet Application

Qu'est-ce que AngularJS et Leaflet ?

Avant de plonger dans le code, définissons ce que sont ces technologies :

AngularJS

AngularJS est un puissant framework JavaScript qui nous aide à construire des applications web dynamiques. Pensez à lui comme un assistant super-intelligent qui organise votre code et rend votre site web interactif.

Leaflet

Leaflet est une bibliothèque JavaScript open-source pour des cartes interactives mobiles. C'est comme Google Maps, mais vous êtes le patron et vous décidez exactement à quoi votre carte ressemble et comment elle fonctionne !

Maintenant que nous avons fait les présentations, mettons les mains à la pâte et commencer à construire notre propre application de carte !

Configuration de notre projet

Premierement, nous devons configurer notre projet. Ne vous inquiétez pas, c'est plus simple que monter du mobilier IKEA !

Étape 1 : Créer le fichier HTML

Créez un nouveau fichier appelé index.html et collez le code suivant :

<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>Mon incroyable application de carte</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
#map { height: 400px; }
</style>
</head>
<body ng-controller="MapController">
<div id="map"></div>
<script src="app.js"></script>
</body>
</html>

Ce fichier HTML est comme le squelette de notre application. Il inclut toutes les bibliothèques nécessaires (AngularJS et Leaflet) et configure un div où notre carte vivra.

Étape 2 : Créer le fichier JavaScript

Maintenant, créons notre fichier app.js. C'est là que la magie opère !

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© Contributeurs OpenStreetMap'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Une jolie popup CSS3.<br> Facilement personnalizable.')
.openPopup();
});

Reprenons cela :

  1. Nous créons un module AngularJS appelé 'leafletApp'.
  2. Nous définissons un contrôleur appelé 'MapController'.
  3. À l'intérieur du contrôleur, nous initialisons une carte Leaflet, définissons sa vue sur Londres (vous pouvez changer cela pour n'importe quelles coordonnées que vous aimez), et ajoutons une couche de tuiles provenant d'OpenStreetMap.
  4. Enfin, nous ajoutons un marqueur à notre carte avec une popup.

Comprendre le code

Maintenant que nous avons notre carte de base en marche, explorons plus en détail ce que fait chaque partie de notre code.

Le fichier HTML

<html ng-app="leafletApp">

Cette ligne indique à AngularJS que cet élément est la racine de notre application. Tout élément à l'intérieur de celui-ci sera géré par AngularJS.

<body ng-controller="MapController">

Cette ligne associé notre MapController au corps de notre HTML. Cela signifie que toute la logique que nous définissons dans notre MapController sera disponible dans le corps.

<div id="map"></div>

C'est où notre carte sera rendue. Leaflet utilisera ce div pour créer la carte.

Le fichier JavaScript

var app = angular.module('leafletApp', []);

Cette ligne crée un nouveau module AngularJS. Pensez à un module comme un conteneur pour différentes parties de votre application.

app.controller('MapController', function($scope) {
// Logique du contrôleur ici
});

C'est où nous définissons notre MapController. Le $scope est un objet spécial qui agit comme un pont entre le contrôleur et la vue (notre HTML).

var map = L.map('map').setView([51.505, -0.09], 13);

Cette ligne initialise notre carte Leaflet. 'map' est l'id de notre div, [51.505, -0.09] sont les coordonnées pour le centre de notre carte (latitude et longitude), et 13 est le niveau de zoom.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© Contributeurs OpenStreetMap'
}).addTo(map);

Cela ajoute une couche de tuiles à notre carte. Les couches de tuiles sont les images réelles de la carte. Ici, nous utilisons des tuiles OpenStreetMap.

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Une jolie popup CSS3.<br> Facilement personnalizable.')
.openPopup();

Cela ajoute un marqueur à notre carte aux coordonnées spécifiées, lie une popup à ce marqueur, et ouvre la popup.

Ajouter de l'interactivité

Maintenant que nous avons notre carte de base, faisons-la plus interactive ! Nous allons ajouter une fonctionnalité qui permet aux utilisateurs de cliquer sur la carte pour ajouter de nouveaux marqueurs.

Mettez à jour votre fichier app.js comme suit :

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© Contributeurs OpenStreetMap'
}).addTo(map);

$scope.markers = [];

map.on('click', function(e) {
var marker = L.marker(e.latlng).addTo(map);
$scope.markers.push(marker);
$scope.$apply();
});

$scope.removeMarkers = function() {
$scope.markers.forEach(function(marker) {
map.removeLayer(marker);
});
$scope.markers = [];
};
});

Maintenant, mettez à jour votre index.html pour inclure un bouton pour supprimer les marqueurs :

<body ng-controller="MapController">
<div id="map"></div>
<button ng-click="removeMarkers()">Supprimer tous les marqueurs</button>
<script src="app.js"></script>
</body>

Reprenons ce que nous avons ajouté :

  1. Nous créons un tableau $scope.markers pour suivre tous nos marqueurs.
  2. Nous ajoutons un écouteur d'événement à notre carte qui crée un nouveau marqueur chaque fois que l'utilisateur clique sur la carte.
  3. Nous créons une fonction removeMarkers qui supprime tous les marqueurs de la carte et efface notre tableau de marqueurs.
  4. Nous ajoutons un bouton à notre HTML qui appelle la fonction removeMarkers lorsque le bouton est cliqué.

Conclusion

Félicitations ! Vous venez de construire votre première application de carte interactive avec AngularJS et Leaflet. Vous avez appris à configurer une carte de base, ajouter des marqueurs, et même implémenter des interactions utilisateur.

Souvenez-vous, c'est seulement le début. Le monde des cartes web est vaste et passionnant, avec des possibilités infinies de personnalisation et d'ajout de fonctionnalités. Continuez à explorer, continuez à coder, et surtout, amusez-vous !

Voici un tableau récapitulatif des principales méthodes que nous avons utilisées :

Méthode Description
L.map() Crée une carte sur l'élément HTML spécifié
setView() Définit la vue de la carte avec un centre et un niveau de zoom
L.tileLayer() Ajoute une couche de tuiles à la carte
L.marker() Ajoute un marqueur à la carte
bindPopup() Lie une popup à un marqueur
openPopup() Ouvre la popup pour un marqueur
on() Ajoute un écouteur d'événement à la carte
addTo() Ajoute un objet à la carte
removeLayer() Supprime une couche de la carte

Bonne carte, futurs cartographes !

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Application de minuteur
Tutoriel suivant:
AngularJS - Application Last.fm