Beispiellösung zur Kartendarstellung mit Leaflet, PHP, MySQL, JavaScript und Leaflet

<!DOCTYPE html>

<html>
	<head>
		<title>Museen in Köln und Umgebung</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
		<style>
			html, body {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
			}
			
			#map {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	
	<body>
		<div id="map"></div>
		
		<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
		<script>
		
			// Variable / Array zur Speicherung aller Museumsinfos
			var geodaten = [];
			
			<?php
			
				// Verbindung mit DB-Server und der DB herstellen
				$mysqli = new mysqli("localhost", "at2", "itzertitzertat2", "at2");
				
				// Prüfen, ob's funktioniert hat
				if ($mysqli->connect_errno) {
					echo "Verbindung nicht möglich!";
					echo "Fehlercode: " . $mysqli->connect_errno;
				}
				
				// Zeichensatz explizit setzen
				$mysqli->set_charset("utf-8");
				
				// Abfrage formulieren
				$sql = "SELECT * FROM places";
				
				if ($result = mysqli_query($mysqli, $sql)) {
					
					// Zugriff auf alle zurückgelieferten Zeilen
					while ($row = mysqli_fetch_row($result)):
			?>
			
					// *** JavaScript ***
					// Hier füllen wir unser JavaScript-Array mit den einzelnen
					// Einträgen aus der Datenbank
					// [JSON-Objekt (JavaScript Object Notation)]
					geodaten.push({
						'name': '<?php echo $row[1]; ?>',
						'latitude': '<?php echo $row[3]; ?>',
						'longitude': '<?php echo $row[4]; ?>'
					});
					// *** Ende JavaScript ***
			
			<?php
				endwhile;
				
				// Aufräumen
				mysqli_free_result($result);
				}
				
				mysqli_close($mysqli);
			?>	
		
			console.log(geodaten);
		
			var map = L.map('map').setView([50.9411905,6.9576806], 11);

			L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
			}).addTo(map);

			var current;
			for (var i = 0; i < geodaten.length; i++) {
				
				var current = geodaten[i];
				
				L.marker([current.latitude, current.longitude]).addTo(map)
					.bindPopup(current.name)
					.openPopup();
			}
		</script>
	</body>
</html>

 

5 Kommentare on "Beispiellösung zur Kartendarstellung mit Leaflet, PHP, MySQL, JavaScript und Leaflet"


        1. Mit dem Suchplugin habe ich noch nicht gearbeitet, bin leider überfragt, worin da das Problem bestehen könnte. Was sagt denn die Konsole?

          Antworten

  1. … und hast du dich noch ein bischen weiter damit beschäftigt. Häng grad daran, wie ich die Koordinaten aus der Datenbank in der Karte ändere und wieder in die Datenbank zurückschreibe.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.