4E e 4I: Come creare una pagina PHP che legge le coordinate da un file `.txt` utilizzando un modulo select dove scegliere la mappa e visualizzarla utilizzando Leaflet e OpetStreeMap in un'altra pagina Php.
L'esercizio richiede di creare un'applicazione PHP che permetta agli utenti di selezionare una mappa da un elenco (utilizzando un elemento `<select>`), leggere delle coordinate da un file di testo e visualizzare la mappa e le coordinate selezionate su una pagina utilizzando Leaflet e OpenStreetMap.
Fasi dell'Esercizio
1. Preparazione del file di testo: Dovrai avere un file `.txt` contenente le coordinate. Il file può avere un formato semplice, come ad esempio:
Mappa1,45.4642,9.1900
Mappa2,41.9028,12.4964
2. Creazione del modulo selezione: Nella prima pagina PHP, utilizza un modulo con un elemento `<select>` per permettere agli utenti di selezionare una mappa. Quando l'utente invia il modulo, le coordinate corrispondenti devono essere passate alla seconda pagina PHP.
3. Lettura del file di testo**: Quando il modulo viene inviato, la seconda pagina PHP dovrebbe leggere il file `.txt` per trovare le coordinate associate alla mappa selezionata e poi utilizzarle per visualizzarla sulla mappa.
4. Visualizzazione della mappa**: Utilizza la libreria Leaflet per visualizzare la mappa e personalizzare il marker sulla base delle coordinate ottenute dal file di testo.
Esempio di Implementazione
1. `index.php` - Pagina iniziale con il modulo:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Seleziona Mappa</title>
</head>
<body>
<form action="map.php" method="post">
<label for="map">Seleziona una mappa:</label>
<select name="map" id="map">
<?php
$file = 'coordinate.txt';
$lines = file($file);
foreach ($lines as $line) {
list($name, $lat, $lon) = explode(',', trim($line));
echo "<option value='$lat,$lon'>$name</option>";
}
?>
</select>
<input type="submit" value="Visualizza Mappa">
</form>
</body>
</html>
2. `map.php` - Pagina per mostrare la mappa:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Mappa Visualizzata</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
#map { height: 500px; }
</style>
</head>
<body>
<?php
if (isset($_POST['map'])) {
$coordinates = explode(',', $_POST['map']);
$lat = $coordinates[0];
$lon = $coordinates[1];
} else {
echo 'Nessuna mappa selezionata.';
exit;
}
?>
<div id="map"></div>
<script>
var map = L.map('map').setView([<?php echo $lat; ?>, <?php echo $lon; ?>], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);
L.marker([<?php echo $lat; ?>, <?php echo $lon; ?>]).addTo(map)
.bindPopup('Coordinate: <?php echo $lat; ?>, <?php echo $lon; ?>')
.openPopup();
</script>
</body>
</html>
Spiegazione del Codice
- index.php: Questa pagina legge il file `coordinate.txt`, costruisce un menu a discesa con le mappe disponibili e invia le coordinate selezionate alla pagina `map.php` quando il modulo è inviato.
- map.php: Riceve le coordinate dalla pagina precedente, imposta la vista della mappa secondo le coordinate selezionate e utilizza Leaflet per mostrare la mappa e posizionare un marker sulle coordinate.
Considerazioni Finali
- Assicurati che il file `coordinate.txt` sia accessibile correttamente dalla tua applicazione.
- Puoi estendere questo esempio con ulteriori funzionalità, come la validazione dell’input o l’aggiunta di più informazioni sulla mappa.
- Leaflet offre molte opzioni per personalizzare l'aspetto della mappa e i marker, esplora la documentazione per vari suggerimenti.
Commenti
Posta un commento