WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 18.07.2017 17:18:06

webbird
Administrator

LeafletMaps (für Landkarten a la Google Maps)

Zufälligerweise brauche ich gerade einen Ersatz für das lange schon nicht mehr richtig funktionierende MapBaker, und da auch Florian noch sowas sucht, habe ich vorgeschlagen, ein "Hybrid-Modul" zu schreiben, das sowohl unter BC als auch unter WBCE funktioniert. Basis soll Leaflet (http://leafletjs.com/) sein, die Handhabung soll sich ungefähr an MapBaker anlehnen.

Hier mal ein erster Screenshot. (Aus BC v1.2)

attachment.php?item=947&download=1

Last edited by webbird (18.07.2017 17:18:56)


Some people just need a high-five. In the face. With a chair.

Offline

Liked by:

florian, byteworker, petero, thanks, colinax, midland

#2 18.07.2017 18:14:30

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Funktionalität der Karte in obigem Screenshot:

Mit Hilfe des Suchen Felds kann man eine Adresse angeben; man erhält dann einen Liste der ersten 5 Suchergebnisse (oder "No result"). Klickt man einen der Einträge an, wird die Karte an die entsprechenden Koordinaten verschoben und ein Marker gesetzt, zudem erscheint ein Button "Übernehmen". Durch Anklicken des Buttons werden dann die Koordinaten in die Felder "Standard Latitude" bzw. "Standard Longitude" übernommen.


Some people just need a high-five. In the face. With a chair.

Offline

#3 18.07.2017 19:07:30

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Äh, mal ne 'doofe' Frage: Wie lädt man denn jetzt in WBCE korrekterweise zusätzliches JS und CSS? Gibt's da mittlerweile was?


Some people just need a high-five. In the face. With a chair.

Offline

#4 18.07.2017 19:43:26

florian
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Da gibts afaik noch nichts, das geht immer noch nur via frontend.js / frontend.css oder hart vedrahten.

Offline

#5 18.07.2017 19:50:05

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Schade...

Leider gibt es in WBCE noch ein paar seltsame Effekte yikes , sonst könntest Du schon eine erste Testversion haben.


Some people just need a high-five. In the face. With a chair.

Offline

#6 19.07.2017 13:18:58

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

So, hier mal was zum testen. Was gehen sollte:

* Installation (getestet mit WBCE 1.1.11 mit PHP 7)
* Hinzufügen einer Seite
* Ändern der Konfiguration
* Suchen einer Adresse inkl. Übernehmen der neuen Koordinaten
* Anzeige der Map im Frontend inkl. Marker auf Default Lat/Long

Last edited by webbird (19.07.2017 13:19:26)


Some people just need a high-five. In the face. With a chair.

Offline

#7 19.07.2017 13:37:43

florian
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Jep, genannte Punkte funktionieren.  thumb_up

Verbesserungsvorschläge:
- keine feste Vorgabe für Größe der Karte in Pixel, sondern Möglichkeit zur Eingabe von Prozentwerten für die Breite (responsive Design)

Beobachtungen:
- Karte lässt sich nicht maximal hochzoomen (nicht über 15 hinaus)
- beim Speichern wird im Backend die WBCE-Titelzeile wiedeholt (siehe Screenshot)
- beim Anklicken des Markers passiert (noch?) nichts

Offline

#8 19.07.2017 14:24:41

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

* Pixel: Ich mache in der nächsten Version per Default px, sofern man nix anderes angibt
* Zoom: Level sind von MapBaker übernommen, was ist denn das Maximum?
* Was soll beim Anklicken denn passieren?


Some people just need a high-five. In the face. With a chair.

Offline

#9 19.07.2017 14:31:22

florian
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Zoom max = 19
Beim Anklicken: Naja, das halt ein Bubble mit den Angaben aus Marker template aufgeht

Ähhhm... und das man mehr als einen Marker anlegen kann, hätte ich auch noch gern *duckundwegrenn*

Last edited by florian (19.07.2017 18:21:42)

Offline

#10 19.07.2017 16:33:06

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Achso, Marker gibt's noch keine, weder mit noch ohne Bubble.


Some people just need a high-five. In the face. With a chair.

Offline

#11 19.07.2017 16:54:17

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Vermutlich willst Du das hier auch haben...  cool
https://github.com/Leaflet/Leaflet.Icon.Glyph


Some people just need a high-five. In the face. With a chair.

Offline

#12 19.07.2017 18:20:45

florian
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Ich bitte um Entschuldigung, ich hatte beim Testen einen Denkfehler. Das Positionsdingi in der Mitte der Karte, das auch im Frontend angezeigt wird, habe ich bereits für einen Marker gehalten und war daher verwirrt.

Last edited by florian (19.07.2017 18:21:26)

Offline

#13 19.07.2017 18:28:04

florian
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

webbird wrote:

Vermutlich willst Du das hier auch haben...  cool
https://github.com/Leaflet/Leaflet.Icon.Glyph

Nein. Wegen mir nicht.
Aber mach einfach, was und wie Du für richtig hältst. Ich lass' mich da überraschen.

Last edited by florian (19.07.2017 19:18:37)

Offline

#14 19.07.2017 19:23:26

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Marker verwalten (wie man sieht noch nicht fertig).

attachment.php?item=951&download=1

Klickt man auf das Stift-Symbol, wird das Formular entsprechend gefüllt.

attachment.php?item=952&download=1

Last edited by webbird (19.07.2017 19:25:43)


Some people just need a high-five. In the face. With a chair.

Offline

#15 19.07.2017 19:26:46

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Achso, "Default" und "Mein Test" sind selbstverständlich die Kategorien. cool

Last edited by webbird (20.07.2017 15:12:11)


Some people just need a high-five. In the face. With a chair.

Offline

#16 20.07.2017 15:15:10

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Ich finde das mit den Glyphs eigentlich ganz nett. Standardmäßig bringt LeafletJS ja nur den einen (blauen) Knödel mit. Mit Hilfe des Plugins und Font Awesome kann man dann schon ziemlich viel machen.

Möchte vielleicht jemand Marker-Images machen? Ich "klaue" keine von Google (MapBaker verlinkt die nur, das möchte ich auch nicht).


Some people just need a high-five. In the face. With a chair.

Offline

Liked by:

byteworker

#17 23.07.2017 08:35:08

byteworker
Member

Re: LeafletMaps (für Landkarten a la Google Maps)

Schreib mir bitte was du da genau haben willst, Formate usw. Wenn es ein svg sein soll oder als spread. Ich habe ab Dienstag wieder Zeit.

Offline

#18 24.07.2017 10:24:55

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Das ist mir eigentlich egal, aber ich glaube, LeafletJS möchte getrennte PNGs.

http://leafletjs.com/examples/custom-icons/

Das "was" können wohl die zukünftigen Nutzer besser sagen. big_smile Ich hatte noch nie 'ne Map auf einer Seite, und wenn, würde mir wohl der "Standard-Knödel" genügen. cool

Danke für das Angebot!


Some people just need a high-five. In the face. With a chair.

Offline

#19 24.07.2017 10:29:57

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Die hier find ich schon ganz nett: https://www.iconfinder.com/iconsets/Ico … sIconsDemo


Some people just need a high-five. In the face. With a chair.

Offline

Liked by:

florian

#20 24.07.2017 12:06:12

byteworker
Member

Re: LeafletMaps (für Landkarten a la Google Maps)

Na dann, ich bau Dir eine Reihe "Standard Knödel" als PNG auf, Größe wie in der Demo so etwa, Schatten extra und alles als PNG. Wir sehen dann wie es rauskommt und was ich ändern kann/muss.

Offline

Liked by:

florian

#21 24.07.2017 12:10:03

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Prima, danke!


Some people just need a high-five. In the face. With a chair.

Offline

#22 24.07.2017 14:24:01

byteworker
Member

Re: LeafletMaps (für Landkarten a la Google Maps)

Schau mal an, ob das so geht. Wenn ja, kann ich noch feinere Marker machen.

Offline

#23 24.07.2017 17:37:51

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Ich seh schon, man muss ein paar Infos zu den Icons in der DB hinterlegen, z.B. die zu verwendende Größe... Rechts das Standard-Icon, links eins von byteworker.

attachment.php?item=956&download=1

Last edited by webbird (24.07.2017 17:38:28)


Some people just need a high-five. In the face. With a chair.

Offline

Liked by:

byteworker

#24 24.07.2017 17:45:11

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Wenn man die entsprechenden Offsets nicht richtig angibt...

attachment.php?item=957&download=1

Last edited by webbird (24.07.2017 17:45:36)


Some people just need a high-five. In the face. With a chair.

Offline

#25 24.07.2017 17:55:04

webbird
Administrator

Re: LeafletMaps (für Landkarten a la Google Maps)

Ich hab da mal ne Frage. Bei MapBaker ist es so, dass man die Marker in Kategorien einteilt. Nur die Kategorie hat dann ein Icon. (Zumindest verstehe ich es so, da MapBaker nur teilweise funktioniert, ist das teilweise etwas schwierig nachzuvollziehen.) Man könnte aber doch genauso gut jedem Marker sein Icon geben und bräuchte dann keine Kategorien, oder? Oder wie benutzt man die?


Some people just need a high-five. In the face. With a chair.

Offline

Board footer

Powered by FluxBB

up