Karten frei Haus mit persönlichen Erinnerungen

Teil 2: [Workshop] Mapspread: So integrieren Sie Bilder oder Videos in Karten

18.1.2010 von Redaktion pcmagazin und Tim Kaufmann

ca. 3:15 Min
Ratgeber
  1. [Workshop] Mapspread: So integrieren Sie Bilder oder Videos in Karten
  2. Teil 2: [Workshop] Mapspread: So integrieren Sie Bilder oder Videos in Karten

Klicken Sie auf Save, geben Sie der Karte einen Namen und speichern Sie sie mit OK ab. Im Gegenzug rückt Mapspread einen Link heraus, über den Sie die Karte im Browser aufrufen können. Außerdem erhalten Sie HTML-Code zum Einbetten der Karte.

Weitere Infos anzeigen

Jetzt geht es an das Aufpeppen der Karte mit zusätzlichen Infos. Diese speichern Sie in zusätzlichen Spalten der Datentabelle Ihrer Ebene. Markieren Sie die Ebene links unten in der Übersicht und klicken Sie anschließend rechts auf Add a column. Geben Sie der Spalte zunächst den Namen Bild. Dann legen Sie unter Column type den Spaltentyp auf Photo fest und bestätigen mit Save.Die meisten Spaltentypen dienen der Präzisierung von Ortsangaben. Statt die gesamte Adresse in einer einzigen Spalte zu hinterlegen, können Sie die zugehörigen Infos auf verschiedene Spalten wie Ort, Postleitzahl, Bundesland und Land verteilen. Dadurch kann Mapspread die Orte präziser geocodieren. Latitude und Longitude werden Sie nur benötigen, wenn Ihnen die entsprechenden Koordinaten bereits vorliegen. In der Regel dürfte das nicht der Fall sein.

Landkarten-Webservice Mapspread
Via Customize your map können Sie Kartenfunktionen wie die Anzeige des Maßstabs oder das Zoomen per Mausrad aktivieren.
© Archiv

Informative Karten

Spaß machen die Spaltentypen Text, URL, Photo und Video, denn die hier eingegebenen Daten erscheinen zusammen mit den übrigen Infos in den Sprechblasen.

Inhaltlich erklären sich die Spaltentypen durch ihren Namen selbst. In ein Feld vom Typ Text beziehungsweise URL geben Sie einfach Fließtext oder eine Web-Adresse ein. Um ein Foto in der Photo-Spalte zu hinterlegen, muss dieses über eine öffentliche Web-Adresse im Netz verfügbar sein. Kopieren Sie die URL eines Beispielfotos in die Zwischenablage und von dort in die Foto-Spalte Ihres ersten Adresseintrags.

Sobald Sie mit der Eingabetaste bestätigen überprüft Mapspread die Adresse auf Korrektheit. Währenddessen erscheint kurz ein winziges rotes Dreieck links oben im Eingabefeld. Nur wenn dieses auch wieder verschwindet, war die Verlinkung erfolgreich. Tipp: Achten Sie darauf, dass Bilder eine Breite von max. 350 Pixeln haben, sonst erscheinen in der Blase horizontale Scrollbalken.

Die Video-Spalte funktioniert ähnlich wie die Photo-Spalte. Sie geben die URL der Videodatei ein - fertig. Mapspread verheiratet Ihre Clips innerhalb der Karte automatisch mit dem bekannten JW Player, der die Videoformate H.264 und FLV unterstützt. Die Bildgröße des Videos wird automatisch an die Größe der Blase angepasst. Am Rande: Weil der JW Player auch MP3 abspielt, kamen wir auf die Idee, die Video-Spalte mit einem MP3-Link zu bestücken, was prompt funktionierte.

Design anpassen

Wenn Sie eine zusätzliche Spalte anlegen, dann bleibt das zunächst ohne Auswirkung auf eine bereits auf Basis des Layers veröffentlichte Karte. Sie müssen die Infos von Hand nachziehen. Nebenbei lernen Sie, wie Sie die Optik der Sprechblasen beeinflussen. Klicken Sie auf den Create an application-Knopf am oberen Rand und wählen Sie ganz unten in der Liste Ihre bereits veröffentlichte Karte aus. In der Beispielblase klicken Sie auf Edit.Über den Inhalt des folgenden Textfeldes legen Sie fest, welche Infos in welcher Form in der Blase angezeigt werden. Das Feld ist mit etwas Text (address: und name:) sowie zwei Platzhaltern mit denselben Namen vorbelegt. Diese Platzhalter bestimmen, an welchen Stellen in der Blase der Inhalt der entsprechenden Datenspalten erscheint.

Landkarten-Webservice Mapspread
Den Inhalt der Sprechblase inklusive Fotos und Videos können Sie über die Mapspread-Oberfläche steuern.
© Archiv

Positionieren Sie den Cursor am Ende der zweiten Zeile und drücken Sie die Eingabetaste. Dann tippen Sie Bild: ein. Den zugehörigen Platzhalter fügen Sie über Insert a tag und Bild ein. Wenn Sie möchten, können Sie weitere Formatierungen vornehmen. Über den Knopf ganz rechts in der Werkzeugleiste lässt sich auch der HTML-Quellcode bearbeiten. Wenn Sie fertig sind, bestätigen Sie mit Done editing.

Import-Funktionen

Wenn Sie größere Datenmengen visualisieren möchten, dann sollten Sie sich Mapspreads Import-Funktion ansehen, die Sie über den Add Layer-Knopf erreichen. Die wichtigste Funktion Import from file lädt Daten aus einer auf der Festplatte gespeicherten Datei. So können Sie zum Beispiel Ihr Adressbuch in eine CSV-Datei exportieren, aufräumen und dann hochladen.

Die notwendigen Spalten werden dabei automatisch angelegt. Den Spaltentyp und Namen können Sie anschließend manuell nachtragen. Dazu klicken Sie auf das rot blinkende Import Ready links unten. Bedenken Sie beim Hochladen von Daten, dass vertrauliche Infos nicht in die Hände ausländischer Gratis-Dienstleister gehören.

Eine recht witzige Funktion verbirgt sich übrigens hinter dem Eintrag "Import locations from a web page". Hier geben Sie einfach die URL einer Webseite an. Mapspread analysiert den Inhalt dieser Seite auf darin enthaltene Ortsangaben und übernimmt alle Funde in ein Layer. Setzen Sie den Import beispielsweise auf die Startseite von Spiegel Online an, um die Herkunft der jüngsten Nachrichten zu visualisieren.

zm_timkaufmann

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.