4E e 4I Sia: Creare una pagina PHP che legge le coordinate da un file `.txt` e visualizzi una mappa utilizzando Leaflet
Per creare una pagina PHP che legge le coordinate da un file
`.txt` e visualizza una mappa utilizzando Leaflet, puoi seguire questi
passaggi:
Crea un file di testo con le coordinate: Crea un file chiamato `coordinates.txt` e inserisci delle coordinate in formato `latitudine, longitudine`, una per riga. Ad esempio:
45.4641, 9.1900
41.9028, 12.4964
48.8566, 2.3522
2. Crea una pagina PHP: Crea un file chiamato `map.php` e incolla il seguente codice:
<?php
// Legge le coordinate da un file .txt
$filename = 'coordinates.txt';
$coordinates = [];
if (file_exists($filename)) {
$lines = file($filename, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
foreach ($lines as $line) {
list($lat, $lon) = explode(',', trim($line));
$coordinates[] = ['lat' => floatval($lat), 'lon' => floatval($lon)];
}
} else {
echo "File non trovato.";
}
?>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mappa con Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h1>Mappa delle Coordinate</h1>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
// Inizializza la mappa
var map = L.map('map').setView([45.4641, 9.1900], 5); // Centra la mappa su Milano
// Aggiunge un layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
// Aggiunge i marker per le coordinate lette dal file PHP
<?php foreach ($coordinates as $coord): ?>
L.marker([<?php echo $coord['lat']; ?>, <?php echo $coord['lon']; ?>]).addTo(map);
<?php endforeach; ?>
</script>
</body>
</html>
3. Carica i file sul server: Assicurati che il file `coordinates.txt` e il file `map.php` siano sul tuo server web.
4. Accedi alla pagina: Apri il tuo browser e vai all'URL corrispondente al file `map.php` sul tuo server. Dovresti vedere una mappa con i marker posizionati alle coordinate specificate nel file `coordinates.txt`.
Struttura del Codice
1. Inizio del codice PHP:
<?php
// Legge le coordinate da un file .txt
$filename = 'coordinates.txt';
$coordinates = [];
- Qui iniziamo con il tag PHP e definiamo il nome del file da cui vogliamo leggere le coordinate, `coordinates.txt`.
- Creiamo un array vuoto `$coordinates` per memorizzare le coordinate che verranno lette dal file.
2. Lettura del file:
if (file_exists($filename)) {
$lines = file($filename, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
foreach ($lines as $line) {
list($lat, $lon) = explode(',', trim($line));
$coordinates[] = ['lat' => floatval($lat), 'lon' => floatval($lon)];
}
} else {
echo "File non trovato.";
}
- Controlliamo se il file esiste. Se sì, usiamo la funzione `file()` per leggere tutte le righe del file in un array `$lines`, ignorando eventuali linee vuote.
- Utilizziamo un ciclo `foreach` per processare ogni riga:
- `trim($line)` rimuove eventuali spazi bianchi.
- `explode(',', trim($line))` divide la riga in latitudine e longitudine.
- Aggiungiamo ogni coppia di coordinate all'array `$coordinates` come un array associativo con chiavi `'lat'` e `'lon'`.
3. Inizio del documento HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mappa con Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
- Qui iniziamo la struttura standard di un documento HTML.
- Includiamo il CSS di Leaflet per lo stile della mappa.
- Definiamo anche l'altezza e la larghezza della mappa con CSS.
4. Corpo del documento e script:
<body>
<h1>Mappa delle Coordinate</h1>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
// Inizializza la mappa
var map = L.map('map').setView([45.4641, 9.1900], 5); // Centra la mappa su Milano
// Aggiunge un layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
// Aggiunge i marker per le coordinate lette dal file PHP
<?php foreach ($coordinates as $coord): ?>
L.marker([<?php echo $coord['lat']; ?>, <?php echo $coord['lon']; ?>]).addTo(map);
<?php endforeach; ?>
</script>
</body>
</html>
- Inseriamo il titolo della pagina e il contenitore dove verrà visualizzata la mappa.
- Aggiungiamo il file JavaScript di Leaflet.
- Inizializziamo la mappa con `L.map()`, centrando la vista su Milano (latitudine e longitudine sono dati di esempio che puoi cambiare).
- Usando `L.tileLayer()`, carichiamo il layer della mappa OpenStreetMap.
- Infine, usiamo PHP per generare dinamicamente i marker sulla mappa in base alle coordinate lette dal file.
Funzionamento Generale
Quando accedi a questa pagina, il server esegue il codice PHP che legge le coordinate dal file di testo. Questi dati servono a creare i marker sulla mappa. La visualizzazione avviene nel browser, dove grazie a Leaflet, puoi interagire con la mappa e vedere i punti specifici.
Possibili Espansioni
- Error Handling: Puoi migliorare la gestione degli errori se Certo! Continuando con le possibili espansioni e miglioramenti della pagina PHP che abbiamo creato:
1. Gestione degli errori
Attualmente, se il file `coordinates.txt` non esiste, viene visualizzato solo un messaggio che indica che il file non è stato trovato. Potresti voler implementare ulteriori controlli sugli errori e fornire feedback più dettagliato all'utente. Ad esempio:
if (!file_exists($filename)) {
die("Errore: il file 'coordinates.txt' non è stato trovato. Assicurati che il file esista nella directory corretta.");
}
2. Validazione delle coordinate
Potresti includere una validazione per assicurarti che le coordinate lette siano valide (ossia che la latitudine sia compresa tra -90 e 90 e la longitudine tra -180 e 180).
foreach ($lines as $line) {
list($lat, $lon) = explode(',', trim($line));
if (is_numeric($lat) && is_numeric($lon) && $lat >= -90 && $lat <= 90 && $lon >= -180 && $lon <= 180) {
$coordinates[] = ['lat' => floatval($lat), 'lon' => floatval($lon)];
} else {
echo "Le coordinate nella riga non sono valide: $line";
}
}
3. Personalizzazione dei marker
Potresti voler personalizzare i marker aggiungendo icone specifiche, colori, o tooltip che mostrano informazioni aggiuntive quando l'utente interagisce con i marker. Ad esempio, puoi aggiungere un tooltip con il nome della posizione:
<?php foreach ($coordinates as $index => $coord): ?>
L.marker([<?php echo $coord['lat']; ?>, <?php echo $coord['lon']; ?>])
.addTo(map)
.bindTooltip("Coordinate: <?php echo $coord['lat']; ?>, <?php echo $coord['lon']; ?>");
<?php endforeach; ?>
4. Interazioni avanzate
Potresti implementare funzionalità più interattive, come la possibilità di aggiungere nuove coordinate tramite un modulo, che poi aggiorna dinamicamente la mappa (richiederebbe l'uso di AJAX o di ricaricare la pagina).
5. Salvataggio delle coordinate
Se consentito, potresti estendere l'applicazione per salvare nuove coordinate in `coordinates.txt` direttamente tramite un modulo di input. Ciò richiederebbe un'implementazione di un modulo HTML e la gestione delle richieste POST.
Esempio di modulo per aggiungere coordinate
Puoi aggiungere un semplice modulo all'inizio della pagina:
<form method="post" action="map.php">
<label for="latitude">Latitudine:</label>
<input type="text" name="latitude" required>
<label for="longitude">Longitudine:</label>
<input type="text" name="longitude" required>
<input type="submit" value="Aggiungi Coordinate">
</form>
### Esempio di gestione POST
Puoi aggiungere la logica per gestire l'aggiunta delle coordinate:
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$newLat = $_POST['latitude'];
$newLon = $_POST['longitude'];
// Verifica e salva nel file
if (is_numeric($newLat) && is_numeric($newLon) && $newLat >= -90 && $newLat <= 90 && $newLon >= -180 && $newLon <= 180) {
file_put_contents($filename, "$newLat,$newLon\n", FILE_APPEND);
header("Location: map.php"); // Ricarica la pagina per mostrare il marker
exit();
} else {
echo "Coordinate non valide.";
}
}
6. Stile e responsività
Puoi migliorare ulteriormente il design della mappa e del modulo rendendolo più responsivo utilizzando framework CSS come Bootstrap per una migliore interfaccia utente. Questo è utile soprattutto se la pagina deve essere visualizzata su dispositivi mobili.
7. Aggiungere Filtri per le Coordinate
Se desideri, potresti anche abilitare un sistema di filtri per visualizzare solo determinate coordinate sulla mappa.
Queste sono solo alcune idee e direzioni in cui potresti espandere e migliorare la tua implementazione.
Commenti
Posta un commento