Idee
Die Kartenkamera zeigt die aktuelle GPS-Position, die Adresse und die Uhrzeit auf einer Karte an.
Per Screenshot am Smartphone lassen sich so aussagekräftige Fotos von Schlaglöchern etc. gestalten.
Link/Demo
https://drittereihe.de/kartenkamera.html
V2024-09-14 Marker auf der Karte verschiebbar
Realisiert mit ChatGPT
Quellcode
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karten- und Kamerafunktion mit Textfeld</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
}
#map {
height: 40%;
}
#address {
padding: 10px;
background-color: #f9f9f9;
font-size: 1.2em;
}
#inputField {
width: 95%;
padding: 10px;
font-size: 1em;
resize: vertical;
overflow: auto;
min-height: 50px; /* Mindesthöhe für das Textfeld */
}
/* Für kleine Bildschirme wie Smartphones */
@media screen and (max-width: 600px) {
#inputField {
font-size: 1.2em; /* Größere Schrift für mobile Geräte */
min-height: 100px; /* Erhöhte Mindesthöhe */
padding: 15px; /* Mehr Padding für bessere Nutzbarkeit */
}
}
#camera {
height: 40%;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
</head>
<body>
<!-- Karte -->
<div id="map"></div>
<!-- Textfeld -->
<div id="address">
<textarea id="inputField" placeholder="Tippe hier..."></textarea>
</div>
<!-- Kamerabild -->
<div id="camera">
<video id="video" autoplay></video>
</div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script>
// Globale Variablen
let map;
let marker;
// Funktion zur Anzeige der Karte mit der aktuellen Position
function initMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
// Karte initialisieren
map = L.map('map').setView([lat, lon], 13);
// OpenStreetMap-Tiles hinzufügen
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Verschiebbaren Marker hinzufügen
addDraggableMarker(lat, lon);
// Adresse abrufen und Textfeld aktualisieren
updateAddress(lat, lon);
}, error => {
console.log("Fehler beim Abrufen der Position:", error);
alert("Position konnte nicht ermittelt werden.");
});
} else {
alert("Geolocation wird von deinem Browser nicht unterstützt.");
}
}
// Funktion zum Hinzufügen eines verschiebbaren Markers
function addDraggableMarker(lat, lon) {
// Wenn bereits ein Marker existiert, entferne ihn
if (marker) {
map.removeLayer(marker);
}
// Neuen Marker erstellen und hinzufügen
marker = L.marker([lat, lon], { draggable: true }).addTo(map);
// Popup mit Koordinaten
marker.bindPopup(`Lat.: ${lat}, Lon.: ${lon}`).openPopup();
// Event-Listener für das Beenden des Draggens
marker.on('dragend', function (e) {
const position = marker.getLatLng();
const newLat = position.lat;
const newLon = position.lng;
// Karte zentrieren
map.setView([newLat, newLon]);
// Popup aktualisieren
marker.getPopup().setContent(`Lat.: ${newLat}, Lon.: ${newLon}`).openOn(map);
// Adresse abrufen und Textfeld aktualisieren
updateAddress(newLat, newLon);
});
}
// Funktion zum Abrufen der Adresse und Aktualisieren des Textfelds
function updateAddress(lat, lon) {
// Datum und Uhrzeit formatieren
const now = new Date();
const daysShort = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
const dayName = daysShort[now.getDay()];
const date = now.getDate().toString().padStart(2, '0');
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const year = now.getFullYear().toString().slice(-2);
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const formattedDateTime = `${dayName}, ${date}.${month}.${year} ${hours}:${minutes} Uhr`;
// Adresse anhand der Koordinaten abrufen
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`)
.then(response => response.json())
.then(data => {
const addressComponents = data.address;
const road = addressComponents.road || '';
const houseNumber = addressComponents.house_number || '';
const postcode = addressComponents.postcode || '';
const city = addressComponents.city || addressComponents.town || addressComponents.village || '';
const suburb = addressComponents.suburb || '';
// Ort und Stadtteil in der richtigen Reihenfolge (Ort, dann Vorort)
let location = `${postcode} ${city}`;
if (suburb && suburb !== city) {
location += ` ${suburb}`;
}
// Adresse in der gewünschten Reihenfolge formatieren
const formattedAddress = `${road} ${houseNumber}, ${location}`;
// Geokoordinaten, Adresse und Datum ins Textfeld einfügen
document.getElementById('inputField').value =
`Datum/Uhrzeit: ${formattedDateTime}\nAdresse: ${formattedAddress}\nLat.: ${lat}, Lon.: ${lon}`;
})
.catch(error => {
console.log("Fehler beim Abrufen der Adresse:", error);
document.getElementById('inputField').value =
`Datum/Uhrzeit: ${formattedDateTime}\nAdresse konnte nicht geladen werden.\nLat.: ${lat}, Lon.: ${lon}`;
});
}
// Funktion zur Anzeige des Kamerabildes (hintere Kamera bevorzugt)
function initCamera() {
const video = document.getElementById('video');
// Funktion zur Auswahl der Kamera
function getCamera(facingMode) {
return navigator.mediaDevices.getUserMedia({
video: { facingMode: { exact: facingMode } }
});
}
// Versuch, die hintere Kamera zu verwenden
getCamera("environment")
.then(stream => {
video.srcObject = stream;
})
.catch(() => {
// Falls die hintere Kamera nicht verfügbar ist, verwende die vordere Kamera
getCamera("user")
.then(stream => {
video.srcObject = stream;
})
.catch(error => {
console.log("Fehler beim Zugriff auf die Kamera:", error);
alert("Kamera konnte nicht aktiviert werden.");
});
});
}
// Funktionen ausführen
window.onload = () => {
initMap();
initCamera();
}
</script>
</body>
</html>'