@Tirkon,
neuer Versuch, Dich zu erreichen - und vielleicht finde ich die Energie das ins Wiki einzufügen.
Einbinden von OSM-Karten in eine HTML-Datei
Um eine OSM-Karte in eine HTML-Datei einzubinden, werden Javascript-Bibliotheken wie zum Beispiel leaflet oder OpenLayers verwendet.
Typischerweise will man die Karte in einer gewünschten Zoomstufe anzeigen und an einem bestimmten Punkt (Geographische Länge und Breite) zentrieren.
Bitte beachten::
Beim Aufruf direkt von der Festplatte unterliegt Javascript Einschränkungen, die sich von Browser zu Browser und sogar von Version zu Version unterscheiden können. Das gilt ganz besonders für den Zugriff auf Dateien.
Das führt gerne zu “Beispiel xyz aus dem OSM-Wiki funktioniert nicht”
Basisbeispiele mit leaflet:
- Karte laden und zentrieren
- Karte mit Marker und um die Markerposition zentriert
- Karte mit Marker, der mit einem Popup ausgestattet ist
Ich hoffe, meine Beispiele sind anfängertauglich.
Zu tun:
- Laden der beiden erforderlichen Leaflet-Dateien
- Zielelement, in dem die Karte dargestellt werden soll
- Gewünschte Position und Zoomstufe (das einzige, was angepasst werden muss)
- Erstellen des Map-Objektes mit gewünschter Zentrierung und Zoomstufe
- Laden der Kartenkacheln (hier gilt es die Tile Usage Policy zu beachten - unabhängig von der Javascript-Bibliothek)
und für die zwei weiteren Beispiele
- Marker hinzufügen
- Marker mit einem Popup ausstatten (Popup-Text ist ebenfalls anzupassen)
Code der Beispieldatei
<!DOCTYPE html>
<html>
<head>
<title>Einfache OSM-Karte</title>
<meta charset="utf-8" />
<!-- erforderliche leaflet-Dateien -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<!-- DIV-Element, in dem die Karte angezeigt werden soll, mit definierter Höhe -->
<div style="height:600px; width:100%" id="map"></div>
<script>
// folgende drei Werte an die eigenen Wünsche anpassen (hier Saarbrücken, Deutsch-Französischer Garten in Zoomstufe 13)
var long = 6.96147; // Längenangabe
var lat = 49.229018; // Breitenangabe
var zoom = 13; // Zoomstufe
// Erzeuge ein Map-Objekt an der gewünschten Position und in der gewünschten Zoomstufe
var map = new L.map('map').setView([lat, long], zoom);
// und füge einen Tile-Layer hinzu
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
</script>
</body>
</html>
Marker hinzufügen:
Füge hinter den Tile-Layer folgende Anweisung ein.
var marker = L.marker([lat, long]).addTo(map);
Code der Beispieldatei mit Marker
<!DOCTYPE html>
<html>
<head>
<title>Einfache OSM-Karte mit Marker</title>
<meta charset="utf-8" />
<!-- erforderliche leaflet-Dateien -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<!-- DIV-Element, in dem die Karte angezeigt werden soll, mit definierter Höhe -->
<div style="height:600px; width:100%" id="map"></div>
<script>
// folgende drei Werte an die eigenen Wünsche anpassen (hier Saarbrücken, Deutsch-Französischer Garten in Zoomstufe 13)
var long = 6.96147; // Längenangabe
var lat = 49.229018; // Breitenangabe
var zoom = 13; // Zoomstufe
// Erzeuge ein Map-Objekt an der gewünschten Position und in der gewünschten Zoomstufe
var map = new L.map('map').setView([lat, long], zoom);
// und füge einen Tile-Layer hinzu
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// Marker im Zentrum einfügen
var marker = L.marker([lat, long]).addTo(map);
</script>
</body>
</html>
Der Marker kann ganz einfach mit einem Popup ausgestattet werden, das beim Draufklicken erscheint:
Ergänze
marker.bindPopup("Nordeingang, Deutsch-Französischer Garten").openPopup;
(Text selbstverständlich nach eigenem Bedarf konfigurieren)
Code der Beispieldatei mit Marker, der mit einem Popup ausgestattet ist
<!DOCTYPE html>
<html>
<head>
<title>Einfache OSM-Karte mit Marker, der mit einem Popup ausgestattet ist</title>
<meta charset="utf-8" />
<!-- erforderliche leaflet-Dateien -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<!-- DIV-Element, in dem die Karte angezeigt werden soll, mit definierter Höhe -->
<div style="height:600px; width:100%" id="map"></div>
<script>
// folgende drei Werte an die eigenen Wünsche anpassen (hier Saarbrücken, Deutsch-Französischer Garten in Zoomstufe 13)
var long = 6.96147; // Längenangabe
var lat = 49.229018; // Breitenangabe
var zoom = 13; // Zoomstufe
// Erzeuge ein Map-Objekt an der gewünschten Position und in der gewünschten Zoomstufe
var map = new L.map('map').setView([lat, long], zoom);
// und füge einen Tile-Layer hinzu
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// Marker im Zentrum einfügen
var marker = L.marker([lat, long]).addTo(map);
//
marker.bindPopup("Nordeingang, Deutsch-Französischer Garten").openPopup;
</script>
</body>
</html>
Diese Beispiele enthalten keine Dateizugriffe, funktionieren auch direkt von der Festplatte.
Sie entsprechen dem, was Du in das OpenLayers-Beispiel für das “OpenLayers Track Example” geschrieben hast - Du benötigst ja gar keine Anzeige eines GPX-Tracks.
Ich vermute, um auszuprobieren, wie das aussieht.
| 
Vinzenz_Mai:
