Block: Interaktive Karte

Mit dem Block Interaktive Karte können Sie geografische Zusammenhänge ansprechend darstellen.
Sie können diesen Block verwenden, wenn Sie z.B. die Lage Ihrer Veranstaltungsorte oder Ihrer Mitgliedsorganisationen auf Ihrer Webseite präsentieren wollen.

Interaktive Karte bedeutet, dass die Besucher per Maus oder Tastatur auf der Karte weitere Informationen zu den einzelnen Orten einblenden können. Das können z.B. Adressen, Telefonnummern oder Ansprechpartner:innen sein. Über Hyperlinks können Sie an dieser Stelle zu internen Seiten oder zu externen Angeboten wie z.B. die Seiten der Mitgliedsorganisationen verlinken.

Hier ein paar Beispiele, wie das aussehen kann: NBH-Neukölln Moabiter Ratschlag Stadtteilkoordination Kreuzberg Stadtteilzentren Mobil

Block einfügen

Sie finden den Block unter der Rubrik JULIA BLOCKS. Dort haben wir die meisten der von uns programmierten Blöcke untergebracht.

Im Backend sieht der Block dann so aus:

Mit dem Schieberegler oben rechts können Sie festlegen, ob neben der obligatorischen Kurzbeschreibung auch eine weiterführende Beschreibung verwendet werden soll. Für die Ausgabe auf Ihrer Webseite muss diese Funktion im Theme freigegeben und gestaltet werden. Sollte das nicht der Fall sein und Sie benötigen eine umfangreiche Beschreibung, dann setzen Sie sich mit uns in Verbindung.

Kurzbeschreibung einfügen

An dieser Stelle können Sie relevante Informationen für die gesamte interaktive Karte hinterlegen. So z.B. eine Überschrift, eine Erklärung, was auf der Karte dargestellt wird oder wie diese benutzt werden kann.
Wir haben dazu bereits eine Überschrift und einen Absatz im Template eingesetzt. Wollen Sie Ihre Beschreibung außerhalb des Karten-Blocks einsetzen, dann können Sie diese Elemente löschen.

Grafik für die Karte einsetzen und positionieren

Klicken Sie auf das Stiftsymbol im Bereich Karte. Als erstes benötigen Sie eine Grafik mit einem passenden Kartenausschnitt. Dieser sollte an die Gestaltung der Webseite angepasst werden. Wir unterstützen Sie gerne dabei.

Über den Button „Upload Image“ können Sie die Grafik von Ihrem Computer in die Mediathek hochladen. Vergessen Sie nicht, beim Hochladen die Alternativbeschreibung einzutragen.

Im nächsten Schritt benötigen Sie die Geokoordinaten Ihres Kartenausschnittes. Dazu gehen am Besten auf Google Maps und suchen sich die Begrenzungen Ihres Ausschnittes auf dieser Karte.
Klicken Sie auf die Google-Karte, um eine Ortsmarkierung zu setzen. Klicken Sie dann mit der rechten Maustaste auf diese Markierung, um die Detailinformationen anzuzeigen. Als ersten Eintrag finden Sie hier die Latitude (Breitengrad) und die Longitude (Längengrad). Wenn Sie auf die Zahlen klicken, dann werden diese kopiert. Setzen Sie die Werte in den entsprechenden Feldern ein. Bei Latitude Top benötigen Sie den ersten Wert von der oberen Begrenzung des Kartenausschnitts (Latitude Bottom – erster Wert der unteren Begrenzung, Longitude Left – zweiten Wert der linken Begrenzung, Longitude Right – zweiten Wert der rechten Begrenzung).

Nun können Sie die Karte bereits auf Ihrer Webseite ansehen.
Es fehlen allerdings noch die Karteneinträge.

So wird der Kartenausschnitt auf Ihrer Webseite angezeigt.

Karteneinträge hinzufügen

Klicken Sie auf „Karteneintrag hinzufügen“ unterhalb der Karte.

Je nachdem, ob Sie den Schieberegler oben auf „Karte mit Beschreibung“ oder „Karte ohne eine Beschreibung“ gesetzt haben, variiert hier die Anzahl der Eingabefelder.

Tragen Sie bei IconTitle den Text ein, der neben dem Icon dauerhaft angezeigt werden soll.
Wählen Sie ein passendes Icon aus. Welche Icons zur Verfügung stehen, wird bei der Entwicklung Ihres Themes festgelegt. Treten Sie mit uns in Kontakt, wenn Sie weitere Icons zur Auswahl benötigen.
Wählen Sie in den Blockeigenschaften in der rechten Seitenleiste die Position des Icon-Titels aus.
Ermitteln Sie die Geokoordinaten für den beschriebenen Ort. Dazu gehen am Besten auf Google Maps und suchen Sie nach dem gewünschten Ort. Klicken Sie mit der rechten Maustaste auf die Ortsmarkierung und dann auf die oberen beiden Zahlen, um diese zu kopieren.
Setzen Sie den ersten Wert bei Latitude im linken Feld und den zweiten Wert bei Longitude im rechten Feld ein.
Tragen Sie in der Kurzbeschreibung die Informationen ein, die bei Maus- oder Tastaturinteraktion auf der Webseite angezeigt werden sollen.
Wir haben bereits zwei Blöcke im Template eingesetzt. Sie können hier aber beliebige Blöcke hinzufügen.
Wenn Sie die Langbeschreibung aktiviert haben, tragen Sie auch hier die gewünschten Informationen ein.

So sieht der fertige Eintrag aus, wenn er per Maus oder Tastatur ausgewählt wurde.

Tipps

Da in den Beschreibungen normale Blöcke benutzt werden, können Sie auch Verlinkungen einfügen. Wählen Sie dazu den Text aus, den Sie verlinken wollen und klicken Sie dann auf das Link-Symbol in der darüber befindlichen Werkzeugleiste.
Sie können so interne Seiten verlinkten, auf denen Angebote und andere Inhalte zu den jeweiligen Orten zu finden sind.

Google stellt Ihnen über die Teilen-Funktion Links zu den jeweiligen Orten auf Google-Maps zur Verfügung. Wenn Sie diese Links benutzen, können Besucher Ihrer Seite den Routenplaner zu den ausgewiesenen Orten ermitteln. Andere Möglichkeiten finden sich bei der Bahn oder den Seiten des regionalen Nahverkehrs. Vergessen Sie nicht, dass Häkchen bei „n neuem Tab öffnen“ zu setzen.

Wenn die Icons zu dicht beieinander stehen haben Sie folgende Möglichkeiten:

Setzen Sie die Beschriftung auf eine andere Position. Klicken Sie dazu in den Block-Eigenschaften in der rechten Seitenleiste auf den entsprechenden Button.
Verändern Sie die dritte oder vierte Zahl bei Latitude oder Longitude geringfügig.
Nutzen Sie ein eigenes Koordinatensystem.
Beispiel: bei der Karte LONGITUDE LEFT = 0, LATITUDE TOP = 0, LONGITUDE RIGHTS = 200, LATITUDE BOTTOM = 100 (bei einer Grafik, die doppelt so breit wie hoch ist)
beim Eintrag LONGITUDE (Wert von links) = 100, LATITUDE (Wert von oben) = 50 (um das Icon genau in die Mitte zu setzen).