Benutzer:Gerold Rosenberg/CoordFinder
Zur Navigation springen
Zur Suche springen
CoordFinder.html[Bearbeiten | Quelltext bearbeiten]
Quelltext unten mit 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[Bearbeiten | Quelltext bearbeiten]
<!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>
Beispiel für Änderung - Wegpunkteausgabe im GPX-Format[Bearbeiten | Quelltext bearbeiten]
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.
<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>
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<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">
<!-- Kommentare sehen so aus -->
<metadata>
<name>Dateiname</name>
<desc>Validiertes GPX-Beispiel ohne Sonderzeichen</desc>
<author>
<name>Autorenname</name>
</author>
</metadata>
<!-- Gekürztes Beispiel aus dem Wikipedia Artikel "GPX" Abschnitt "Beispiel".
Es werden NUR die Angaben lon und lat per Mausklick in der Karte angepasst! -->
<wpt lat="<span class="latOutTag">undefiniert</span>" lon="<span class="latOutTag">undefiniert</span>">
<ele>35.0</ele>
<time>2011-12-31T23:59:59Z</time>
<name>Reichstag (Berlin)</name>
<sym>City</sym>
</wpt>
</gpx>
</pre>
</body>