Die Beschreibung und das Beispiel einer Karte mit OpenStreetMap: Ab Mittenwald Mountainbike bzw. Wandertour zur Rotmoosalm im Wettersteingebirge
Das einbinden von OpenStreetMap Karten unterscheidet sich deutlich von der Wanderreitkarte. In die HTML Datei eingebettet werden die Javascriptaufrufe bei OpenStreetMap bzw. die Scripte.
Standardmäßig gibt es 3 Layer. Der an erster Stelle stehende Layer im Script ist der, der beim Aufruf die Seite darstellt. Die anderen Layer können unter dem "+"
am Rand rechts gewählt werden. Zwei Layer stellen Straßenkarten dar und ein Layer zeigt eine Karte mit Höhenlinien. Diesen nutze ich häufig für die Darstellung von Bergtouren. Das bedeutet, daß man mit der Reihenfolge die Startkarte festlegt.
Artikel bezieht sich auf Verwendung in der Zeit Stand ca. Jahr 2014
Der Code beinhaltet hier in der Ansicht keinen Umruck! Zum genauen ansehen kopieren und im geigneten Editor lesen!
Die Tracks werden jeweils in "var lgpx = new OpenLayers.Layer.GML................" eingebunden. Hier kann eine Bezeichnung eingetragen werden. Der Dateiname IHRtrack.gpx muss eingetragen werden und hier {strokeColor: "#8B0000", strokeWidth: 6, strokeOpacity: 0.5}, werden die Farbe, die Strichdicke und die Durchsichtigkeit des Stichs festgelegt.
Für einen weiteren Track werden einfach die 6 Zeilen kopiert und die neuen Werte eingetragen.
Für die Icons und für den Text, der nach dem anklicken der Icons erscheint, gibt es Textdateien. Die Textdateien werden in einem neuen Layer aufgerufen: "var pois = new OpenLayers.Layer.Text............." Die Daten können alle in einer Textdatei untergebracht werden. Es ist aber auch möglich, wie im Beispiel zwei oder mehr Textdateien aufzurufen.
{phocadownload view=file|id=5|text=OpenStreetMap Mittenwald Rotmoosalm. download *.zip|target=s}
HTML Datei zur Anzeige von OpenStreetMap Karten
Alle Dateien sind im download enthalten. Beachten Sie hier die unterstrichenen Passagen. dazu gibt es bei Mouseover Kommentare. Bitte beachten, dass die Beispiele nach den neuen Serverstandorten üb erarbeitet werden müssen!
Achtung - zur Information, die Anwendung ist so nicht mehr aktuell. Alles zur Info!
Achtung! Derzeit (13.03.2012) funktionieren die Beispiele nicht mit osmarrender und seit 2014 wurde der Serverstandort (www.openlayers.org) geändert. Es muss einiges an den Dateien geändert werden. Die Überarbeitung hier wird im Laufe des Jahres 2015 erfolgen.
Bitte folgeneden Code entfernen aus den Beispielen:layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender, Straßen");
map.addLayer(layerTilesAtHome);
Ende
<!--Dokument überarbeitet und validiert von dl7nbm, http://www.mittenwald-ferienzeit.de im August 2011 aufgebaut auf dem Beispiel nach http://wiki.openstreetmap.org/wiki/DE:Openlayers_Track_example-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="mittenwald, mountainbiken, mountainbiketour, mountainbike,, ferienwohnung, ferienwohnungen, berge, alpen, touren, tour, bergtour, alpenwelt karwendel, markt mittenwald, wintersport, skifahren, skilanglauf, langlauf, scating, wetterstein, karwendel, isar, ferchensee, lautersee, Haus Roseneck, Haus-Roseneck, rotmoosalm, gaistal, wetterstein">
<META NAME="Author" CONTENT="dl7nbm, Norbert Bührer">
<META HTTP-EQUIV="language" CONTENT="de">
<meta name="page-topic" content="Reise, Tourismus, Travel, Urlaub, Ferienwohnung, Appartement, Wandern">
<meta name="classification" content="Info">
<META NAME="description" CONTENT="Wandern in Mittenwald, der Alpenwelt Karwendel (916 - 2.385 m), Oberbayern, oberes Isartal, Karwendelgebirge">
{tip GEO Position::Hier die Position von Mittenwald. Kann komplett entfallen. Dann nicht vergessen das GEO Icon in dieser Datei zu entfernen}<meta name="geo.region" content="DE-BY">
<meta name="geo.placename" content="Mittenwald">
<meta name="geo.position" content="47.45112;11.27453">
<meta name="ICBM" content="47.45112, 11.27453">{/tip}
<title>Mountainbiketour ab Mittenwald/ Bergtour vom P Gaistal zur Rotmoosalm</title><link href="favicon.ico" rel="shortcut icon" type="image/x-icon"><link rel="stylesheet" type="text/css" href="map-os.css">
<!-- Script nach Vorlage von: http://wiki.openstreetmap.org/wiki/DE:Openlayers_Track_example --> <!-- bring in the OpenLayers javascript library (here we bring it from the remote site, but you could easily serve up this javascript yourself) --><script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script><!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes --><script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><script type="text/javascript">// Start position for the map (hardcoded here for simplicity,// but maybe you want to get this from the URL params){tip Kartendarstellung::Hier wird die Position der Kartenmitte und der Zoomfaktor festgelegt}var lat=47.3753var lon=11.0790var zoom=14{/tip}var map; //complex object of type OpenLayers.Mapfunction 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//die an erster Stelle stehende Map (ie 2 Zeilen) ist die beim Aufruf angezeigte{tip Kartenreihenfolge::Hier wird die Reihenfolge der Layer festgelegt. Immer 2 Zeilen gehören zusammen}layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("Karte mit Höhenlinien");map.addLayer(layerCycleMap);layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik, Straßenkarte");map.addLayer(layerMapnik);layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender, Straßenkarte");map.addLayer(layerTilesAtHome);{/tip}layerMarkers = new OpenLayers.Layer.Markers("Kartenmitte Marker");map.addLayer(layerMarkers); // Add the Layer with the GPX Track//Track 1{tip Track::Für jeden Track ist ein solcher Bereich erforderlich}var lgpx = new OpenLayers.Layer.GML("Wanderung zur Rotmoosalm", "./trk/P-gaistal-rotmoosalm86.gpx", {format: OpenLayers.Format.GPX,style: {strokeColor: "#8B0000", strokeWidth: 6, strokeOpacity: 0.5},projection: new OpenLayers.Projection("EPSG:4326")});map.addLayer(lgpx);{/tip}//für jeden weiteren Track muss ein neuer Layer eingefügt werden//Track 2var lgpx = new OpenLayers.Layer.GML("Wanderung zur Rotmoosalm über Hämmermoos", "./trk/P-gaistal-86rotmoosalm.gpx", {format: OpenLayers.Format.GPX,style: {strokeColor: "blue", strokeWidth: 6, strokeOpacity: 0.5},projection: new OpenLayers.Projection("EPSG:4326")});map.addLayer(lgpx);//Track 3var lgpx = new OpenLayers.Layer.GML("Mountainbiketour zur Rotmoosalm", "./trk/Rotmosalm-Haus-Roseneck-Mountainbike.gpx", {format: OpenLayers.Format.GPX,style: {strokeColor: "red", strokeWidth: 6, strokeOpacity: 0.5},projection: new OpenLayers.Projection("EPSG:4326")});map.addLayer(lgpx);//Layer für die Icon mit Text//Textdatei 1var pois = new OpenLayers.Layer.Text( "Markierung Punkte", { location:"./txt/rotmoosalm.txt", projection: new OpenLayers.Projection("EPSG:4326")} );map.addLayer(pois);//Textdatei 2var pois = new OpenLayers.Layer.Text( "Haus Roseneck, Mittenwald", { location:"./txt/Haus-Roseneck.txt", projection: newOpenLayers.Projection("EPSG:4326")} ); map.addLayer(pois);
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><!-- die folgende funktion als ersatz bzw. Aenderung fuer "<body onload="init()">" --> <script type="text/javascript">function start(map) {init();}window.onload = start; </script>
</head><body>
{tip Kopf::Der Kopfbereich über der Karte div}<div id=kopf>
<a href="http://www.mittenwald-ferienzeit.de" target=_blank><img src="./pic/home.gif" width="46" height="24" alt="http://www.mittenwald-ferienzeit.de" title="Home" border="0"></a> Mountainbiketour ab Mittenwald/ Bergtour vom P Gaistal zur Rotmoosalm; Durch scrollen vergrößern/verkleinern. Unter <img src="./pic/plus-18x16.gif" width="18" height="16" alt="am rechten Rand KLICKEN" title="am rechten Rand KLICKEN" border="1" > Routen ab-/zuschalten<br>
<input type="button" value=""> Hilfetext: Mausrad = kleiner/größer; zum verschieben des Bereiches die linke Maustaste halten; Kartenart rechts <img src="./pic/plus-18x16.gif" width="18" height="16" alt="am rechten Rand KLICKEN" title="am rechten Rand KLICKEN" border="1" > ggf. wählen... <a id=OpenStreetMap title=OpenStreetMap
href="http://www.openstreetmap.org/" target=_blank>freie Karte -
OpenStreetMap</a><a>>></a><a id="unter-der-Lizenz-sCC-BY-SA" title="Lizenz CC-BY-SA"
href="http://creativecommons.org/licenses/by-sa/2.0/" target=_blank>unter der
Lizenz CC-BY-SA</a>
</div>{/tip}
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
{tip Karte::map = Kartenaufruf}<div id=map></div>
{/tip}
<!-- das Validierungszeichen im Format x.ico (als download mit x.jpg von w3.org). Nur belassen, wenn die Datei validiert ist! --> <div id=w3><a href="http://validator.w3.org/check?uri=referer"><img src="./pic/valid-html401.gif" width="88" height="31" alt="Valid HTML 4.01 Transitional" title="Valid HTML 4.01 Transitional"></a></div>
{tip GEO Icon::entfernen oder auskommentieren, wenn die GEO Werte oben entfernt werden}<!-- http://www.geo-tag.de/ --> <div id=geo><a href="http://www.geo-tag.de"title="Diese Seite ist geo-codiert" target="_blank"><img src="http://www.geo-tag.de/icon/geotag_3.png"alt="Diese Seite ist geo-codiert">
</a></div>{/tip}
<!-- Hinweistext im Fußbereich --> <div id=hinweis> <input type="button" value="">Für Info und WEB-Links auf die Ikons klicken! Positionen und Track sind als Orientierung zu sehen, nicht als exakte Wegepunkte! Ohne Gewähr! Bitte informieren Sie sich vor Ort! </div>
</body>
</html>
Weiter zum Text
Text Datei zur Anzeige von Icons und Text auf OpenStreetMap Karten
Unten die im Beispiel benutzte Datei "rotmoosalm,txt"
Die Textdatei muss exakt den vorgegebenen Regeln entsprechen!
Zwischen den Werten befindet sich jeweils ein TAB.
Umlaute müssen maskiert werden.
Am Ende der Zeilen muss!! sich ein Zeilensprung (Return) befinden.
lat = die Geographische Breite, dezimal (Achtung, kein Komma sondern Punkt)
lon = die Geographische Länge, dezimal (Achtung, kein Komma sondern Punkt)
title = Titel
description = Beschreibung
icon = gif Bild mit Pfad
gifnSice = Icongröße in Pixel
giffnOffset = Verstz des Icon in Pixel
{tip Kopfzeile::Die Kopfzeile ist bei allen Textdateien dieselbe. Achtung Werte nur duch TAB getrennt}lat lon title description icon gifnSize gifnOffset{/tip}
47.365448 11.093627 P, am Ende der Fahrstrasse (Salzbach) im Gaistal ./pic/P1.gif 20,20 -10,-10
47.371170 11.082196 Hämmermoos- alm Einkehrmöglichkeit ./pic/huette-h.gif 20,20 -10,-10
47.383569 11.077199 Rotmoosalm <a id="Rotmoosalm saisonale Einkehr auf ca. 2.030 Höhenmeter; www.rotmoosalm.info" target="_blank" title="saisonale Einkehr auf ca. 2.030 Höhenmeter" href="http://www.rotmoosalm.info/">Rotmoosalm saisonale Einkehr auf ca. 2.030 Höhenmeter</a> ./pic/huette-h.gif 20,20 -10,-10
47.387091 11.064112 Ursprüngliche Rotmoosalm Standort der Rotmoosalm vor Zerstörung durch eine Lawine ./pic/wimpel.gif 20,20 -10,-10
47.364125 11.111877 Schranke Hier ist die Parkgebühr zu entrichten ./pic/stop.gif 20,20 -10,-10
47.369801 11.048958 Gaistalalm saisonale Einkehrmöglichkeit ./pic/huette-h.gif 20,20 -10,-10
Wie kommen wir zu den Positionen latitude und longitude?
Entweder die Daten mit dem GPS ermitteln oder mit dem Programm GPX Editor erstellen. Das ist damit recht komfortabel.
Weiter zur GPX Datei
Die GPX Datei zur Anzeige eines Tracks auf der OpenStreetMap Karte
Die GPX Datei aufgenommen mit einem GPS Gerät und im Editor konntrolliert und ggf. nachgebessert. GPS Daten von den üblichen Geräten haben häufig Ausreißer die durch schlechten Empfang entstanden sind. Das ist in den Editoren deutlich zu erkenn, da in GoogleMaps, das von den Editoren verwendet wird, so weit gezoomt werden kann, dass Fehler erkannt und korrigiert werden können.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3" xmlns:rcxx="http://www.routeconverter.de/xmlschemas/RouteCatalogExtensions/1.0" xmlns:nmea="http://trekbuddy.net/2009/01/gpx/nmea" creator="Generated by Christian Pesch's RouteConverter. See http://www.routeconverter.de" version="1.1">Und so weiter..............und so weiter............
</gpx>
Weiter zur css Datei
Die css Datei zur Anzeige von OpenStreetMap Karten
Grundsätzlich ist es natürlich möglich, den css Style im HTML zu integrieren. Es ist aber von Vorteil und üblich, wenn man mehrere Dateien hat, den ccs Style für alle gemeinsam in einer Datei zusammen zu fassen.
Hier die verwendete Datei map-os.css
/* CSS zu OpenstreetKarten auf der Seite http://www.mittenwald-ferienzeit.de. Erstellt im September 2011 von dl7nbm, Norbert Bührer */
html,body {
}/*p Bereich u. a. der Zusatztext bei den Popups*/
p
{
}
#kopf
{
}
#OpenStreetMap{
}
#unter-der-Lizenz-sCC-BY-SA{
}
a:link {background-color:#FFC125;} /* unvisited link */
a:visited {background-color:#ADD8E6;} /* visited link */
a:hover {background-color:#00FF00;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
div#map {
}#w3
{
}#geo
{}
#hinweis
{
}