Angular et l'API Adresse du gouvernement

Utilisation de @placeme/ngx-geo-api-gouv-address, une librairie Angular 9+ d'appel de l'API Adresse du gouvernement.

Robin Coma Delperier

Consultant

Robin Coma Delperier
Angular et l'API Adresse du gouvernement

17 avr. 2020

Introduction

Pour les besoins d'un de nos projets, nous avons réalisé une librairie Angular 9 pour utiliser l'API Adresse mis à disposition par le gouvernement : https://geo.api.gouv.fr/adresse

Cette api permet de remonter "La Base Adresse Nationale", qui est une base de données qui a pour but de référencer l'intégralité des adresses du territoire français.

Cette librairie, compatible Universal (SSR), permet un typage fort des ressources GeoJSON ainsi que l'utilisation de RxJS.

Elle couvre deux cas d'usage :

  • Retrouver les informations d'une Adresse (coordonnées, ville...)
  • Trouver l'adresse la plus proche d'un lieu géographique

Nous avons pensé qu'elle pourrait intéresser la communauté, c'est pour cette raison que nous l'avons rendu disponible pour tous !

Installation

npm install @placeme/ngx-geo-api-gouv-address --save

Cette librairie manipule des objets GeoJSON, vous devrez donc aussi installer cette dépendance afin de bénéficier du typage.

npm install geojson --save

Usage

Import du module GeoApiGouvAddressModule:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { GeoApiGouvAddressModule } from "@placeme/ngx-geo-api-gouv-address";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, GeoApiGouvAddressModule.forRoot()],
})
export class AppModule {}

Utilisation du service GeoApiGouvAddressService:

API de recherche d'adresses par texte :

import { Component, OnInit } from "@angular/core";
import {
  GeoApiGouvAddressResponse,
  GeoApiGouvAddressService,
} from "@placeme/ngx-geo-api-gouv-address";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  constructor(private geoApiGouvAddressService: GeoApiGouvAddressService) {}

  ngOnInit(): void {
    this.geoApiGouvAddressService
      .query({ q: "27 rue des Blanchers, 31000 Toulouse" })
      .subscribe((geoApiGouvAddressResponse: GeoApiGouvAddressResponse) => {
        console.log(geoApiGouvAddressResponse);
      });
  }
}

Le service query permet d'utiliser tous les paramètres de l'API, voici la définition de l'interface QueryRequestParams :

interface QueryRequestParams {
  q: string;
  limit?: number;
  autocomplete?: number;
  lat?: number;
  lon?: number;
  type?: GeoApiGouvAddressType;
  postcode?: string;
  citycode?: string;
}

API de recherche d'adresses par coordonnées :

import { Component, OnInit } from "@angular/core";
import {
  GeoApiGouvAddressResponse,
  GeoApiGouvAddressService,
} from "@placeme/ngx-geo-api-gouv-address";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  constructor(private geoApiGouvAddressService: GeoApiGouvAddressService) {}

  ngOnInit(): void {
    this.geoApiGouvAddressService
      .reverse({ lat: 43.602508, lon: 1.437591 })
      .subscribe((geoApiGouvAddressResponse: GeoApiGouvAddressResponse) => {
        console.log(geoApiGouvAddressResponse);
      });
  }
}

Le service reverse permet d'utiliser tous les paramètres de l'API, voici la définition de l'interface ReverseRequestParams :

interface ReverseRequestParams {
  lat: number;
  lon: number;
  type?: GeoApiGouvAddressType;
}

Utilisation de la réponse GeoApiGouvAddressResponse :

La réponse est au format standardisé GeoJSON, voici la définition de l'interface ReverseRequestParams :

import { Feature, FeatureCollection } from "geojson";

export type GeoApiGouvAddressType =
  | "housenumber"
  | "street"
  | "locality"
  | "municipality";

export interface GeoApiGouvAddress {
  id: string;
  type: GeoApiGouvAddressType;
  score: number;
  housenumber?: string;
  name?: string;
  postcode: string;
  citycode: string;
  city: string;
  district?: string;
  oldcitycode?: string;
  oldcity?: string;
  context: string;
  label: string;
  x: number;
  y: number;
  importance: number;
}

export interface GeoApiGouvAddressFeatureCollection extends Feature {
  properties: GeoApiGouvAddress;
}

export interface GeoApiGouvAddressResponse extends FeatureCollection {
  features: GeoApiGouvAddressFeatureCollection[];
}

Utilisation de cette api :

Cette API ne nécessite pas d'authentification et permet de faire 10 appels par IP / seconde.