Author Topic: WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?  (Read 1621 times)

Offline FranzLuwein

  • Posts: 14
WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?
« on: June 02, 2016, 01:27:53 AM »
Hallo alle,

ich möchte mit dem CKEditor eine Leaflet-Karte auf meiner WebsiteBaker-Site zum Laufen bringen.
Geht das?
Was ist zu tun?
Gibt es eine Seite wo diese Kombination bereits läuft?

Gruß

Franz Luwein

Offline hgs

  • Betatester
  • **
  • Posts: 1110
    • EFG MG
LG Harald

"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

Offline jacobi22

  • Posts: 5843
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?
« Reply #2 on: June 02, 2016, 12:59:37 PM »
in der Theorie geht das schon zusammen.
Zu meiner Überraschung gibt es beim CKEditor ein Plugin -> http://ckeditor.com/addon/leaflet
Dieses Plugin hat weitere Abhängigkeiten zu anderen Plugins: widget und lineutils
Das widget-Plugin ist schon Bestandteil des CKeditor-Paketes, die beiden anderen brauchst du aber

Herunterladen, in den Ordner modules / ckeditor / ckeditor / plugins entpacken

Anschließend müssen beide Plugins in die Liste der Extra-Plugins eingetragen werden und leaflet auch den benutzten Toolbars zugefügt werden
für ersteres gehe in die Datei include.php oder, falls in Benutzung, in die Datei wb_ckconfig.js.
Suche dort nach $ckeditor->config['extraPlugins'] (include.php)  bzw config.extraPlugins  (wb_ckconfig.js) und füge beide nötigen Einträge dieser Liste hinzu (,leaflet,lineutils)

Nun die Toolbar, diese ist in der Datei modules / ckeditor / wb_config / wb_ckconfig.js oder in gleichnamiger Datei in deinem Template-Ordner definiert.
Suche dort zuerst nach diesem Eintrag, in dem ggf eine andere als die hier verwendete Toolbar stehen könnte
Code: [Select]
    // The default toolbar. Default: WB_Default
  config.toolbar = 'WB_Default';
Nun trage in der verwendeten Toolbar an gewünschter Stelle das Plugin ein - z.b. so
Quote
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','Syntaxhighlight','-','About', 'Backup', 'Youtube' '-', 'leaflet' ] }

Ob du damit glücklich wirst, steht auf einem anderem Blatt.
Zum Bearbeiten und Entfernen eine bereits vorhandenen Karte mußt du links oben auf das Verschiebe-Icon ((cross hair))doppelt klicken.
Vermeide unbedingt Klicks auf die Karte, da diese eine neue Location und/oder Zoomstufe einstellen würden.

Wozu ich die LineUtilities benötige, weiß ich noch nicht. Vielleicht kannst du kurz umreißen, was mit Leaflet möglich ist, dann könnt ich mir einen Reim drauf machen.



P.S.: die Idee, hier freie Karten zu nutzen, gefällt mir. Ich habe versucht, das Modul mapBaker auf die "neue" Google Api 3 umzustellen, allerdings sind die Einstellmöglichkeit en dort derart komplex, das ein User sie kaum in einem WebsiteBaker-Modul benutzen wird, sondern eher im GoogleMap Wizard

Zur Info, falls nicht bekannt:
Das MapBaker-Modul bietet die Möglichkeit, auf definierbaren Karten eine unbestimmte Anzahl von Markern zu setzen mit Beschreibungstext per Editor. Man kann aber auch komplette Routen anzeigen (kml/kmz-Dateien)
http://addon.WebsiteBaker.org/pages/en/browse-add-ons.php?filter=MapBaker&id=0AD4A2A1
Wer nicht will, findet Gründe, wer will, findet Wege.

Offline FranzLuwein

  • Posts: 14
Re: WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?
« Reply #3 on: June 05, 2016, 01:10:07 PM »
Danke jacobi22 !
Du hast dir sehr viel Arbeit gemacht. Jetzt liegt es am mir das aus exakt so umzusetzen.

Den MapBaker habe ich inzwischen installiert - geht ja wie (fast) immer bei WB ganz fix.
KML/KMZ Dateien bekomme ich auch schon angezeigt. Den MapBaker werde ich auf jeden Fall erst einmal verwenden, bis das Andere läuft.
Da ich gerne die Karten von OpenTopoMap.org verwenden möchte, sehe ich nur wenige Alternativen zu Leaflet o.ä.

Ich melde mich, wenn das Leaflet-Plugin zusammen mit den CKEditor auf Websitebaber läuft.
Meine Befürchtung das Ganze über den Wrapper abwickeln zu müssen, sind erste einmal verflogen.

Gruß

Franz Luwein

Offline jacobi22

  • Posts: 5843
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?
« Reply #4 on: June 05, 2016, 01:44:05 PM »
Ich denke, ich werde das MapBaker so umbauen, das es analog zum Leaflet-Plugin alle Karten anderer Anbieter nutzen kann. Diese Lösung erscheint mir wesentlich eleganter als der Versuch, den Google API-3-Wizard nachzubauen. Die Google Maps nutze ich eigentlich nur in Projekten, wo sie bereits vorhanden sind. In den eigenen bin ich da eher "Fan" von OpenStreetMap, wobei sich die einzelnen Karten am Ende nur unwesentlich unterscheiden. Ich trau halt dem Google-Riesen nicht so. Nach aktuellem Wissensstand liegt die Grenze zur kommerziellen Nutzung bei 20.000 Zugriffen pro Karte und Tag, was für meine Projekte wohl kaum erfüllt wird, da es sich überwiegend um kleinere Webseiten handelt, die mal ihre Adresse zeigen wollen. Sollte Google das aber mal weiter herunter setzen, z.b. auf 1000 oder weniger, gehen gutlaufende Seiten schon ins Risiko.

Quote
Ich melde mich, wenn das Leaflet-Plugin zusammen mit den CKEditor auf Websitebaber läuft.
die gezeigte Integrierung war bei mir in 5min erledigt, ich weiß aber nicht, ob es das ist, was du erwartest. Da müßte ich mich erst in Leaflet einarbeiten
Wer nicht will, findet Gründe, wer will, findet Wege.

Offline FranzLuwein

  • Posts: 14
Re: WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?
« Reply #5 on: June 06, 2016, 11:30:26 AM »
Hallo jacobi22,

das Leaflet-Plugin läuft im CKEditor. An einer Stelle bin ich ins Straucheln gekommen.
Du hattest geschrieben:
"Nun trage in der verwendeten Toolbar an gewünschter Stelle das Plugin ein - z.b. so"

Ich habe nach DER Stelle gesucht und die entsprechende Änderung vorgenommen und nichts geschieht!
Nach weiterem eifrigen Suchen habe ich festgestellt, dass es drei Arten "Menü" im CKEditor gibt. Nachdem ich auch dort die Ergänzung vorgenommen hatte, war der Button von Leaflet da.

Zu meiner großen Enttäuschung, war das "Angebot" an der Stelle "BaseFile Layer" zwar recht umfangreich, aber mein Favorit OpenTopoMap war nicht dabei. Nachdem ich (trail&error) aus der Original "leaflet-providers.js" den Abschnitt mit den Providern komplett in die CKEditor "leaflet-providers.js" kopiert hatte und dann in der "leaflet.js" aus dem dialogs-Ordner die Ergänzung "['OpenTopoMap']," vorgenommen hatte, konnte ich meinen Kartenwunsch erfüllen. So weit OK.
 
Leaflet hat mit seinen vielen Plugins insgesamt gesehen nichts von "schmächtg". Im CKEditor können davon nur Breadcrumbs genutzt werden. Vielleicht liegt es aber auch nur an mir und ich finde die Einschalter nicht um z.B. neben dem baselayer weitere overlayLayers mit Markern, polygonen, GPX-Tracks usw. zu erzeugen. minZoom:, maxzoom:  maxBounds:, control.layers, LayerGroup, control.elevation usw. wären schon tolle Features um, wie in meinem Fall, einfache auf Landkarten basierende Ortsinformationen zu visualisieren.
Sachen, die außerhalb des Bakers gut funktionieren und die ich eigentlich hinter dem Begriff "Leaflet-Plugin für den CKEditor" zumindest zu einem größeren Teil vermutet hatte. Da hätte ich mich wohl besser vorher schlau machen sollen.
Hier ist für Programmierer eine weites Feld.
Ich wünsche mir so etwas wie das Leaflet-Plugin im CKEditor als eigenständiges Modul für den Baker das im Prinzip nach der Auswahl von Optionen (Welche Basiskarten/Overlays sind im Angebot, was wird benötigt (Höhenprofil, Marker, Popups, Texte, Bilder, Medien, ....)) je nach Möglichkeit die Datenbasis direkt abfragt, drag&drop anbietet oder einen anderen Weg eröffnet die notwendigen Infos einzuspeisen.

Wenn ich mir die Liste der Plugins für Leaflet anschaue - ein weites Feld!
Das so etwas am Anfang nicht annähernd Komplett sein kann, ist klar. Im Prinzip ginge es darum, nach und nach die Leaflet-Plugins auf einfache Art im Baker zugänglich zu machen. Dass es geht, zeigt das CKEditor-Plugin ja auf. Dein/euer MapBaker macht das ja auch schon (ohne Editor).

Von Programmieren habe ich weniger als NULL Ahnung und mit sechzig fange ich auch nicht mehr damit an! Testen wäre OK.
Schluss mit Zukunftsmusik.
Erst einmal mache ich dual weiter. Was mit dem MapBaker geht, wird dort erledigt auch wenn es mich schon stört an dieser Stelle mit google zusammenarbeiten zu müssen wo es Alternativen gibt. Den Rest mache ich außerhalb vom Baker und nutze den Wrapper. So der Plan.

Übrigens: Nachdem das mit der leaflet-providers.js so gut geklappt hat, werde ich mal sehen, welche von den 35 Kartenlieferanten übrig bleiben. Wenn man sich nicht um korrekten Zugangsdaten kümmern muss, eine runde Sache.

Einen schönen Sonntag wünscht
mit freundlichem Gruß

Franz Luwein

Offline FranzLuwein

  • Posts: 14
Re: WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?
« Reply #6 on: June 06, 2016, 11:32:52 AM »
Sorry,
Text gestern geschrieben und heute nur noch reinkopiert.

Einen schönen Montag wünsche ich allen.

Franz

Offline jacobi22

  • Posts: 5843
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?
« Reply #7 on: June 06, 2016, 12:04:23 PM »
Danke für die ausführliche Antwort. So etwas hab ich mir nach dem Einlesen in Leaflet schon gedacht. Bei der Sache gibt es zwei, drei kleine Haken

1. es ist ein Plugin, das von der CKeditor-Group vertrieben wird, soll heißen: bei einem nächsten Upgrade, das jeder in Minutenschnelle selbst durchführen kann oder mit dem nächsten WB-Upgrade kommt, werden deine individuellen Anpassungen überschrieben   :roll:

2. solche Wizards, die am Ende die Karte bearbeiten, sind recht komplexe Javascripts. Beim Google API3 Wizard habe ich bei 100 möglichen Einstellungen aufgehört zu zählen. Da kann man dann schon den Sinn hinterfragen, denn am Ende gibt es einen Code, den man irgendwo einfügt, um ihn darzustellen. Nach ca 25 Einstellungen habe ich in der MapBaker-Variante aufgehört, weil es eigentlich unmöglich ist, das als User zu überblicken, wenn man nur ein Backend mit Eingabefeldern und Schiebereglern hat und für das Ergebnis wieder hochscrollen muß.
Und ändert sich etwas an der API, ist man mit einem Modul schon nicht mehr auf dem neuestem Stand.
Ich denke, das Ganze als CKeditor-Plugin zu machen, würde den Rahmen des Paketes sprengen.

3. es gibt zig Varianten solcher Karteneditoren, diese kann man unmöglich alle abdecken.

Quote
Den Rest mache ich außerhalb vom Baker und nutze den Wrapper. So der Plan

warum den Wrapper? Warum nicht eine Code- bzw Code²-Section?
Wer nicht will, findet Gründe, wer will, findet Wege.

Offline FranzLuwein

  • Posts: 14
Re: WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?
« Reply #8 on: June 06, 2016, 05:08:46 PM »
Hallo jacobi 22,

dass das keine simlpe Angelegenheit ist, habe ich als "nurNutzer" schon erkannt. Immer wenn ich im Netz auf neue Seiten mit Karten stoße, gibt es wieder etwas faszinierend Neues.
Ich weiß, dass ich nicht alles haben kann und auch nicht alles brauche. Auf einiges möchte ich sogar prinzipiell verzichten, z.b. so weit es geht auf google-Daten/Technologie.
 
Sicherlich gibt es viele Wege nach Rom.
Es mit dem Wrapper zu versuchen ist ein Weg. Bisher habe ich weder code noch code² verwendet.
Jetzt wo du es schreibst: Warum eigentlich?
Ich wollte so vorgehen:
- der Ordnung halber auf einer subdomain leaflet mit allen benötigten plugins installieren
- in der gleichen Struktur am Heim-Rechner die mehr oder weniger statischen Seiten erstellen,
   (da kann ich testen und machen was ich will) und wenn es läuft mit FTP hochladen
- im wrapper auf diese Seiten verweisen
Was sagt der Fachmann dazu?
OK, ich werde so nach Rom kommen aber ...

Gruß

Franz Luwein

Offline jacobi22

  • Posts: 5843
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: WebsiteBaker, Leaflet, CKEditor. Geht das zusammen?
« Reply #9 on: June 06, 2016, 05:46:06 PM »
Ich weiß zu wenig über leaflet, um einschätzen zu können, was jetzt die beste Methode ist. Hab mich da einige Stunden belesen und nach deren HowTo's auch ein paar Karten erstellt, allerdings nur einfache Sachen, halt Beginner-Tutorials  :oops: :oops:
Das Ergebnis war irgendwann ein HTML-Code und die Notwendigkeit, CSS und JS vorher zu laden, damit es schick ausschaut und funktioniert.

Die Frage wegen dem Wrapper bezog sich nur auf mögliche Scrollbalken, die erscheinen, wenn der Inhalt auch nur 1 Pixel größer ist als die definierte Wrappergröße. Im Grunde spielt es nicht wirklich eine Rolle, es ist vielmehr eine Frage der persönlichen Arbeitsweise. Die jeweilige Karte per wrapper einzuholen, kann für dich z.b. auch zeitsparender sein, z.b. wenn sich eine Karte ändert. (Datei hochladen, Link beibehalten, fertig)
Vor- oder Nachteile gibt es da m.E. nicht
Wer nicht will, findet Gründe, wer will, findet Wege.