Geocoding con ArcGIS e Angular

In questo articolo vediamo come applicare il geocoding attraverso ArcGIS e Angular.

In pratica andremo a trovare delle coordinate partendo da un indirizzo.

Per usare ArcGIS dovete prima registrarvi, e poi creare una API KEY; considerate che l'account free.

Prima di tutto installiamo le librerie con npm:

npm i @esri/arcgis-rest-geocoding @esri/arcgis-rest-request

Poi dobbiamo aggiungere il CSS dentro al file angular.json:

"styles": [
  "./node_modules/leaflet/dist/leaflet.css",
  "src/styles.css"
],

E qui il nostro componente:

import {Component} from '@angular/core';
import {CommonModule} from '@angular/common';
import * as arcgisRest from "@esri/arcgis-rest-request";
import * as geocodingTools from "@esri/arcgis-rest-geocoding";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  constructor() {
    const apiKey = "API_KEY";
    const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

    geocodingTools
        .geocode({
          address: "Via Strada 69, 00100 Roma",
          countryCode: "IT",
          authentication
        })
        .then((response) => {
          console.log("Candidates:", response.candidates);
        });
  }

}

Enjoy!