Widget:GOV-Test: Unterschied zwischen den Versionen
Aus Altes Köln
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 68: | Zeile 68: | ||
</script> | </script> | ||
<h1> | <h1>Leaflet-Karte</h1> | ||
<div id="leaflet- | <div id="leaflet-map" style="width: 100%; height: 400px;"></div> | ||
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.css" /> | <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.css" /> | ||
<script src="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.js"></script> | <script src="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.js"></script> | ||
<script> | <script> | ||
// Leaflet-Karte | // Initialisierung der Leaflet-Karte | ||
var map = L.map('map').setView([ 50.9812, 7.0326 ], 12); | var map = L.map('leaflet-map').setView([50.9812, 7.0326], 12); | ||
// OpenStreetMap-Tiles hinzufügen | |||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | ||
attribution: '© OpenStreetMap contributors' | attribution: '© OpenStreetMap contributors', | ||
maxZoom: 18 | |||
}).addTo(map); | }).addTo(map); | ||
// Optional: Marker hinzufügen | |||
L.marker([50.9812, 7.0326]).addTo(map) | |||
.bindPopup('GOV-Standort<br>50.9812, 7.0326.') | |||
.openPopup(); | |||
</script> | </script> | ||
<h1>Einfaches HTML (nur Hyberlink auf GOV)</h1> | <h1>Einfaches HTML (nur Hyberlink auf GOV)</h1> |
Version vom 12. Januar 2025, 18:53 Uhr
Laden der GOV-Seite mit Javascript (fetch)
<script>
fetch('https://gov.genealogy.net/item/show/HOHAUSJO30MX') .then(response => response.text()) .then(data => { document.getElementById('gov-content').innerHTML = data; }) .catch(error => { console.error('Error loading GOV content:', error); });
</script>
Laden der Übersichtskarte mit Javascript (fetch)
<script>
const mapUrl = 'https://gov.genealogy.net/item/map/HOHAUSJO30MX';
fetch(mapUrl) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.blob(); }) .then(blob => { const mapObjectUrl = URL.createObjectURL(blob);
const imgElement = document.createElement('img'); imgElement.src = mapObjectUrl; imgElement.alt = 'Karte'; imgElement.style.maxWidth = '100%'; imgElement.style.height = 'auto';
document.getElementById('map-content').appendChild(imgElement); }) .catch(error => { console.error('Error loading map:', error); });
</script>
Laden der Grafik mit übergeordneten Objekten mit Javascript (fetch)
<script>
const relationshipGraphUrl = 'https://gov.genealogy.net/item/relationshipGraph/HOHAUSJO30MX?full-size=1';
fetch(relationshipGraphUrl) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.blob(); }) .then(blob => { const graphObjectUrl = URL.createObjectURL(blob);
const imgElement = document.createElement('img'); imgElement.src = graphObjectUrl; imgElement.alt = 'Beziehungsgraph'; imgElement.style.maxWidth = '100%'; imgElement.style.height = 'auto';
document.getElementById('relationship-graph-content').appendChild(imgElement); }) .catch(error => { console.error('Error loading relationship graph:', error); });
</script>
Leaflet-Karte
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.css" /> <script src="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.js"></script> <script>
// Initialisierung der Leaflet-Karte var map = L.map('leaflet-map').setView([50.9812, 7.0326], 12);
// OpenStreetMap-Tiles hinzufügen L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors', maxZoom: 18 }).addTo(map);
// Optional: Marker hinzufügen L.marker([50.9812, 7.0326]).addTo(map) .bindPopup('GOV-Standort
50.9812, 7.0326.') .openPopup();
</script>
Einfaches HTML (nur Hyberlink auf GOV)
Hello World
Die GOV-Daten <a href="https://gov.genealogy.net/item/show/HOHAUSJO30MX">finden Sie hier</a>.
Aufruf von GOV mit Object
<object data="https://gov.genealogy.net/item/show/HOHAUSJO30MX" width="600" height="400"></object>
Aufruf von GOV mit Iframe