Wie ich SPOT GPS Messenger Karten auf meiner Homepage integriere

1. Teile deine SPOT Daten

Damit Spotwalla deine SPOT Daten abholen kann, musst du in deinem SPOT Konto eine Karte Teilen.

 

Log dich in dein findmespot.com Konto ein und gehe zu Meine Geräte. Notiere die ESN von deinem SPOT:

Gehe zu “Teilen” und klicke auf “Eine Share Page erstellen”. Ich empfehle es alle Arten von “GPS-Positionen zum Teilen” anzuwählen, damit sämtliche Daten in deinem Spotwalla Konto gespeichert werden. Welche davon du dann nutzen willst, kannst du in Spotwalla auswählen. Ein Passwort ist nicht zwingend nötig, schadet aber auch nicht. Falls du deinen SPOT Service von Basic zu Unlimited oder Extreme Tracking upgradest, kann es sein, dass du die neuen Optionen hier nachträglich noch aktivieren musst. Ich hatte zum Beispiel das Unlimited Tracking zuerst nicht aktiviert und habe mich dann nach dem Upgrage gewundert, warum meine maps keine Daten mehr anzeigen. Nachdem ich die Option dann bei SPOT aktiviert hatte lief wieder alles wie erwartet.

 

Nachdem du deine “Share Page” erstellt hast wird eine URL angezeigt die du dann in Spotwalla zum Einrichten des Geräts benötigst. Speichere diese URL z.B. in einem Text-Editor damit du sie später gleich zur Hand hast.

 

Deine Share Page wird nun unter “Teilen” aufgelistet. Von hier aus kannst du die zugehörige SPOT-Karte öffnen (klicke auf den Namen der Share Page), Anpassungen daran vornehmen, oder die Share Page löschen.

 

Das ist alles was du bei findmespot.com tun musst und nun auf zu Spotwalla!

2. Registriere dich für eine kostenfreies Spotwalla Konto

Solltest du bereits ein Spotwalla Konto haben, kannst du dieses Kapitel überspringen. Falls du noch keines hast ist nun höchste Zeit eins anzulegen. Gehe zu spotwalla.com und wähle “Register“.

 

Gib deine gültige E-Mail Adresse ein und wähle ein sicheres Passwort für dein Konto.

 

Gib deine Daten ein und wähle einen Benutzername. Ich persönlich wähle bei der Zeitzone UTC da ich auf meiner Reise durch mehrere Zeitzonen reise und es für mich so einfacher ist die Zeit von Datensätzen zu verstehen. Im Normalfall wählst du hier aber deine eigene Zeitzone.

 

Lies das “User Agreement” durch und stimme diesen zu. Beweise, dass du kein Roboter bist :)

 

Nachdem du deine Spotwalla Konto angelegt hast, wird dir eine Liste von Hilfeseiten zu verschiedenen Geäten aufgelistet. Diese Seiten sind aber auch später unter Support wieder zu finden.

3. Richte dein SPOT Geät bei Spotwalla ein

So, nun hast du dein Spotwalla Konto, Zeit sich einzuloggen und dein SPOT Gerät anzulegen.

 

Nachdem du dich eingeloggt hast, klicke auf deinen Benutzernamen oben rechts und gehe zu “Devices”.

 

Hast du bisher noch keine Geräte angelegt, ist die Liste hier erst mal leer. Das ändern wir aber gleich, klicke auf Create a Device“.

 

Da wir hier ein SPOT Gerät einrichten wählst du “SPOT Personal Tracker”. Für andere Geräte empfehle ich dir einen Blick in die Hilfeseiten von Spotwalla.

 

Gib deine SPOT ESN (falls du diese nicht kennst logge dich bei findmespot.eu ein und gehe zu “Meine Geräte”) und deine SPOT Share Page URL ein. Diese haben wir im ersten Kapitel in einen Text-Editor kopiert. Falls du die URL nicht notiert hast, logge dich bei findmespot.eu ein, gehe zu “Teilen” und klicke auf den Namen deiner Share Page, die URL dieser Seite musst du übertragen (siehe folgendes Bild). Falls du ein Passwort in deiner Share Page gewählt hast, gib dieses hier ein, ansonsten lässt du das Feld für das Passwort leer. Stelle sicher, dass du einen Haken bei “activate this device’s message interface” setzt, so dass Spotwalla auch die Daten von SPOT abholt.

 

Falls du die URL deiner SPOT Share Page jetzt oder später mal benötigts, logge dich bei findmespot.eu ein, gehe zu “Teilen” und klicke auf den Namen deiner Share Page, die URL dieser Seite musst du übertragen. Falls noch keine SPOT Daten vorhanden sind kann es sein, dass du eine Meldung “No Messages” angezeigt bekommst. Einfach OK klicken.

 

Kopiere die ganze URL in der Adressleiste deines Browsers und übertrage diese in die Konfigurations-Seite deines Geräts bei Spotwalla.

4. Erstelle ein “Last Location Widget” in Spotwalla

Das “Last Location Widget” von Spotwalla zeigt jeweils nur die letzte bekannte Position auf einer Karte die du in deine Website integrieren kannst. Falls du nur deine Tour anzeigen willst, kannst du dieses Kapitel überspringen.

 

Falls du das “Last Location Widget” benutzen möchtest, musst du dies in Spotwalla für dein Gerät aktivieren. Gehe zu Devices, klicke auf den Namen deines Geräts und wähle “Widget” vom Dropdown Menu.

Hier musst du ein Haken bei der ersten Checkbox setzen um das Widget zu aktivieren. Du kannst auch auswählen, welche Arten von GPS Daten von deinem SPOT für das Widget benutzt werden sollen. Normalerweise reicht “Tracking”. Du kannst aber z.B. auch nur die OK (check-in) or “custom” Nachrichten von deinem SPOT verwenden. Wenn du mehrere aktivierst, gilt die letzte von allen. (Stelle sicher, dass du diese Nachrichten-Typen in deiner Share Page bei findmespot.eu auch aktiviert hast).

Wenn du das widget erstellt oder aktualisierst bekommst du eine URL angezeigt, kopiere diese URL in einen Text-Editor, denn du brauchst diese gleich für deinen Blog/Homepage.

 

Solltest du das Gefühl haben, dein Widget wird von irgendjemandem missbräuchlich verwendet, solltest du eine neue URL für dein Widget generieren. Diese URL musst du dann natürlich auch auf deiner Homepage anpassen. Falls du die URL aus versehen neu generierst, musst du diese natürlich auch auf deiner Website anpassen!

Jetzt kommt der spannende Teil: Wie füge ich das Widget in meine Website ein? Im Prinzip ist es einfach etwas HTML welches die URL deines Spotwalla Widgets und einige Parameter zur Darstellung enthalten kann. Willst du z.B. bei Wordpress das widget in einer Seitenleiste anzeigen dann wähle dort ein einfaches “Text widget” und füge den HTML code dort ein. Du kannst diesen Code aber auch auf einer Seite oder in einem Beitrag einfügen. Siehe ein Beispiel für den HTML code, du kannst diesen Code-Schnipsel als Vorlage verwenden und in deine Seite kopieren, vergiss aber nicht, die URL durch deine eigene Spotwalla Widget URL zu ersetzen, ansonsten wirst du nicht viel sehen.

Here is the code you can use, replace the URL with your own!

<iframe src='https://spotwalla.com/myLocation.php?id=2d155532e8f16ecb7&scale=off&scrollZoom=on&format=map&traffic=off&zoomLevel=5&mapType=terrain' width='100%' height='210' scrolling='no' frameborder='0'> Embedding failed because inline frames are not supported by your browser or the web server. </iframe>

 

Hier ein paar Erklärungen was in diesem Code-Schnippsel alles passiert:

src=’…’ hier kommt deine spotwalla widget URL rein. Die URL selbst kann Parameter zur Konfiguration der Darstellung enthalten. Hier gibts die Dokumentation zum Spotwalla Last Location Widget, aber ich erkläre dir an meinem Beispiel, was die Parameter bedeuten. Parameter in einer URL werden durch ‘&’ getrennt.

src=’https://spotwalla.com/myLocation.php?id=2d155532e8f16ecb7

die ID muss diejenige von deiner Widget URL sein

scale=off

Ich möchte keinen Massstab auf der Karte anzeigen. Erlaubte Optionen: “on” oder “off”.

scrollZoom=on

Ich möchte, dass man die Karte mit dem Scrollrad der Maus zoomen kann. Erlaubte Optionen: “on” oder “off”.

format=map

Ich möchte meine letzte Position auf einer Karte darstellen und nicht nur als Koordinaten. Wenn du nur Koordinaten willst wähle hier “text”.

traffic=off

Keine Google Verkehrsdaten auf der Karte anzeigen. Erlaubte Optionen: “on” oder “off”.

zoomLevel=5

Erlaubte Werte sind 1 bis 20. Probiere verschiedene Werte aus um den Zoom deinen Bedürfnissen anzupassen. Da mein Widget recht klein ist, passt für mich der Wert 5 sehr gut. Es ist “weit” genug um eine Idee von der Region zu erhalten aber “nah” genug um die Position halbwegs erkennen zu können.

mapType=terrain

Ich persönlich mag die “Terrain” Karten von Google am liebsten. Es gibt noch “normal”, “satellite” und “hybrid”.

Danach folgen einige weitere Parameter, diese sind jedoch nicht Teil der URL und betreffen den HTML Behälter in welchem das Widget eingebettet wird, hier handelt es sich um ein “iframe”. Hier sind die Parameter durch ein Leerzeichen getrennt und die Werte sind von einfachen Anführungszeichen umgeben. Für eine Referenz zu HTML kann ich die Seite W3Schools empfehlen.

width=’100%’ height=’210′

Die Grösse des Widgets wird durch die Grösse des Behälters (iframe) definiert. Ich möchte, dass der Container 100% in der Seitenleiste breit ist. Die Höhe fixiere ich auf 210 Pixel.

scrolling=’no’

Ich möchte keine Scrollbalken anzeigen.

frameborder=’0′

Ich möchte keinen Rahmen um mein Widget herum. Falls doch, gib an wie viele Pixel breit der Rahmen sein soll, z.B. ‘2px’.

 

Als Resultat sieht mein Last Location Widget wie folgt aus. Eine kleine Google Maps Karte mit einem Pin der meine letzte Position anzeigt.

 

Der Pin enthält meine Initialen. Die Wahrscheinlichkeit ist hoch, dass bei dir der Pin ‘???’ anzeigt. Keine Panik, das lässt sich schnell ändern, die Option befindet sich aber wider erwarten an einer anderen Stelle. In deinem Spotwalla Konto klicke auf deinen Benutzernamen und wähle “Preferences”.

 

Jetzt einfach die drei ??? durch etwas anderes ersetzen. Allerdings ist dies auf 3 Stellen beschränkt und Emoticons/Smileys funktionieren nicht, es sei denn du gibts diese als Text ein wie z.B. “:-)”.

5. Zeige deine Tour auf deinem Blog

Du möchtest dein Tour oder Teile davon auf deiner Website zeigen? Kein Problem mit Spotwalla!

 

Log dich in deinen Spotwalla account ein und klicke auf “Trips” in dem Dropdown Menu bei deinem Benutzernamen. Hier kannst du deinen ersten Trip erstellen.

 

Wähle das Gerät welches wir zuvor in Spotwalla eingerichtet haben. Benenne deine trips sinnvoll, denn möglicherweise wirst du in Zukunft mehrere davon erstellen.

Zum Zwecke dieser Anleitung erstellen wir ein “All-Time” trip welcher einfach alle verfügbaren GPS Daten enthält. Das End-Datum wählen wir einfach ein gutes Stück in der Zukunft, so dass man dies nicht so schnell wieder anpassen muss. Setze das Start Datum mindest 4 Wochen von Heute zurück (oder mehr wenn du dein SPOT schon früher eingerichtet hast) und setze das End Datum in ferner Zukunft.

Du kannst natürlich auch Trips für einen spezifischen Zeitraum, zum Beispiel deine Urlaubs-Tour vom vergangenen Sommer oder die bevorstehende Nikolaus-Ausfahrt. Dies ist zum Beispiel nützlich, wenn Du einen Bericht über eine Tour oder Urlaub schreibst und dazu die Karte mit der gefahrenen Route anzeigen willst. Falls du die GPS Daten von einer bestimmten Tour (bestimmter Zeitraum) exportieren willst ist es auch praktisch, einen Trip dafür anzulegen, dann ist der Export bereits auf den gewünschten Zeitraum beschränkt.

Da ich mich gerade auf einer Motorrad Weltreise befinde möchte ich einfach alles seit Beginn anzeigen. Beim Integrieren in die Webseite kann man dann immer noch definieren wie viel vergangene Stunden angezeigt werden sollen (obwohl der Trip ja viel mehr Daten hat). Somit habe ich eine Karte welche meine gesamte gefahrene Route darstellt. Und es ist dann noch ein Zuckerschlecken eine Karte der “letzten 30 Tage” anzulegen.

 

 

Gehe zu “Security Options” und wähle den Nachrichten-Typ (message type) von SPOT aus, die du auf der Tour-Karte anzeigen willst, normalerweise Tracking.

Falls du besorgt bist, jemand könnte sehen wo du wohnst, und dann gleich noch live sehen wann du nicht zu Hause bist, Spotwalla hat auch dafür eine Lösung! Du kannst dem Gerät in Spotwalla eine secure zone zuweisen. Dabei handelt es sich um einen bestimmten Radius um einen Koordinatenpunkt herum (z.B. dein Haus) in welchem keine GPS Daten angezeigt werden. Dies kannst Du in den Einstellungen des Geräts definieren.

Bei “Map Options” wähle ein Symbol das bei deiner letzten Position auf der Karte angezeigt werden soll.

Für die verschiedenen Message Typen kannst du unterschiedliche Symbole wählen, als Pin oder als Punkt. Für Tracking wähle ich den Punkt da das einfach besser ausschaut als ein Haufen voller Pins auf der Karte. Damit die Punkte durch eine Linie verbunden sind wähle die Option a line drawn from one location to the next. Wähle dann noch den Karten-Typ aus, ich persönlich mag Terrain am liebsten.

 

Falls man zuvor eigene GPS tracks hochgeladen hat, kann man diese hier auch der Karte hinzufügen. Solltest du z.B. eine Lücke in deiner Route haben, weil dein Spot für einige Zeit ausgeschalten war, kannst du diese so z.B. mit GPS Daten von deinem Navigationsgerät füllen. Das Importieren von Tracks ist aber nicht das Thema dieses Artikels, vielleicht zeige ich euch das ein anderes mal.

 

Hast du deinen Trip erstellt, kannst du diesen in Spotwalla öffnen, klicke auf den Tripname und wähle “View Trip” aus dem Dropdown Menu aus. Falls du schon eine längere Historie an GPS Daten in Spotwalla hast, bist du jetzt vielleicht verwirrt, warum du diese nicht siehst, du hast doch das Start- und End Datum eingestellt!? Keine Sorge, das ist einfach nur eine Standardeinstellung des Tripviewers in Spotwalla (betrifft nicht die in die Website integrierten Karten) und kannst du ganz einfach anpassen…

 

Öffne das Dropdown Menu über deinem Tripname und wähle “Adjustments”.

 

Die “History”, also der Verlauf, ist z.B. auf 6 Tage gestellt, oft sogar nur standardmässig auf 1 Tag. In meinem Beispiel war es zwar auf 6 Tage eingestellt, aber ich war gerade länger als 6 Tage an ein und demselben Ort.

 

Ändere dies auf “ALL” und klicke auf “Update Map”.

Jetzt solltest du sämtliche Daten sehen, die zwischen dem definierten Start und Enddatum deines Trips liegen!

 

Wenn du es bis hier hin geschafft hast, und der Tripviewer anzeigt was du möchtest, sind wir nun soweit um die Karte mit dem Trip in deinen Blog einzubauen. Kopiere die URL des Tripviewers aus der Adressleiste deines Browsers.

 

Diese URL benutzt du dann in dem folgenden HTML Code Schnipsel, welches du an gewünschter Stelle in deinem Blog oder Website einfügst, z.B. würdest du in Wordpress eine Seite erstellen und es dort einfügen:

 

Hier ist das HTML Code Schnipsel mit dem du starten kannst, ersetze die URL (oder die ID in der URL) durch deine eigene! Sonst gibts wie immer nicht viel zu sehen.

<iframe src="https://spotwalla.com/embed.php?id=12bad581bac7369f3a&scale=on&zoom=default&refresh=no&showHome=no&hoursPast=8760&showAll=yes&fillFactor=5" width="400" height="400" frameborder="0" scrolling="false"> ... </iframe>

 

Die URL kann wie beim Last Location Widget einige Parameter enthalten. Schaue dir mal die Dokumentation von Spotwalla zum Einbetten dazu an. Dennoch hier ein paar Erklärungen dazu:

Es gibt zwei Typen von URLs die du hier benutzen kannst:

src=”https://spotwalla.com/tripViewer.php?id=12bad581bac7369f3a

src=”https://spotwalla.com/embed.php?id=12bad581bac7369f3a

Gemäss Doku hat “tripViewer.php” eine Seitenleiste während “embed.php” diese nicht anzeigt. Ich konnte keinen Unterschied feststellen, vermutlich ein Überbleibsel aus vergangenen Tagen.

scale=on

Zeige einen Massstab auf der Karte an (on). Zum Ausblenden “off” eingenben.

zoom=default

Hier kannst du Werte zwischen 1 und 20 eingeben. Ich lasse es hier auf “default” da so die Karte automatisch gezoomt wird, dass der ganze Trip sichtbar ist.

refresh=no

Ich benötige keine automatische Aktualisierung der Karte. Beim neu Laden der Seite wird diese immer aktualisiert.

showHome=no

Ich möchte keinen Home Button der zu Spotwalla verlinkt anzeigen.

hoursPast=8760

Dies ist eine sehr interessante und nützliche Option. Damit kannst du einstellen, wie viele Stunden in die Vergangenheit Daten angezeigt werden sollen. Natürlich geht nur was innerhalb des definierten Start und Enddatums des Trips liegt. Du kannst hier aber z.B. ganz einfach eine Karte erstellen, die deine letzten 7 Tage anzeigt, dann musst du einfach 7*24 = 168 eingeben. Bei mir steht 8760 Stunden, das ist genau ein Jahr, denn ich möchte ja meine gesamte Route anzeigen. Sollte ich länger als ein Jahr unterwegs sein, werde ich das entsprechend anpassen. :)

showAll=yes

Dies betrifft das initiale Zoom-Level der Karte. Wenn du dies auf “yes” stellst zoomt die Karte soweit raus, dass alle Datenpunkte angezeigt werden. Stellst du es auf “no” zoomt die Karte auf deinen letzten Standort und der Benutzer kann dann selber rauszoomen um den Trip zu sehen.

fillFactor=5

Wie viel Prozent der vorhanden Tracking Punkte möchstest du anzeigen. Mir geht es darum, die Route meiner Reise zu zeigen, daher ist es nicht nötig, dass alle Trackingpunkte (alle 5 Minuten bei meinem SPOT) angezeigt werden, ich habe es daher auf 5% gestellt. Achtung: nur die Zahl 5 und ohne “%” eingeben!

 

Danach folgen ein paar Parameter die den HTML Container (iframe) betreffen. Das ist das gleiche wie beim Last Location Widget und du kannst dies weiter oben nachlesen.

width=”400″ height=”400″ frameborder=”0″ scrolling=”false”

 

 

Speichere deine Seite und der Trip sollte nun auf deiner Website angezeigt werden.

6. Problemlösung

Nicht verzagen wenn mal etwas nicht klappt. Hier ein paar Tips was du überprüfen solltest:

• Überprüfe deine Share Page bei findmespot.eu, sind alle Nachrichten Typen aktiviert?
• Überprüfe, dass die URL deiner findmespot.eu Share Page korrekt in Spotwalla in deinem Gerät hinterlegt ist, und ob das Passwort stimmt
• Überprüfe, ob du die URL von deinem Tripviewer der Last Location Widget korrekt in den HTML Code zum Einbetten übernommen hast
• Überprüfe, ob du Start- und Enddatum in deinem Trip korrekt eingestellt hast.

Verwirrung Ade!

Da Spotwalla viele Konfigurationsmöglichkeiten und damit eine gewisse Komplexität bietet, kann schnell mal Verwirrung entstehen, wo man was einstellen muss. Ich habe dies durch viel herumprobieren erst komplett verstanden. Eine kurze Zusammenfassung soll dir helfen, es gleich zu verstehen.

Ein Spotwalla Trip hat ein Start- und Enddatum. Dieser Zeitraum definiert welche Daten eine Karte azeigen kann (vorausgesetzt es sind auch SPOT Daten vorhanden in diesem Zeitraum). Beim Einbetten der Karte in die Website kannst du mit dem “hoursPast” Parameter den Zeitraum innerhalb des Start- und Enddatums weiter einschränken. “hoursPast” bezieht sich allerdings immer auf den aktuellen Tag und ist somit eine relative Zeitangabe.

Wenn du in Spotwalla den Tripviewer öffnest (“View Trip” im Dropdown des Trips) wird standardmässig nur ein vergangener Tag angezeigt (dies würde “hoursPast=24” beim Einbetten entsprechen). Über “Adjustments” im Dropdown Menu im Tripviewer einfach unter “History” auf “ALL” stellen. Das vergisst man schnell und dann kommt Panik auf, dass keine Daten vorhanden seien.

Die Zeitzone sollte normalerweise kein Problem darstellen. Da ich allerdings auf meiner Reise öfters mal eine Zeitzone überschreite, ist es für mich einfacher die Zeit zu verstehen, wenn ich alles auf UTC stelle. Das erleichtert mir auch den Offset beim Geotaggen meiner Fotos einzustellen. Ich empfehle allerdings die Zeitzone nicht während einer laufenden Tour zu ändern. Ich habe das mal gemacht, und mein Tripviewer hat dann merkwürdige Zickzack-Linien angezeigt. Irgendwie sind die Zeitangaben dabei durcheinander gekommen. Solltest du dich auch auf eine Weltreise begeben würde ich UTC empfehlen (stelle dies so bei SPOT und bei Spotwalla ein), ansonsten kannst du beruhigt deine eigene Zeitzone einstellen.

Andere Lösungen

Die SPOT-eigene Lösung

Du kannst auch die Shared Page von findmespot direkt einbinden. Allerdings schauen diese weder schön aus noch zeigen diese alle Daten an.

So würde das ausschauen, höchstwahrscheinlich nicht, was du gerne hättest!

Falls du es dennoch so machen willst, lies den knowledge base Artikel bei findmespot. Es gibt dort auch ein Location Widget, aber man bekommt es mit Skripting-Sprache zu tun und bei mir hat es auch nicht funktioniert.

 

shareyourspot.com

Ein einfacher und schneller Weg eine Routen-Karte auf deinen Blog zu bekommen ist der Weg über shareyourspot.com. Wenn du es ausprobieren möchtest, es ist ganz einfach:

Kopiere deine Shared Page URL bei findmespot.eu und füge diese auf der Seite shareyourspot.com ein.

Falls du die URL früher dort schon mal eingefügt hattest, siehst du jetzt eine Liste mit deinem Trip:

Dir wird deine Karte angezeigt und rechts einige Optionen zum einstellen:

Im letzten Schritt bekommst du die fertige Karte zu sehen und den HTML Code um diese in deiner Website zu einzubinden.

Die eingebettete Karte schaut ziemlich schön aus:

Es ist eine einfache und Elegante Methode um schnell eine Karte hinzuzufügen bevor du deine Tour beginnst. Der Trip auf der Karte beginnt einfach zu dem Zeitpunkt an dem du die Karte bei shareyourspot erstellst. Offenbar gibt es auch keine Möglichkeit ein Enddatum festzulegen. Das einfachste wäre vermutlich nach der Tour die Shared Page bei findmespot.eu zu deaktivieren. Ein automatisches Zoomlevel zum Anzeigen des gesamten Trips gibt es nicht.

Ich bevorzuge Spotwalla. Erstens werden dort meine gesamten GPS Daten gespeichert und ich kann diese jederzeit in verschiedenster Form verwenden. Daten exportieren, vergangene, aktuelle und zukünftige Trips erstellen oder externe GPS Daten von anderen Geräten hinzufügen. Ausserdem gibts nur bei Spotwalla Sicherheits-Features wie die “Secure Zone”, das könnte für viele sehr wichtig sein!