Italiano

Tutorial AngularJS

Applicazioni AngularJS

Guida per Principianti su AngularJS e Leaflet Application

Ciao, futuri superstar del coding! Oggi ci imbarcheremo in un viaggio entusiasmante nel mondo di AngularJS e Leaflet. Non preoccupatevi se questi termini vi sembrano una lingua straniera ora - alla fine di questo tutorial, parlerete fluentemente "web map" in un batter d'occhio!

AngularJS - Leaflet Application

Cos'è AngularJS e Leaflet?

Prima di immergerci nel codice, vediamo cos'è ogni una di queste tecnologie:

AngularJS

AngularJS è un potente framework JavaScript che ci aiuta a costruire applicazioni web dinamiche. Pensa a esso come un assistente super-intelligente che organizza il tuo codice e rende il tuo sito web interattivo.

Leaflet

Leaflet è una libreria JavaScript open-source per mappe interattive amiche del cellulare. È come Google Maps, ma sei tu il boss e decidi esattamente come apparirà e funzionerà la tua mappa!

Ora che abbiamo fatto le presentazioni, mettiamo le mani al lavoro e iniziamo a costruire la nostra própria applicazione mappa!

Configurazione del Progetto

Prima di tutto, dobbiamo configurare il nostro progetto. Non preoccupatevi, è più facile dell'assemblare mobili IKEA!

Passo 1: Creare il File HTML

Crea un nuovo file chiamato index.html e incolla il seguente codice:

<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>La Mia App Mappa Meravigliosa</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>

Questo file HTML è come lo scheletro della nostra applicazione. Include tutte le librerie necessarie (AngularJS e Leaflet) e imposta un div dove vivrà la nostra mappa.

Passo 2: Creare il File JavaScript

Ora, creiamo il nostro file app.js. Qui avviene la magia!

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: '© Contributi OpenStreetMap'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Una bellissima popup CSS3.<br> Facilmente personalizzabile.')
.openPopup();
});

Ecco una spiegazione dettagliata:

  1. Creiamo un modulo AngularJS chiamato 'leafletApp'.
  2. Definiamo un controller chiamato 'MapController'.
  3. Dentro il controller, inizializziamo una mappa Leaflet, impostiamo la sua vista su Londra (puoi cambiare queste coordinate a tuo piacimento) e aggiungiamo un livello di tile da OpenStreetMap.
  4. Infine, aggiungiamo un marcatore alla nostra mappa con una popup.

Comprensione del Codice

Ora che abbiamo la nostra mappa di base in funzione, esploriamo più a fondo cosa fa ogni parte del nostro codice.

Il File HTML

<html ng-app="leafletApp">

Questa riga dice ad AngularJS che questo è l'elemento radice della nostra applicazione. Tutto ciò che è all'interno di questo elemento sarà gestito da AngularJS.

<body ng-controller="MapController">

Questa riga associa il nostro MapController al corpo del nostro HTML. Questo significa che tutta la logica che definiamo nel nostro MapController sarà disponibile all'interno del corpo.

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

Questo è dove la nostra mappa sarà visualizzata. Leaflet utilizzerà questo div per creare la mappa.

Il File JavaScript

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

Questa riga crea un nuovo modulo AngularJS. Pensa a un modulo come a un contenitore per diverse parti della tua applicazione.

app.controller('MapController', function($scope) {
// Logica del controller qui
});

Qui definiamo il nostro MapController. $scope è un oggetto speciale che funziona da ponte tra il controller e la vista (il nostro HTML).

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

Questa riga inizializza la nostra mappa Leaflet. 'map' è l'id del nostro div, [51.505, -0.09] sono le coordinate per il centro della nostra mappa (latitudine e longitudine), e 13 è il livello di zoom.

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

Questo aggiunge un livello di tile alla nostra mappa. I livelli di tile sono le immagini della mappa effettive. Qui stiamo utilizzando le tile di OpenStreetMap.

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Una bellissima popup CSS3.<br> Facilmente personalizzabile.')
.openPopup();

Questo aggiunge un marcatore alla nostra mappa alle coordinate specificate, aggiunge una popup a esso, e apre la popup.

Aggiungere Interattività

Ora che abbiamo la nostra mappa di base, rendiamola più interattiva! Aggiungeremo una funzionalità che permette agli utenti di cliccare sulla mappa per aggiungere nuovi marcatori.

Aggiorna il tuo file app.js come segue:

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: '© Contributi 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 = [];
};
});

Ora, aggiorna il tuo index.html per includere un pulsante per rimuovere i marcatori:

<body ng-controller="MapController">
<div id="map"></div>
<button ng-click="removeMarkers()">Rimuovi Tutti i Marcatori</button>
<script src="app.js"></script>
</body>

Ecco cosa abbiamo aggiunto:

  1. Abbiamo creato un array $scope.markers per tenere traccia di tutti i nostri marcatori.
  2. Abbiamo aggiunto un listener di eventi alla nostra mappa che crea un nuovo marcatore ogni volta che l'utente clicca sulla mappa.
  3. Abbiamo creato una funzione removeMarkers che rimuove tutti i marcatori dalla mappa e svuota il nostro array di marcatori.
  4. Abbiamo aggiunto un pulsante al nostro HTML che chiama la funzione removeMarkers quando viene cliccato.

Conclusione

Congratulazioni! Hai appena costruito la tua prima applicazione mappa interattiva utilizzando AngularJS e Leaflet. Hai imparato come impostare una mappa di base, aggiungere marcatori e persino implementare interazioni utente.

Ricorda, questo è solo l'inizio. Il mondo delle mappe web è vasto ed entusiasmante, con infinite possibilità di personalizzazione e aggiunta di funzionalità. Continua a esplorare, a codificare, e, soprattutto, divertiti!

Ecco una tabella che riassume i principali metodi che abbiamo utilizzato:

Metodo Descrizione
L.map() Crea una mappa sull'elemento HTML specificato
setView() Imposta la vista della mappa con un centro e un livello di zoom
L.tileLayer() Aggiunge un livello di tile alla mappa
L.marker() Aggiunge un marcatore alla mappa
bindPopup() Associa una popup a un marcatore
openPopup() Apre la popup per un marcatore
on() Aggiunge un listener di eventi alla mappa
addTo() Aggiunge un oggetto alla mappa
removeLayer() Rimuove un livello dalla mappa

Buon divertimento con le mappe, futuri cartografi!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Applicazione Timer
Prossimo tutorial:
AngularJS - Applicazione Last.fm