Neulich wollten wir eine Karte mit den Finalpositionen aller von uns gelegten, aktiven Caches erstellen (für das lokale Forstamt). Die Idee: auf einer Google Maps Karte alle Cache-Positionen mit Markern markieren.
Und wie macht man das? Nach kurzer Internetrecherche fanden sich diverse Seiten, die erklären, wie das geht. Die Umsetzung ist im Prinzip ganz einfach, da das ganze mit einer einzelnen HTML-Datei mit eingebettetem JavaScript realisierbar ist. Der Ablauf ist wie folgt:
Wer das Listing oben inhaltlich nicht versteht und trotzdem eine eigene Karte erstellen möchte: keine Sorge, das geht trotzdem.
Angepasst werden muss dabei nur der Bereich var LocationData = [...]. Dort befinden sich die Daten für die Marker.
Jeder Marker wird durch eine Zeile wie
[50.394533, 7.957633, "Dosenshow: Matchstick Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png" ]
dargestellt. Diese enthält, in eckige Klammern [ ] eingeschlossen:
Die farbigen Marker sind im obigen Beispiel so gewählt, dass rote Marker die Position (unserer) existierenden Caches zeigen, blau die noch geplanten.
Wie man die Farben ein- und verteilt kann natürlich jeder selber bestimmten. Auf rot und blau (wie im obigen Beispiel) gibt es noch gelb (yellow-dot.png), lila (purple-dot.png) und grün (green-dot.png).
Die Cachekoordinaten, welche an erster und zweiter Position in der Liste stehen, müssen in Dezimalgrad (also z.B. 50.123456) angegeben werden und nicht in der beim Geocaching sonst üblichen Darstellung Grad mit Dezimalminuten (also z.B. 50° 12.345).
Die Umrechnung ist ganz einfach, auch ohne zusätzliche Tools (welche online aber reichlich vorhanden sind).
Zum Umrechnen nimmt man einfach die Dezimalminuten, teilt die Zahl durch 60. Das Ergebnis sind dann die Nachkommastellen für die Darstellung in Dezimalgrad.
Beispiel:
50° 21.345 wäre dann:
50 + 21.345/60 = 50 + 0,35575 = 50.35575
Wenn es sich beim Breitengrad im Süd-Koordinaten handelt und / oder beim Längengrad um West-Koordinaten, dann muss in der Dezimalgrad-Darstellung zusätzlich noch ein Minus-Zeichen davor (also wäre z.B. S 50°21.345 in Dezimalgrad -50.35575)
Somit steht einer eigenen Karte nichts mehr im Weg.
Sollten auf der Karte nach dem Aufruf die Marker fehlen, so ist in der Regel in der Liste der Caches ein Fehler. Dies könnte z.B. ein fehlendes Anführungszeichen oder ein fehlendes Komma sein.
Und wie macht man das? Nach kurzer Internetrecherche fanden sich diverse Seiten, die erklären, wie das geht. Die Umsetzung ist im Prinzip ganz einfach, da das ganze mit einer einzelnen HTML-Datei mit eingebettetem JavaScript realisierbar ist. Der Ablauf ist wie folgt:
- in der Datei ist eine Liste mit den Koordinaten der Caches hinterlegt
- diese wird mittels JavaScript eingelesen
- dann erzeugt das Script über die API von Google Maps die passende Karte mit Markern
- die Karte wird als HTML-Seite im Browser angezeigt
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geocaches - Görgeshausen - Blog-Demo</title>
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
html, body, #map-canvas { height: 100%; margin: 2px; padding: 2px }
h1 {font-size:16px; font-family:helvetica, arial, sans; padding: 2px; margin: 0px;}
p {font-size:14px; font-family:helvetica, arial, sans; padding: 2px; margin: 0px;}
</style>
<script type="text/javascript">
var LocationData = [
[50.394533, 7.957633, "Dosenshow: Matchstick Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png" ],
[50.39742, 7.95443, "Letterbox Alter Grenzstein", "http://maps.google.com/mapfiles/ms/icons/red-dot.png" ],
[50.39592, 7.94455, "Sommer, Sonne, Kaktus", "http://maps.google.com/mapfiles/ms/icons/red-dot.png" ],
[50.400167, 7.95755 , "Dosenshow: Weithalskanister", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.39777, 7.94897, "Dosenshow: Mini Decon Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.401667, 7.946717, "Dosenshow: Mun-Kiste", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.405217, 7.942033, "Dosenshow: Nacro Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.40527, 7.96688, "Dosenshow: Keep it clear Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
[50.3946, 7.9599, "(geplanter Cache)", "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"],
[50.3968, 7.9585, "(geplanter Cache)", "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"]
];
function initialize()
{
var map =
new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in LocationData)
{
var p = LocationData[i];
var latlng = new google.maps.LatLng(p[0], p[1]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: p[2],
icon: p[3]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title);
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<h1>Caches im Görgeshäuser Wald</h1>
<p>rot=existent, blau=geplant</p>
<div id="map-canvas"></div>
</body>
</html>
 |
| aus dem Skript generierte Karte |
Angepasst werden muss dabei nur der Bereich var LocationData = [...]. Dort befinden sich die Daten für die Marker.
Jeder Marker wird durch eine Zeile wie
[50.394533, 7.957633, "Dosenshow: Matchstick Container", "http://maps.google.com/mapfiles/ms/icons/red-dot.png" ]
dargestellt. Diese enthält, in eckige Klammern [ ] eingeschlossen:
- die Breitengrad-Koordinaten im Dezimalgradformat (1. Eintrag)
- die Längengrad-Koordinaten im Dezimalgradformat (2. Eintrag)
- den Namen des Caches (3. Eintrag)
- die Farbe des Markers (4. Eintrag).
 |
| Name des Caches wird angezeigt |
Die farbigen Marker sind im obigen Beispiel so gewählt, dass rote Marker die Position (unserer) existierenden Caches zeigen, blau die noch geplanten.
Wie man die Farben ein- und verteilt kann natürlich jeder selber bestimmten. Auf rot und blau (wie im obigen Beispiel) gibt es noch gelb (yellow-dot.png), lila (purple-dot.png) und grün (green-dot.png).
Die Cachekoordinaten, welche an erster und zweiter Position in der Liste stehen, müssen in Dezimalgrad (also z.B. 50.123456) angegeben werden und nicht in der beim Geocaching sonst üblichen Darstellung Grad mit Dezimalminuten (also z.B. 50° 12.345).
Die Umrechnung ist ganz einfach, auch ohne zusätzliche Tools (welche online aber reichlich vorhanden sind).
Zum Umrechnen nimmt man einfach die Dezimalminuten, teilt die Zahl durch 60. Das Ergebnis sind dann die Nachkommastellen für die Darstellung in Dezimalgrad.
Beispiel:
50° 21.345 wäre dann:
50 + 21.345/60 = 50 + 0,35575 = 50.35575
Wenn es sich beim Breitengrad im Süd-Koordinaten handelt und / oder beim Längengrad um West-Koordinaten, dann muss in der Dezimalgrad-Darstellung zusätzlich noch ein Minus-Zeichen davor (also wäre z.B. S 50°21.345 in Dezimalgrad -50.35575)
Somit steht einer eigenen Karte nichts mehr im Weg.
Sollten auf der Karte nach dem Aufruf die Marker fehlen, so ist in der Regel in der Liste der Caches ein Fehler. Dies könnte z.B. ein fehlendes Anführungszeichen oder ein fehlendes Komma sein.
Hey, super Sache! Mach mit doch mal eine Karte mit den Finals Eurer Mysteries, ok?
AntwortenLöschenJörg, die Karte für's Forstamt zeigt natürlich auch die Finals aller Mysteries... Angebote bitte Mail direkt an mich ;-)
AntwortenLöschenHab noch 284 Favoritenpunkte über... da könnte ich dir ein paar von abgeben ;-)
LöschenInteressanter Blogpost. Gibt es auch eine Möglichkeit, das über eine OSM-Karte zu realisieren?
AntwortenLöschenJa, sicherlich. Ein Codebeispiel ist im OSM-Wiki: http://wiki.openstreetmap.org/wiki/Die_HTML_Dateien
LöschenFunktioniert vom Prinzip genau so.