Hunderte Netzwerke haben sich bereits kartiert und ihre Termine und Standorte mittels der Karte von morgen interaktiv auf ihrer eigenen Seite eingebettet. Und ihre Einträge werden damit über viele Webseiten im Internet sichtbar, denn mit unserem Karten-Werkzeug ist das Teilen kinderleicht:

  • Initiativen/ Unternehmen,
  • Netzwerke und
  • Veranstaltungen
  • oder auch alles zusammen

kannst du auf beliebig vielen Webseiten in beliebigen Kombinationen anzeigen. Die Inhalte werden beim Kartieren über Stichworte (Hashtags) thematisch gruppiert und können darüber wiederum gefiltert und angezeigt werden.

Auf dieser Seite erklären wir technische Funktionen, die vielleicht nicht auf Anhieb erkennbar sind. Besonders wie ihr die Karte auf eurer eigenen Webseite integrieren könnt.

Iframes zum Einbetten

Seit März 2020 steht ein komfortabler Sharing-Button (1) zur Verfügung.

Die Plattform erlaubt es, nach einzelnen Kategorien zu filtern und diese Auswahl auf der eigenen Homepage einzubetten. Besonders Verbände und Netzwerke können so ihre Standorte und Projekte auf ihrer eigenen Webseite präsentieren und gleichzeitig in einer weltweit genutzten Datenbank und Karte verfügbar machen. Ein Beispiel ist die Karte über diesem Text mit allen Regionalpiloten

Vollständiges Karten-Widget mit Suchleiste

<div style="text-align: center;"> 
<iframe name="if_kvm" src=" 
https://kartevonmorgen.org/#/?center=50.992,7.005&zoom=6.32 
" width="100%" height="580"  
style="display: inline-block; border: none 
box-shadow:  0 0 10px  rgba(0,0,0,0.6);" > 
<a href="https://kartevonmorgen.org/" target="_blank">zur karte</a>
</iframe></div> <p style="text-align: right;">
<a href="https://kartevonmorgen.org" 
target="_blank" rel="noreferrer noopener" aria-label=" (öffnet in neuem Tab)">
Große Karte öffnen</a></p> 

Entscheidend ist die dritte Zeile (fett). Dort steht die URL/ der Link die angibt, was auf der Karte zu sehen ist. Dieser URL erhält man, in dem man einfach unter https://kartevonmorgen.org den richtigen Ausschnitt wählt und die URL kopiert. Dabei können verschiedene Attribute angepasst oder weggelassen werden (Alle Attribute in beliebiger Reihenfolge mit einem “&” verbinden):

  • center=50.7365,10.7336 Gibt den Mittelpunkt der Karte an
  • zoom=7 Gibt die Zoomstufe der Karte an
  • search=kleider          Enthält alle Begriff die in der Suchzeile stehen. Wobei %23 zu einem # wird, also ein Schlagwort gefiltert wird.
  • left=hide           Linke Ergebnisspalte ausblenden (hier ein Beispiel)
  • Die Höhe lässt sich auch an die Bildschirmgröße anpassen: „height: calc(100% – 100px);“
    Statt 100px gibst du eben das ein was bei dir passt.

Statt einem Ausschnitt mit Suchergebnissen lässt sich auch ein einzelner Eintrag einbetten. Dazu fügt man in der dritten Zeile einfach die URL des Beitrags ein:

https://kartevonmorgen.org/#/?entry=c5c844f92a4d4e459392197bc6805ee7

Um die ganze Karte etwas kleiner zu machen, bspw. damit die seitliche Ergebnisliste nicht so breit ist, kann man das ganze Teil klein zoomen:

<iframe style="display: inline-block; zoom: 0.7; -moz-transform:scale(0.7); -moz-transform-origin: 0 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0;"

also du ersetzt das “style” attribut im iframe mit dem Inhalt oben.

Hier abschließend ein Beispiel:

Große Karte öffnen

Businesscard Widget

Um nur die Kontaktinformationen ohne Karte an zu zeigen, nimmst du am besten dieses Widget und packst in die zweite Zeile die ID, die du aus der URL  des entsprechenden Eintrags erhälst:

<iframe src=" https://kartevonmorgen.org/businesscard.html#/?entry=4c20979fe0754e74875afa4308d73ce7 " width="200px" height="300px"></iframe> 

Map Widget

Und umgekehrt, will man nur die Karte ohne “Visitenkarte” anzeigen, nimmst du dieses Widget und tauscht natürlich wieder alle fett gedruckten URLs aus:

<iframe src=" https://kartevonmorgen.org/map.html#/?entry=4c20979fe0754e74875afa4308d73ce7&zoom=9.00" width="400px" height="300px"> 
<a href="https://www.kartevonmorgen.org/#/?entry= 4c20979fe0754e74875afa4308d73ce7 " target="_blank">zur karte</a></iframe> 

Außer “entry” kann man bei dem Map-Widget auch “center”, “zoom” und/oder “search” angeben.

Hier ein Beispiel, wie beides nebeneinander aussieht.

Nur-Ansicht-Widget

Dieses Widget wurde für die Regionaltreffen des Pioneers of Change Online-Summit entwickelt und blendet die Such- und Filtermöglichkeiten aus. D.h. der Nutzer kann nur über die Karte navigieren, aber keine Filter verändern und keine neuen Einträge hinzufügen. (Einträge können jedoch bearbeitet werden)

<div style="text-align: center;"> 
<iframe style="display: inline-block; border: none" src=" https://kartevonmorgen.org/mapAndEntryList.html#/?center=49.815,8.833&zoom=7.00 " width="100%" height="580">
<a href="https://kartevonmorgen.org/" target="_blank">zur karte</a></iframe></div> <p style="text-align: right;">
<a href="https://kartevonmorgen.org">Große Karte öffnen</a></p>

Link zum Eintragsformular

Es gibt auch einen direkten Link zum Eintragsformular, ggf. sogar vorausgefüll: Zum Beispiel, um ein Event der PioneersofChange an zu legen: https://kartevonmorgen.org/#/?center=51.317,9.954&zoom=6.00&categories=event&search=%23poc-regionaltreffen&addentry=event

Die Kartenansicht im Hintergrund kann auch vordefiniert werden:

Karte mit Begriffsauswahl

Wie funktioniert es, dass über einer Karte Stichworte vorausgewählt sind, und ohne, dass sich die ganze Seite neu läd, das Karten-Iframe die Ansicht wechselt?

Man kann per Link den Inhalt eines IFrames ändern, in dem man im Link-Tag als target den IFrame-Namen angibt. Im Glossar sieht ein Link für ein Tag dann z.B. so aus: <a href=”https://kartevonmorgen.org/#/?search=%23solawi” target=”if_kvm”>solawi</a>

Füge mal folgenden Code in ein HTML-Dokument ein, z.B. in WordPress, und du wirst die Funktionsweise verstehen:

<a href="https://kartevonmorgen.org/#/?search=%23solawi" target="if_kvm">Solidarische Landwirtschaft: #solawi</a> | 
<a href="https://kartevonmorgen.org/#/?search=%23gwö" target="if_kvm">Gemeinwohlökonomie: #gwö</a> | 
<a href="https://kartevonmorgen.org/#/?center=52.517,13.389&zoom=12.00" target="if_kvm">Berlin</a> | 
<a href="https://kartevonmorgen.org/#/?center=53.555,9.946&zoom=11.00&search=%23refill" target="if_kvm">refill Hamburg </a> | 
<a href="https://kartevonmorgen.org/#/?center=51.069,9.163&zoom=6.00&categories=event" target="if_kvm">Wandeltermine Deutschlandweit </a>  | 
<a href="https://kartevonmorgen.org/#/?center=51.069,9.163&zoom=6.00&categories=event,initiative,company" target="if_kvm">Alles </a>

<p>

<iframe id="if_kvm" name="if_kvm" style="display: inline-block; border: none;" src="https://kartevonmorgen.org/#/" width="100%" height="600"> </iframe>

Daraus entsteht folgende Ansicht:

Solidarische Landwirtschaft: #solawi | Gemeinwohlökonomie: #gwö | Berlin | refill Hamburg | Wandeltermine Deutschlandweit | Alles

Enhanced search function

The search text field is parsed according to the following rules:

Download der Karten-Einträge

Für das erstellen von Papierkarten aber auch für viele andere Anlässe braucht es die Daten der Karte in anderen Formaten und Anwendungen, wozu wir einen csv-Download anbieten.

Aus Spamschutzgründen und um unseren Server nicht zu überlasten, kann dies aber nicht jeder, sondern nur Regional- bzw. Themenpilot*innen. Wenn du also Daten runter laden willst, bspw. um dein kartiertes Netzwerk per Mail an zu schreiben, stelle sicher, dass du als Regional- oder Themenpilot*in registriert bist.

Schreib uns einfach kurz eine Mail-Nachricht, wenn du die Daten brauchst, mit folgenden Angaben:

  • wer du bist,
  • welche Region (Screenshot der Karte)
  • und/oder welchen Hashtag du brauchst.

Wir schicken dir dann den Download Link zurück. Den Download können wir für dich eingrenzen:

  • Regional: bbox= … (4 Eckkoordinaten des gewünschten Bereichs. Beispielsweise ist bbox=46.377,5.537,54.92,17.27 der Bereich des D-A-CH-Raums)
  • Thematisch: &tags= … (Komma-separierte List von Tags) bei Events geht nur ein Stichwort: &tag= …
  • Nach Begriffen: &text= … (Beliebiges Wort, was vorkommen muss)
  • Termine ab: &start_min=1579564800 (Unixtimestamp den du hier berechnen kannst: https://www.epochconverter.com/)

Das Format der csv-Datei ist Unicode (UTF-8) und Komma-getrennt. Wir empfehlen die Verwendung von Libre Office, da Excel die Zeilenumbrüche in den Kurzbeschreibungen meist missinterpretiert.

Admins können alle Felder exportieren (created_by + email + phone), jetzt auch ohne Token.

Rolecreated_byemail/phone
Guest/User (No export at all!)
Scout (without token)✔️
Scout (with token)✔️ (owned events)
❌ (other events)
✔️
Admin✔️✔️

❌ = exported field is empty

Iframe-Code zum Glossar

Auch das GlossardesWandels.de, sozusagen die inhaltliche Navigation der Karte von morgen und kann auch auf anderen Seiten eingebettet werden.

Gerne kannst du einen Begriff für das Glossar vorschlangen. Hier steht wie das geht.

Gesamtes Glossar mit allen Begriffen

<iframe name="iframe_gdw" 
style="display: block; width: 100%; height: 1000px; border: none;"
src="https://glossardeswandels.de/gdw_terms.php#?mapheight=600">
<a href="https://glossardeswandels.de/" 
target="_blank">zum Glossar</a></iframe>

Ein Beispiel wie dieses Iframe aussieht findet sich hier: http://blog.vonmorgen.org/glossar-des-wandels/

Ein Begriff des Glossars

Hier ein Beispiel eines einzelnen Begriffs: https://blog.vonmorgen.org/gemeinschaftsgarten/ Der HTML code dazu ist dieser

<iframe name="iframe_gdw" 
style="display: block; width: 100%; height: 900px; border: none;" 
src="https://glossardeswandels.de/gdw_frame.php#/?term=Gemeinwohl-%C3%96konomie&mapheight=400">
</iframe> 
<a href="https://glossardeswandels.de/#/?term=Gemeinwohl-%C3%96konomie"
 target="_blank"p>zum Glossar</ap>
</iframep>

Glossar-Iframe mit Begriffsauwahl

Wie ein Karten-Iframe über die Target=… Angabe aus einem Link außerhalb des Iframes verändert werden kann, so kann auch ein Link außerhalb des Glossar-Iframes den gewählten begriff ändern.

Wichtig ist das target=”iframe_gdw”. Und da sich in der URL nur der Hash-String ändert, wird das Frame nicht neu geladen.

Iframe zu wechange

Mit der wechange-Mitgliederkarte von Gruppen und Projekten kannst du auf (d)einer Webseite eine Karte einbinden, die die Profile der Mitglieder zeigt. Hier ein Beispiel: https://blog.vonmorgen.org/kontakt/

Der Code dazu ist folgender

<figure><iframe style="display: inline-block; border: none" 
src="https://wechange.de/map/embed/?filter_group=2071&limit=1000&limits=1000&projects=false" 
allowfullscreen="" width="100%" height="380"></iframe></figure>

Der Abschnitt group=2071 ist der entscheidende Teil und definiert von welcher Gruppe die öffentlichen Mitglieder angezeigt werden. Diese Nummer bekommst du nur als Mitglied der Gruppe bzw. des Projektes auf wechange.

  1. Besuche dein Projekt/Gruppe auf wechange.de und logge dich ein. Nutze dafür Firefox
  2. Drücke die Taste F12, während deine wechange-Seite geöffnet ist. Damit öffnen sich die “Entwicklertools”. Öffne dort den Reiter “Netzwerkanalyse” und wähle auf der Filterleiste (eine Menüleiste darunter) “XHR”, dann ist es am übersichtlichsten.
  3. Klicke nun auf das Logo deiner Gruppe oben Links oder wähle im Dropdown statt dem “Dashboard” die “Mitglieder” aus.
  4. Beim Laden hat nun das Netzwerkanlayse-Tool (Schritt 2) abgespeichert, welche Daten geladen wurden. Unter den XHR-Records findest du nun eine Zeile die so beginnt: https://wechange.de/map/search/3552/?q=&people=true&events=false&projects=false&groups=false&ideas=true&limit=20&ne_lat=61.48925232640904&ne_lon=46.94941406249999&sw_lat=39.149259612751734&sw_lon=-26.3830078125 Die fett gedruckte vierstellige Nummer hinter “search/XXXX” ist genau was du brauchst und oben in den Code hinter “group=XXXX” einfügst.