Implémentation de cartes thermiques dynamiques dans les applications angulaires

Dans l’article, je voudrais décrire un moyen d’implémenter facilement une carte thermique simple dans une application angulaire. Pour cela, j’utiliserai deux bibliothèques externes, qui seront Leaflet.js et Heatmaps.js. Avant la mise en place de la carte thermique, je préfère commencer par une brève introduction aux bibliothèques que j’ai mentionnées ci-dessus.

Leaflet.js

C’est l’une des bibliothèques JavaScript les plus populaires pour les cartes interactives. Il compte plus de 30 000 étoiles sur GitHub. Il existe une alternative comme OpenLayers. Mais dans mon exemple, j’ai choisi un dépliant.

Heatmap.js

Bibliothèque JavaScript pour la mise en œuvre des cartes thermiques. Il est très simple d’utilisation et il suffit de quelques lignes de code pour apporter une visualisation thermique. Le plus important dans notre cas est que cette bibliothèque contient le plugin pour un dépliant.

Mise en œuvre

Il est temps de commencer la mise en œuvre des cartes thermiques dynamiques. Tout d’abord, nous devons créer un projet angulaire simple en utilisant la commande suivante.

ng new heatmap

Maintenant, nous devons installer les bibliothèques requises.

npm install leaflet 

npm install heatmap.js

Pour pouvoir représenter correctement les tuiles de carte, nous devons ajouter des liens vers les styles de brochure dans le fichier angular.json. En plus de cela, des liens vers le code JavaScript des bibliothèques devraient également être ajoutés.

"styles": [
	"./node_modules/leaflet/dist/leaflet.css",
	"src/styles.scss"
],
"scripts": [
	"./node_modules/leaflet/dist/leaflet.js",
	"./node_modules/heatmap.js/build/heatmap.js",
	"./node_modules/heatmap.js/plugins/leaflet-heatmap/leaflet-heatmap.js"
]

L’étape suivante consiste à implémenter la représentation cartographique dans l’application. Pour cela, nous devons ajouter un div dans le app.component.html fichier avec id= »carte ». Ensuite, nous pouvons le styliser en attribuant largeur: 100vw et hauteur: 100vh.

À l’intérieur de app.component.ts, nous devons écrire le code suivant :

import {Component, OnInit} from '@angular/core';
import * as leaflet from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private map: any;

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

  private initMap(): void {
    // Initialising map with center point by using the coordinates
    // Setting initial zoom to 3
    this.map = leaflet.map('map', {
      center: [ 39.8282, -98.5795 ],
      zoom: 3
    });

    // Initialising tiles to the map by using openstreetmap
    // Setting zoom levels
    const tiles = leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      minZoom: 3,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    // Adding tiles to the map
    tiles.addTo(this.map);
  }
}

Pour pouvoir afficher les couches de chaleur, nous devons ajouter quelques données. Pour cela, j’ai créé un fichier séparé dans le projet qui contient un ensemble de données généré aléatoirement.

export const heatData: any = {
  data: [
    {lat: 48.37, lng: 31.16, count: 143},
    {lat: 49.37, lng: 36.16, count: 133},
    {lat: 43.32, lng: 37.13, count: 163},
    {lat: 39.33, lng: 38.42, count: 143},
    {lat: 42.31, lng: 34.65, count: 133},
    {lat: 43.39, lng: 32.10, count: 163},
  ]
}

Enfin, nous pouvons implémenter des couches de chaleur en améliorant la logique dans app.component.ts. Voilà à quoi ressemble l’ensemble du composant à la fin:

import {Component, OnInit} from '@angular/core';
import * as leaflet from 'leaflet';
import 'heatmap.js';
import {heatData} from "./data";

declare const HeatmapOverlay: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private map: any;

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

  private initMap(): void {
    // Initialising map with center point by using the coordinates
    // Setting initial zoom to 3
    this.map = leaflet.map('map', {
      center: [ 39.8282, -98.5795 ],
      zoom: 3
    });

    // Initialising tiles to the map by using openstreetmap
    // Setting zoom levels
    const tiles = leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      minZoom: 3,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    // Adding tiles to the map
    tiles.addTo(this.map);

    // Setting up heat layer config
    const heatLayerConfig = {
      "radius": 5,
      "maxOpacity": .8,
      "scaleRadius": true,
      // property below is responsible for colorization of heat layer
      "useLocalExtrema": true,
      // here we need to assign property value which represent lat in our data
      latField: 'lat',
      // here we need to assign property value which represent lng in our data
      lngField: 'lng',
      // here we need to assign property value which represent valueField in our data
      valueField: 'count'
    };

    // Initialising heat layer and passing config
    const heatmapLayer = new HeatmapOverlay(heatLayerConfig);

    //Passing data to a layer
    heatmapLayer.setData(heatData);

    //Adding heat layer to a map
    heatmapLayer.addTo(this.map);
  }
}

Et voici à quoi ressemble l’application :

Résumé

Comme vous le voyez, il n’a fallu que quelques lignes de code pour avoir une visualisation des cartes thermiques. En pratique, il peut être utilisé à différentes fins, telles que la représentation du changement climatique, le volume d’événements sur place, ou encore pour le suivi des mouvements. Par exemple, la FIFA utilise des cartes thermiques pour représenter le mouvement des joueurs de football.

J’espère que c’est utile. Le code source d’une application de démonstration que vous pouvez trouver dans mon GitHub.