Karte von Morgen einbetten

Es gibt ungefähr eine Million Möglichkeiten, die KvM in WordPress einzubinden. Yipieh!

Dazu musst du folgende Schritte durchführen:

Überlegen, was die Einbettung anzeigen soll: Die ganze Karte, eine bestimmte Region, ein einzelnes Hashtag oder einen einzelnen Betrieb?
Nachlesen, wie der Code aussehen soll.
Einen neuen HTML-Block einfügen.
Den HTML-Code dort einfügen.

Der HTML-Code beinhaltet drei Links: Die Quelle der Einbettung (iframe-source), den Alternativlink (falls die Einbettung nicht angezeigt werden kann), und den externen "Große Karte anzeigen"-Link.

Diese drei Links können nach Belieben angepasst werden, sollten aber immer gemeinsam geändert werden.

Vollständige Karte mit Suchfunktion.
Karte von Trier mit Suchfunktion
Karte von Trier mit voreingestelltem Suchbegriff
Karte von Trier, Suchfunktion versteckt
Einbettung verkleinern
Nur einen einzelnen Eintrag anzeigen
Nur Ansicht, keine Filter, keine Eintragungen möglich
Direkt zum Eintragen eines neuen Markers!
Filteransicht mit vorgegebenen Filtermöglichkeiten!

Möglichkeit 1: Vollständige Karte mit Suchfunktion.

Hier zeigen wir Deutschland in geringer Zoomstufe mit allen Hashtags. Aus Performancegründen werden immer nur 35 Einträge gleichzeitig angezeigt.

<div style="text-align: center;"> 
<iframe style="display: inline-block; border: none" src=" 
https://kartevonmorgen.org/#/?center=50.992,7.005&zoom=6.32 
" 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" 
target="_blank" rel="noreferrer noopener" aria-label=" (öffnet in neuem Tab)">
Große Karte öffnen</a></p>

Große Karte öffnen

Möglichkeit 2: Karte von Trier mit Suchfunktion

Hier haben wir den Fokus auf Trier gelegt. Dazu ändern wir das Attribut "center=" auf die Koordinaten von Trier und erhöhen das Attribut "zoom=" auf 13.

Die Koordinaten können wir einfach herausfinden, indem wir die Karte von morgen aufrufen und nach Trier suchen.

<div style="text-align: center;"> 
<iframe style="display: inline-block; border: none" src=" 
https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00 
" width="100%" height="580"> 
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00" target="_blank">zur karte</a>
</iframe></div> <p style="text-align: right;">
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00" 
target="_blank" rel="noreferrer noopener" aria-label=" (öffnet in neuem Tab)">
Große Karte öffnen</a></p>

Große Karte öffnen

Möglichkeit 3: Karte von Trier mit voreingestelltem Suchbegriff

Zusätzlich zu den Attributen "center" und "zoom" fügen wir noch das Attribut "search" hinzu, um z.B. nur alle Einträge für den Suchbegriff "Mode" anzuzeigen:

<div style="text-align: center;"> 
<iframe style="display: inline-block; border: none" src=" 
https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&search=mode 
" width="100%" height="580"> 
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&search=mode" target="_blank">zur karte</a>
</iframe></div> <p style="text-align: right;">
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&search=mode" 
target="_blank" rel="noreferrer noopener" aria-label=" (öffnet in neuem Tab)">
Große Karte öffnen</a></p>

Große Karte öffnen

Wenn wir hier nach einem bestimmten Hashtag suchen wollen, lautet der Code: "search=%23mode"

<div style="text-align: center;"> 
<iframe style="display: inline-block; border: none" src=" 
https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&search=%23mode 
" width="100%" height="580"> 
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&search=%23mode" target="_blank">zur karte</a>
</iframe></div> <p style="text-align: right;">
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&search=%23mode" 
target="_blank" rel="noreferrer noopener" aria-label=" (öffnet in neuem Tab)">
Große Karte öffnen</a></p>

Große Karte öffnen

Möglichkeit 4: Karte von Trier, Suchfunktion versteckt

Wenn wir nur die Karte anzeigen wollen und die Suchfunktion erst mal nicht benötigen, können wir sie mit dem Attribut "left=hide" verstecken:

<div style="text-align: center;"> 
<iframe style="display: inline-block; border: none" src=" 
https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&left=hide
" width="100%" height="580"> 
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&left=hide" target="_blank">zur karte</a>
</iframe></div> <p style="text-align: right;">
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&left=hide" 
target="_blank" rel="noreferrer noopener" aria-label=" (öffnet in neuem Tab)">
Große Karte öffnen</a></p>

Große Karte öffnen

Möglichkeit 5: Einbettung verkleinern

Manchmal wollen wir eine etwas kleinere Karte haben, weil wir vielleicht nur etwas grob zeigen wollen, aber der eigentliche Inhalt ein anderer ist.

Indem wir das style-Attribut des iframes ändern, können wir die Größe relativ frei bestimmen. Hier zeigen wir das vorherige Beispiel auf 70% verkleinert:

<div style="text-align: center;"> 
<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; border: none" src=" 
https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&left=hide
" width="100%" height="580"> 
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&left=hide" target="_blank">zur karte</a>
</iframe></div> <p style="text-align: right;">
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&left=hide" 
target="_blank" rel="noreferrer noopener" aria-label=" (öffnet in neuem Tab)">
Große Karte öffnen</a></p>

Große Karte öffnen

Möglichkeit 6: Nur einen einzelnen Eintrag anzeigen

Wenn wir einzelne Unternehmen vorstellen wollen, weil wir ganz toll finden, fügen wir einfach deren Link dort ein. Den finden wir, indem wir auf der Karte von morgen nach dem Eintrag suchen und dann den Ergebnislink kopieren:

<div style="text-align: center;"> 
<iframe style="display: inline-block; border: none" src=" 
https://kartevonmorgen.org/#/?entry=94f8ae9f4fd34c2ea79c65335070ddf9&zoom=15.00 
" width="100%" height="580"> 
<a href="https://kartevonmorgen.org/#/?entry=94f8ae9f4fd34c2ea79c65335070ddf9&zoom=15.00" target="_blank">zur karte</a>
</iframe></div> <p style="text-align: right;">
<a href="https://kartevonmorgen.org/#/?entry=94f8ae9f4fd34c2ea79c65335070ddf9&zoom=15.00" 
target="_blank" rel="noreferrer noopener" aria-label=" (öffnet in neuem Tab)">
Große Karte öffnen</a></p>

Große Karte öffnen

Möglichkeit 7: Nur Ansicht, keine Filter, keine Eintragungen möglich

Wenn wir nur die Einträge anzeigen wollen, ohne dass Filter, Suchen oder Einträge durch die Nutzer möglich sein sollen, können wir folgenden Code nutzen:

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

Große Karte öffnen

Möglichkeit 8: Direkt zum Eintragen eines neuen Markers!

Wenn wir wollen, dass die Nutzer direkt zum Eintragsformular geleitet werden, können wir folgenden Link nutzen:

https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&addentry=company

Da ist also einfach nur das Attribut "addentry=" hinzugefügt. Der Wert kann sein "company", "initiative" oder "event" - für Unternehmen, Initiativen und Events!

Den könnten wir dann z.B. so nutzen:

Trag hier dein Unternehmen ein!

Möglichkeit 9: Filteransicht mit vorgegebenen Filtermöglichkeiten!

Ah, die Königsdisziplin, um den Nutzer an die Hand zu nehmen! Nur das Klicken können wir ihm nicht mehr abnehmen.

Jetzt wird's ausnahmsweise kompliziert(er):

Wir definieren zuerst die Filter, die als einfache Links über dem iframe angezeigt werden. Die Links haben die gewünschten Suchparameter zum Ziel, z.B. Suchbegriffe, Hashtags, Orte, etc.:

<div style="text-align: center;"> 
<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=49.760,6.644&zoom=13.00" target="if_kvm">Trier</a> | 
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&search=%23refill" target="if_kvm">refill Trier</a> | 
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.00&categories=event" target="if_kvm">Wandeltermine Trier</a>  | 
<a href="https://kartevonmorgen.org/#/?center=49.760,6.644&zoom=13.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>

Groovy.

Nachhaltig fairanstalten in Trier und Region.

Leitfaden PDF