Quelltext der Seite Benutzer:Gerold Rosenberg/CoordFinder

== CoordFinder.html ==

Quelltext unten mit [[Kopieren und Einfügen|C&P]] ausschneiden, in einen Editor kopieren, als lokale Datei (Endung ".html") abspeichern und mit einen Browser starten (in die Aufrufzeile des Browsers "[file://]" eingeben, sich durch den Pfad hangeln und ggf. unter Favoriten abspeichern). Ebensogut kann das Programm auf einen Server abgelegt und aufgerufen werden (für die Bedienung macht das keinen Unterschied). 

Bei Weitergabe jeglicher Art (auch Server) verzichte ich auf Namensnennung!  

Im Quelltext finden sich Hinweise, wie das Programm ohne Programmierkenntnisse an eigene Bedürfnisse anpassen kann. 

Wichtiger Hinweis: unter [[Wikipedia:WikiProjekt Georeferenzierung/Hilfe/Tools]] findest du Empfehlungen von professionellen Programmen (GeoLocator ist demnach zu empfehlen). 

Mögliche Probleme beim Kopieren des Programmtextes mit C&P: manche Editoren brechen lange Zeilen um. Auf englich meist word-warp genannt. Vor dem Speichern der Datei darauf achten, das lange Zeilen nicht umgebrochen werden.

== Quelltext ==

<syntaxhighlight lang="html" style="font-size:0.8em">
<!DOCTYPE html>
<html>

<!-- 
  Javascript-Code teilweise aus "A little more extensive example" 
  http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example
  und 
  http://harrywood.co.uk/maps/examples/openlayers/mouse-position.view.html
  Uebernommen.
  
  Veroeffentlicht unter 
  https://de.wikipedia.org/wiki/Benutzer:Gerold_Rosenberg/CoordFinder

  Das Programm ist frei und kann ohne Namensnennung weiter verbreitet werden! 

  Erste Version: 
  https://de.wikipedia.org/w/index.php?title=Benutzer:Gerold_Rosenberg/CoordFinder&oldid=146342361

  Ab der zweiten Version werden Variablen für Longitude, Latitude und Zoomfaktor in Cookies 
  gespeichert um nach Unterbrechungen an der gleichen Stelle weiter zu arbeiten. Es werden von 
  diesem Javascript nur diese drei Daten gespeichert und diese verlassen deinen Rechner nicht. 
  Auch nicht, wenn dieses Javascript über einen Server gestartet wurde. Wer trotzdem keine 
  Cookies möchte, kann erste Version verwenden. 

  Anmerkung: das Programm ruft OpenStreatMap Karten (OSM) ueber OpenLayers.js auf. Fuer deren 
  Service (einschl. Speicherung deiner Zugriffsdaten) kann ich keine Verantwortung uebernehmen. 
 
-->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Koordinatensuche fuer de.wiki und commons
  </title>

  <!-- Javascript OpenLayers von extern laden -->
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>

  <!-- StyleSheet -->
  <style type="text/css">
    html, body
    { width:100%; height:100%; margin:0;
    }
    #mapdiv 
    { width:100%; height:75%; margin:0;
    }
  </style>

  <!-- Lokales Javascript definieren -->
  <script type="text/javascript">

    // Globale Variablen: 
    // Wie speichern die letzte Pos. und letzten Zoomfaktor in Cookies. Hier 
    // ist das Verfallsdatum definiert. 
    var cookieExpires  = "Thu, 31 Dec 2099 12:00:00 UTC"; 

    // Klick-Handler einrichten 
    OpenLayers.Control.Click = OpenLayers.Class 
    ( OpenLayers.Control, 
      { defaultHandlerOptions: 
        { 'single': true,
          'double': false,
          'pixelTolerance': 0,
          'stopSingle': false,
          'stopDouble': false
        },

        initialize: function(options) 
        { this.handlerOptions = OpenLayers.Util.extend
          ( {}, 
            this.defaultHandlerOptions
          );
          OpenLayers.Control.prototype.initialize.apply
          ( this, arguments
          ); 
          this.handler = new OpenLayers.Handler.Click
          ( this, 
            { 'click': this.trigger
            }, 
            this.handlerOptions
          );
        }, 
        
        trigger: function(e)
        // wird von einem Klick getriggert  
        { // Mausposition im Pixelformat holen ...
          var pixPos = map.getLayerPxFromViewPortPx(e.xy) ;
          // ... und Marker verschieben 
          mouse_marker.map = map;
          mouse_marker.moveTo(pixPos);

          // Mauspos. in Koordinaten in Variable lonlat übertragen
          var lonlat = map.getLonLatFromViewPortPx(e.xy)
          lonlat.transform
          ( new OpenLayers.Projection("EPSG:900913"), 
            new OpenLayers.Projection("EPSG:4326")
          );
           
          // Schleife (in Funktion changeTextContent) über alle Tags der 
          // Klassen "lonOutTag" u. "latOutTag"
          this.changeTextContent("lonOutTag",lonlat.lon.toFixed(6));
          this.changeTextContent("latOutTag",lonlat.lat.toFixed(6));
          
          // lon, lat und zoom als cookie speichern (alten Wert dabei überschreiben)
          document.cookie = "CoordFinderTool_lon="  + lonlat.lon    + "; expires=" + cookieExpires + ";"; 
          document.cookie = "CoordFinderTool_lat="  + lonlat.lat    + "; expires=" + cookieExpires + ";"; 
          document.cookie = "CoordFinderTool_zoom=" + map.getZoom() + "; expires=" + cookieExpires + ";"; 
        }, 

        changeTextContent: function(className,textContent)
        // Funktion zum Aendern der HTML-Tags 
        { var TagArray = document.getElementsByClassName(className);
          for (var i = 0; i < TagArray.length; i++)
          { TagArray[i].textContent=textContent;
          }
        }
      }  
    ); // Ende Klick-Handler
    
    // Initialierung (Aufruf durch Body-Tag)  
    function init()
    { 
      // Hier kann man ggf. die Variablen "position" und "zoom" anpassen 
      // wenn man diese Datei auf den lokalen Rechner kopiert. 
      var startPosition  = [9.550563,47.537164] // Koordinaten Dreiländereck Bodensee 
      var zoom           = 8; 
      var mapnik         = new OpenLayers.Layer.OSM();
      var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transformation von WGS 1984
      var toProjection   = new OpenLayers.Projection("EPSG:900913"); // nach Mercator 

      // Variablen fuer lon, lat und zoom aus Cookies auslesen      
      // Sind Cookies vorhanden?
      if (typeof document.cookie !== 'undefined') 
      { // Schleife über alle Cookies
        for (var i = 0; i < document.cookie.split(";").length; i++)
        { // Wenn Cookie ein 'CoordFinderTool' wendeln wir es in eine Variable um
          if (document.cookie.split(";")[i].match('CoordFinderTool')) 
          { eval('var ' + document.cookie.split(";")[i]);
          }; 
        }
      };
      // Die tatsächlichen Varibablen testen wir noch vor dem Einsatz
      if (typeof CoordFinderTool_lon  !== 'undefined') { startPosition[0] = CoordFinderTool_lon; };
      if (typeof CoordFinderTool_lat  !== 'undefined') { startPosition[1] = CoordFinderTool_lat; };
      if (typeof CoordFinderTool_zoom !== 'undefined') { zoom             = CoordFinderTool_zoom; };

      // Wenn wir sicher sind, das wir lon und lat haben ... 
      var position       = new OpenLayers.LonLat(startPosition).transform( fromProjection,toProjection);

      // Karte anlegen 
      map = new OpenLayers.Map('mapdiv');

      // Kartenlayer hinzufügen 
      map.addLayer(new OpenLayers.Layer.OSM());

      // Legende für Maßstab hinzufügen 
      map.addControl (new OpenLayers.Control.ScaleLine({maxWidth:250}));

      // Layer für Marker anlegen 
      var markers = new OpenLayers.Layer.Markers( "Markers" );
      map.addLayer(markers);
      mouse_marker = new OpenLayers.Marker(position); 
      markers.addMarker(mouse_marker); 

      //  Karte auf gewählte Pos zentrieren 
      map.setCenter(position, zoom );

      // Handler für Klickauswertung einrichten (s.o.)
      var click = new OpenLayers.Control.Click();
      map.addControl(click);
      click.activate();

    } // Ende Initialisierung 

  </script>
</head>
    

<body onload="init()"> <!-- HTML-Body ruft beim Start JS-Funktion init() auf  -->

<!-- Unsere Spielregeln für den Body sind sehr einfach:
  Wir schreiben einfach das HTML runter wie wir es gewohnt sind. Wollen wir 
  irgendwo den Latitundenwert des Mausklicks haben, setzten wir wie folgt ein 
  span-Tag  an die Stelle im HTML-Code ein: 
  
     <span class="latOutTag">...</span> 
  
  Soll irgendwo die Longitude rein, gehen wir analog vor und 
  nehmen als Klassename "lonOutTag". Ansonsten ist nicht besonderes im Body zu 
  beachten. 
-->

  <div id="mapdiv">
    <!-- Platz für die Karte - sollte also bleiben -->
  </div>
  <ul> <!-- Tag für Beginn einer Liste -->
       <!-- Listenpunkte sollten nach eignen Bedürfnissen angepasst werden -->
    <li> <!-- Beginn des ersten Listenpunkts  -->
      de.wiki.org (<a href="https://de.wikipedia.org/wiki/Vorlage:Coordinate">[[:de:Vorlage:Coordinate]]</a>): <br />
      {{Coordinate|NS=<span class="latOutTag">
      undefiniert</span>|EW=<span class="lonOutTag">
      undefiniert</span>|type=landmark|dim=25|region=DE|text=ICON2|name=StadtLandFluss}}
    </li>
    <li> <!-- Beginn des zweiten Listenpunkts  -->
         <!-- Vorschlag zum anpassen: wer oft eine Richtung angeben will, kann hinter die 
              Lon/Lat Werte der "Location dec" Vorlage (hier mit "undefiniert" bezeichnet) 
              ein "|heading:0" setzen (bei jeden C&P muss dann die Null hinter heading durch 
              einen Wert zw. 0 und 360 Grad angepasst werden) -->
      commons.wikimedia.org (<a href="https://commons.wikimedia.org/wiki/Template:Location_dec/doc">[[:c:Template:Location dec/doc]]</a>): <br />
      {{Location dec|<span class="latOutTag">
      undefiniert</span>|<span class="lonOutTag">
      undefiniert</span>}}
    </li>
    <li><!-- Beginn des dritten Listenpunkts  -->
      commons.wikimedia.org (<a href="https://commons.wikimedia.org/wiki/Template:Object_location#Vorlagenparameter">[[:c:Template:Object location]]</a>): <br />
      {{Object location|<span class="latOutTag">
      undefiniert</span>|<span class="lonOutTag">
      undefiniert</span>}}
    </li>
  </ul> <!-- Ende der Liste -->
</body>
    
</html>
</syntaxhighlight>

== Beispiel für Änderung - Wegpunkteausgabe im GPX-Format == 

Unten ein Beispiel, wie man bei dem Programm sehr leicht den Output ändern kann. Dazu braucht man nur den HTML body-Block durch den unten wiedergegebenen Block austauschen. Klickt man bei dem geänderten Programm auf die Karte, wird eine GPX-Datei mit Wegpunkt ausgegeben. Die kann entsprechend in die meisten GPS-Geräte eingelesen werden. 

<syntaxhighlight lang="html" style="font-size:0.8em">
<body onload="init()"> <!-- HTML-Body ruft beim Start JS-Funktion init() auf  -->
  <div id="mapdiv">
    <!-- Platz für die Karte - sollte also bleiben -->
  </div>

<pre>
&lt;?xml version="1.0" encoding="UTF-8" standalone="no" ?&gt;
&lt;gpx xmlns="http://www.topografix.com/GPX/1/1" version="1.1" creator="Wikipedia"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd"&gt;
 &lt;!-- Kommentare sehen so aus --&gt;
 &lt;metadata&gt;
  &lt;name&gt;Dateiname&lt;/name&gt;
  &lt;desc&gt;Validiertes GPX-Beispiel ohne Sonderzeichen&lt;/desc&gt;
  &lt;author&gt;
   &lt;name&gt;Autorenname&lt;/name&gt;
  &lt;/author&gt;
 &lt;/metadata&gt;

&lt;!-- Gekürztes Beispiel aus dem Wikipedia Artikel "GPX" Abschnitt "Beispiel". 
     Es werden NUR die Angaben lon und lat per Mausklick in der Karte angepasst! --&gt;

 &lt;wpt lat="<span class="latOutTag">undefiniert</span>" lon="<span class="latOutTag">undefiniert</span>"&gt;
  &lt;ele&gt;35.0&lt;/ele&gt;
  &lt;time&gt;2011-12-31T23:59:59Z&lt;/time&gt;
  &lt;name&gt;Reichstag (Berlin)&lt;/name&gt;
  &lt;sym&gt;City&lt;/sym&gt;
 &lt;/wpt&gt;

&lt;/gpx&gt;
</pre>

</body>
</syntaxhighlight>