4E e 4I Sia: esercizio con html, Css, i file di testo, Php e Javascript, Leaflet e Leaflet machine che gestisce un percorso a tappe e si veda il tracciamento e la tappa raggiunta fino all'ultima mappa.
Crea un esercizio con html, Css, i file di testo, Php e Javascript, Leaflet e Leaflet machine che gestisce un percorso a tappe e si veda il tracciamento e la tappa raggiunta fino all'ultima mappa.
clicca qui e scarica la cartella compressa con le pagine: (ricorda che devi copiare la cartella decompressa in httdocs del server avviato Xampp
Le coordinate devono essere memorizzate e lette dal file di testo.
Ecco un esempio che integra HTML, CSS, JavaScript, PHP, e Leaflet per gestire un percorso a tappe. In questo esempio, abbiamo un file di testo che contiene le coordinate delle tappe. Utilizzeremo PHP per leggere le coordinate dal file e JavaScript con Leaflet per visualizzare il percorso.
Struttura dei File
1. index.html: La pagina principale.
2. style.css: Stile per la mappa.
3. coordinates.txt: File di testo con le coordinate.
4. getCoordinates.php: Script PHP per leggere le coordinate.
5. script.js: Script JavaScript per gestire Leaflet.
1. File `index.html`
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Percorso a Tap</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<h1>Percorso a Tap</h1>
<div id="map"></div>
<div id="info"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>
2. File `style.css`
#map {
width: 100%;
height: 600px;
}
#info {
margin-top: 20px;
font-size: 1.2em;
}
3. File `coordinates.txt`
45.464211,9.191383; Milano
45.070339,7.686864; Torino
44.494887,11.342616; Bologna
41.902782,12.496366; Roma
4. File `getCoordinates.php`
<?php
header('Content-Type: application/json');
$coordinates = file_get_contents('coordinates.txt');
$rows = explode("\n", trim($coordinates));
$data = [];
foreach ($rows as $row) {
list($coords, $location) = explode(';', $row);
$data[] = ['coords' => explode(',', $coords), 'location' => trim($location)];
}
echo json_encode($data);
?>
5. File `script.js`
const map = L.map('map').setView([41.902782, 12.496366], 6); // Vista iniziale su Roma
// Aggiungi una mappa
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);
fetch('getCoordinates.php')
.then(response => response.json())
.then(data => {
const polylineCoords = [];
data.forEach((point, index) => {
const [lat, lng] = point.coords;
polylineCoords.push([lat, lng]);
L.marker([lat, lng]).addTo(map)
.bindPopup(`Tappa ${index + 1}: ${point.location}`)
.openPopup();
});
const polyline = L.polyline(polylineCoords, { color: 'blue' }).addTo(map);
map.fitBounds(polyline.getBounds()); // Adatta la mappa ai limiti della polyline
const info = document.getElementById('info');
info.innerHTML = `Percorso creato con ${data.length} tappe.`;
})
.catch(err => console.error(err));
Istruzioni
1. Crea una cartella di progetto e inserisci tutti i file sopra indicati.
2. Assicurati che il server web (come XAMPP o MAMP) stia girando e che tu possa eseguire PHP.
3. Apri `index.html` nel browser tramite il server locale per vedere la mappa e le tappe.
Note
- Le coordinate nel file di testo possono essere modificate per aggiungere altre tappe.
- Il codice gestisce la visualizzazione di marker per ogni tappa e disegna una polilinea che collega tutte le tappe.
- Assicurati che il server web abbia i permessi necessari per leggere il file `coordinates.txt`.
SPIEGAZIONE DELL'ESERCIZIO
Riassunto dell'Esercizio
L'obiettivo di questo esercizio è creare una mappa interattiva che rappresenta un percorso con più tappe, utilizzando tecnologie web moderne come HTML, CSS, JavaScript, PHP e la libreria Leaflet. Di seguito, rivediamo il funzionamento e l'interazione tra i vari file:
1. index.html: È il file principale che struttura la pagina web. Carica i fogli di stile necessari e i file JavaScript. Definisce le aree in cui verrà visualizzata la mappa e le informazioni.
2. style.css: Gestisce l'aspetto estetico della pagina, inclusi la dimensione della mappa e lo stile del testo informativo.
3. coordinates.txt: Contiene i dati delle tappe sotto forma di coordinate geografiche e nomi delle località. Questo file è fondamentale perché il PHP lo legge per generare i dati della mappa.
4. getCoordinates.php: Questo script PHP legge il file di testo, estrae le coordinate e i nomi delle tappe e restituisce un array di dati in formato JSON, che può essere facilmente gestito da JavaScript.
5. script.js: È il cuore logico dell'applicazione. Inizializza la mappa con Leaflet, carica le coordinate dal PHP tramite una richiesta fetch, aggiunge marker per ogni tappa e disegna una polilinea che collega le tappe.
Processi Chiave
- Integrazione di Diverse Tecnologie: L'esercizio mostra come combinare diversi linguaggi di programmazione (PHP per il backend e JavaScript per il frontend) per creare un'applicazione web dinamica.
- Manipolazione del DOM: L'uso di JavaScript per modificare il contenuto dell'HTML e interagire con l'utente, come l'aggiunta di marker sulla mappa e la visualizzazione di informazioni.
- Associazione di Dati e Visibilità: Lavorare con file di testo per caricare dati in modo dinamico permette di aggiornare facilmente il contenuto senza modificare il codice sorgente. Questo facilita la gestione delle tappe.
Suggerimenti per Estensioni Future
- Aggiunta di Funzionalità: Potresti ampliare il progetto permettendo all'utente di aggiungere o rimuovere tappe tramite un'interfaccia utente, magari includendo un modulo HTML.
- Maggiore Interattività: Includere funzionalità come il caricamento di percorsi da un file upload o la possibilità di cambiare riferimenti di luoghi tramite una ricerca geografica.
- Stilizzazione Avanzata: Potresti migliorare l'aspetto visivo della mappa con CSS e anche con stili specifici tramite Leaflet, come icone personalizzate per i marker.
- Responsività: Assicurati che l'interfaccia funzioni bene su vari dispositivi, implementando design responsive e adattando le dimensioni della mappa e delle informazioni.
Crea un esercizio con html, Css, i file di testo, Php e Javascript, Leaflet e Leaflet machine che gestisce un percorso a tappe e si veda il tracciamento e la tappa raggiunta fino all'ultima mappa.
Le coordinate devono essere memorizzate e lette dal file di testo.
1. File `index.html`
```html
<!DOCTYPE html>
```
- Indica al browser che questo è un documento HTML5.
```html
<html lang="it">
```
- Inizio del documento HTML, specificando che il linguaggio principale del contenuto è l'italiano.
```html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- Imposta il set di caratteri a UTF-8 e ottimizza il display sui dispositivi mobili (responsive).
```html
<title>Percorso a Tap</title>
```
- Assegna un titolo alla pagina, visibile sulla barra del titolo del browser.
```html
<link rel="stylesheet" href="style.css">
```
- Collega il file CSS esterno `style.css` per applicare stili alla pagina.
```html
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
```
- Include il CSS di Leaflet per stilizzare la mappa.
```html
</head>
<body>
```
- Inizio del corpo del documento HTML.
```html
<h1>Percorso a Tap</h1>
```
- Queste sono intestazioni di primo livello che descrivono il contenuto della pagina.
```html
<div id="map"></div>
```
- Questo `<div>` funzionerà come contenitore della mappa Leaflet. L'ID `map` sarà usato per fare riferimento a questo elemento in JavaScript.
```html
<div id="info"></div>
```
- Un altro `<div>` per visualizzare informazioni aggiuntive sul percorso, come il numero delle tappe.
```html
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
```
- Include la libreria JavaScript di Leaflet, necessaria per creare e gestire la mappa.
```html
<script src="script.js"></script>
```
- Include il file JavaScript personalizzato `script.js`, dove si trova la logica per gestire la mappa e le coordinate.
```html
</body>
</html>
```
- Chiusura dei tag `body` e `html`.
2. File `style.css`
```css
#map {
width: 100%;
height: 600px;
}
```
- Imposta la larghezza del div della mappa al 100% dell’elemento padre e l'altezza a 600 pixel. Questo determina le dimensioni visive della mappa.
#info {
margin-top: 20px;
font-size: 1.2em;
}
```
- Aggiunge un margine in alto di 20 pixel e aumenta la dimensione del font per le informazioni del percorso.
3. File `coordinates.txt`
```
45.464211,9.191383; Milano
45.070339,7.686864; Torino
44.494887,11.342616; Bologna
41.902782,12.496366; Roma
```
- Ogni riga rappresenta una tappa, dove le coordinate (latitudine, longitudine) sono seguite da un punto e virgola e poi il nome della città. Questo formato è necessario per la corretta lettura in `getCoordinates.php`.
4. File `getCoordinates.php`
```php
<?php
header('Content-Type: application/json');
```
- Specifica che il contenuto restituito dal file sarà in formato JSON, facilitando la comunicazione con il client.
```php
$coordinates = file_get_contents('coordinates.txt');
```
- Legge tutto il contenuto del file `coordinates.txt` in una stringa.
```php
$rows = explode("\n", trim($coordinates));
```
- Divide la stringa in un array di righe, utilizzando il carattere di nuova linea come separatore.
```php
$data = [];
```
- Inizializza un array vuoto per memorizzare i dati delle coordinate.
```php
foreach ($rows as $row) {
```
- Inizia un ciclo per elaborare ogni riga.
```php
list($coords, $location) = explode(';', $row);
```
- Suddivide ogni riga nelle coordinate e nel nome della città utilizzando il punto e virgola come separatore.
```php
$data[] = ['coords' => explode(',', $coords), 'location' => trim($location)];
$data[] = ['coords' => explode(',', $coords), 'location' => trim($location)];
```
- Qui stiamo aggiungendo un nuovo elemento all'array `$data`. Le coordinate vengono ulteriormente suddivise in latitudine e longitudine utilizzando `explode(',', $coords)`, e il nome della località è "pulito" da eventuali spazi non necessari con `trim($location)`.
```php
}
```
- Chiusura del ciclo `foreach` che itera attraverso tutte le righe del file.
```php
echo json_encode($data);
?>
```
- Converte l'array `$data` in una stringa JSON e la restituisce come risposta. Questo è ciò che verrà utilizzato dal client JavaScript in `script.js`.
5. File `script.js`
const map = L.map('map').setView([41.902782, 12.496366], 6); // Vista iniziale su Roma
```
- Inizializza la mappa utilizzando Leaflet, specificando l'ID dell'elemento HTML `map` come contenitore. Imposta la vista iniziale della mappa centrata su Roma (latitudine e longitudine) con uno zoom di 6.
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);
```
- Aggiunge un layer di tiles (mattonelle) alla mappa utilizzando le immagini fornite da OpenStreetMap. Si specifica un massimo livello di zoom di 19.
```javascript
fetch('getCoordinates.php')
```
- Effettua una richiesta GET per ottenere i dati dal file PHP `getCoordinates.php`.
```javascript
.then(response => response.json())
```
- Quando la risposta è ricevuta, la converte in JSON, permettendo di lavorare con i dati in formato oggetto JavaScript.
```javascript
.then(data => {
const polylineCoords = [];
```
- Una volta ricevuti i dati, inizializza un array vuoto `polylineCoords` per memorizzare le coordinate delle tappe da disegnare sulla mappa.
```javascript
data.forEach((point, index) => {
```
- Utilizza un ciclo `forEach` per iterare attraverso ogni oggetto delle coordinate ottenuto dal file PHP.
```javascript
const [lat, lng] = point.coords;
```
- Estrae la latitudine e la longitudine dall'oggetto `point`, che è un array contenente le coordinate.
```javascript
polylineCoords.push([lat, lng]);
```
- Aggiunge la coppia di coordinate all'array `polylineCoords`, che sarà utilizzato per disegnare la polilinea sulla mappa.
```javascript
L.marker([lat, lng]).addTo(map)
```
- Crea un marker sulla mappa per la tappa corrente, posizionandolo alle coordinate indicate.
```javascript
.bindPopup(`Tappa ${index + 1}: ${point.location}`)
.openPopup();
```
- Associa un'informazione “popup” al marker, mostrando il numero della tappa e la località. Il metodo `openPopup()` fa sì che il popup venga visualizzato immediatamente dopo la sua creazione.
```javascript
});
```
- Fine del ciclo `forEach`.
```javascript
const polyline = L.polyline(polylineCoords, { color: 'blue' }).addTo(map);
```
- Crea una polilinea utilizzando le coordinate accumulate in `polylineCoords`, impostando il colore blu per la linea e aggiungendola alla mappa.
```javascript
map.fitBounds(polyline.getBounds()); // Adatta la mappa ai limiti della polyline
```
- Regola la visualizzazione della mappa in modo che tutte le tappe siano visibili nel campo visivo della mappa.
```javascript
const info = document.getElementById('info');
```
- Seleziona il div con l'ID `info` per visualizzare informazioni aggiuntive.
```javascript
info.innerHTML = `Percorso creato con ${data.length} tappe.`;
```
- Aggiorna il contenuto del div `info`, mostrando il numero totale di tappe nel percorso.
```javascript
})
.catch(err => console.error(err));
```
- Gestisce eventuali errori che potrebbero verificarsi durante la richiesta dei dati o il caricamento della mappa. Se si verifica un errore, verrà stampato in console.
L'obiettivo di questo esercizio è creare una mappa interattiva che rappresenta un percorso con più tappe, utilizzando tecnologie web moderne come HTML, CSS, JavaScript, PHP e la libreria Leaflet. Di seguito, rivediamo il funzionamento e l'interazione tra i vari file:
Commenti
Posta un commento