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}

Die HTML Datei

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&uuml;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.3753
            var lon=11.0790
            var zoom=14
{/tip}

    
            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
            //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&ouml;henlinien");
            map.addLayer(layerCycleMap);
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik, Stra&szlig;enkarte");
            map.addLayer(layerMapnik);
            layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender, Stra&szlig;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 2
                var lgpx = new OpenLayers.Layer.GML("Wanderung zur Rotmoosalm &uuml;ber H&auml;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 3
            var 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 1
            var pois = new OpenLayers.Layer.Text( "Markierung Punkte", { location:"./txt/rotmoosalm.txt",
            projection: new
            OpenLayers.Projection("EPSG:4326")} );
            map.addLayer(pois);
            //Textdatei 2
            var pois = new OpenLayers.Layer.Text( "Haus Roseneck, Mittenwald", { location:"./txt/Haus-Roseneck.txt",
            projection: new
            OpenLayers.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&ouml;&szlig;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&ouml;&szlig;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&auml;hlen... <a id=OpenStreetMap title=OpenStreetMap
href="http://www.openstreetmap.org/" target=_blank>freie Karte -
OpenStreetMap</a><a>&gt;&gt;</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&uuml;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

Die Text Datei

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&auml;mmermoos- alm Einkehrm&ouml;glichkeit ./pic/huette-h.gif 20,20 -10,-10
47.383569 11.077199 Rotmoosalm <a id="Rotmoosalm saisonale Einkehr auf ca. 2.030 H&ouml;henmeter; www.rotmoosalm.info" target="_blank" title="saisonale Einkehr auf ca. 2.030 H&ouml;henmeter" href="http://www.rotmoosalm.info/">Rotmoosalm saisonale Einkehr auf ca. 2.030 H&ouml;henmeter</a> ./pic/huette-h.gif 20,20 -10,-10
47.387091 11.064112 Urspr&uuml;ngliche Rotmoosalm Standort der Rotmoosalm vor Zerst&ouml;rung durch eine Lawine ./pic/wimpel.gif 20,20 -10,-10
47.364125 11.111877 Schranke Hier ist die Parkgeb&uuml;hr zu entrichten ./pic/stop.gif 20,20 -10,-10
47.369801 11.048958 Gaistalalm saisonale Einkehrm&ouml;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 Track Datei GPX

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">
    
    <trk>
        <name>Rotmoosalm - Mittenwald - Haus Roseneck, Ferienwohnungen</name>
        <trkseg>
            <trkpt lon="11.076270639872" lat="47.383435734048">
                <ele>2019.0</ele>
                <name>PT1</name>
            </trkpt>
            <trkpt lon="11.076254546618" lat="47.383610078739">
                <ele>2019.0</ele>
                <name>PT2</name>
            </trkpt>
            <trkpt lon="11.07608824966" lat="47.383631871786">
                <ele>1988.0</ele>
                <name>PT3</name>
            </trkpt>
 

Und so weiter..............und so weiter............
            <trkpt lon="11.274671699834" lat="47.450412642878">
                <ele>906.0</ele>
                <name>PT502</name>
            </trkpt>
            <trkpt lon="11.27462878449" lat="47.450688337467">
                <ele>904.0</ele>
                <name>PT503</name>
            </trkpt>
            <trkpt lon="11.274789717031" lat="47.451188937105">
                <ele>904.0</ele>
                <name>PT504</name>
            </trkpt>
        </trkseg>
    </trk>
</gpx>

Weiter zur css Datei

Die 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&uuml;hrer */

html,body {
    background-color: #C0C0C0;
    height: 100%;
    width: 100%;
    margin:auto;
    margin-left:4px;
    font-family:verdana,helvetica,arial,sans-serif;
    font-size:15px;
    overflow:auto;
    color: #C0C0C0;
}

/*p Bereich u. a. der Zusatztext bei den Popups*/
p
{
    text-align:left;
    color:#202020;
}


#kopf
{
    position:fixed;
    z-index:2;
    top:4px;
    /*align:center;*/
    height:auto;
    text-align:left;
    font-size:14px;
    /*color unten = Ueberschrift bzw. Kopf*/
    color:#330000;
}


#OpenStreetMap{
    color:red;
}


#unter-der-Lizenz-sCC-BY-SA{
    color:red;
}


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 {
    position:fixed;
    z-index:1;
    height:90%;
    width:99%;
    bottom:1px;
}

#w3
{
    position:absolute;
    z-index:2;
    bottom:4px;
    left:4px;
    HEIGHT:30px;
    width:auto;
    border:0;
    /*align:bottom;*/
}

#geo
{
    position:absolute;
    z-index:2;
    bottom:4px;
    right:4px;
    HEIGHT:15px;
    width:80px;
    border:0;

}


#hinweis
{
    position:absolute;
    z-index:2;
    bottom:0px;
    left:120px;
    right:120px;
    HEIGHT:65px;
    font-size:14px;
    font-weight:bold;
    color:#FF0000;
}

Aktivitäten und Touren planen

Touren, Touren planen www.mittenwald-ferienzeit.de, die Seite auf der sie alle Aktivitäten ausführlich beschrieben finden.
Ausführliche Informationen und Darstellung von Touren und Tourenkarten Karwendelgebirge, Wettersteingebirge, Estergebirge, Oberes Isartal, Mittenwald, angernzendes Tirol
Wandern, Hüttentouren, Mountainbiktouren, Wander- und Tourenkarten.

Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.