DE:Openlayers Track example
Dieses Beispiel zeigt, wie man eine Karte mit Marker auf ihren konfigurierbaren Mittelpunkt und einem konfigurierbaren Zoomfaktor auf Basis von HMTL erzeugt und somit in eine Website einbinden kann. Das funktionierende Beispiel basiert auf einer veralteten Version von OpenLayers. Falls dabei die Nutzbarkeit für Nicht-Webentwickler erhalten bleibt, sind Verbesserungen willkommen.
Wenn du aktuelle Informationen beitragen kannst, hilf bitte bei der Aktualisierung oder teile diese auf der Diskussionsseite mit. (Discussion)
Anleitung
Diese Anleitung basiert auf dem OpenLayers Simple Example (englisch).
Voraussetzungen
- Texteditor (z.B. Editor, Notepad, oder Wordpad bei Windows)
- ca. drei Minuten Zeit
- Webbrowser um die fertige HTML-Datei zu öffnen.
Anmerkungen
Die englischsprachige Version führt zwei weitere Voraussetzungen auf:
- Track als GPX-Datei. (Das gilt auch hier!)
- Zugang zu einem Webserver (inklusive Hinweis auf lokale Möglichkeiten
Erstelle einen neuen Ordner an einem beliebigen Ort auf der Festplatte.
HTML-Datei erstellen
Kopiere folgenden Code (achte darauf, dass du auch das erste und letzte Zeichen kopiert hast! Alles von <html> bis </html> einschließlich), füge ihn mit dem Texteditor in eine neue Seite, speichere den Text im neu angelegten Ordner unter einem frei gewählten Dateinamen (beispielkarte.html) :
<html>
<head>
<!-- Source: http://wiki.openstreetmap.org/wiki/Openlayers_Track_example -->
<title>Simple OSM GPX Track</title>
<!-- OpenLayers javascript library
Wir binden die Bibliothek direkt aus dem Internet ein,
die Datei kann bei Bedarf aber auch lokal abgespeichert werden)
-->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- OpenStreetMap OpenLayers layers.
Diese Datei bevorzugt aus dem Internet laden um sie aktuell zu halten
-->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
// Startposition auf der Karte
var lat=47.496792
var lon=7.571726
var zoom=13
var map; //complex object of type OpenLayers.Map
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
// Define the map layer
// Here we use a predefined layer that will be kept up to date with URL changes
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers = new OpenLayers.Layer.Markers("Marker");
map.addLayer(layerMarkers);
// *********************************************************************
// Block "Layer mit GPX-Track" - Start
var GPXVariable_1 = new OpenLayers.Layer.Vector("Beispielstrecke", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "beispiel.gpx",
format: new OpenLayers.Format.GPX()
}),
style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(GPXVariable_1);
// Block "Layer mit GPX-Track" - Ende
// *********************************************************************
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(lonLat, zoom);
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
}
</script>
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:90%; height:90%" id="map"></div>
</body>
</html>
Die Karte zeigt beim Öffnen der HTML Datei einen nördlichen Teil der Schweiz bei Basel.
Mittelpunkt und Zoomfaktor ändern
Öffne die Datei mit einem Texteditor. Suche die folgenden Zeilen und passe die Koordinaten für die Kartenmitte und den Wert für die Zoomstufe entsprechend Deinen Wünschen an.
var lon = 47.496792; var lat = 7.571726; var zoom = 13;
Stand Januar 2023 funktioniert das Beispiel im Firefox-, Edge- und Opera-Browser.