LeafletMaps (für Landkarten a la Google Maps)

webbird · 18.07.2017 16:18:06

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 16:18:56)

florian, byteworker, petero, thanks, colinax, midland

webbird · 18.07.2017 17:14:30

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.

webbird · 18.07.2017 18:07:30

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

florian · 18.07.2017 18:43:26

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

webbird · 18.07.2017 18:50:05

Schade...

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

webbird · 19.07.2017 12:18:58

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 12:19:26)

florian · 19.07.2017 12:37:43

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

webbird · 19.07.2017 13:24:41

* 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?

florian · 19.07.2017 13:31:22

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 17:21:42)

webbird · 19.07.2017 15:33:06

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

webbird · 19.07.2017 15:54:17

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

florian · 19.07.2017 17:20:45

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 17:21:26)

florian · 19.07.2017 17:28:04

webbird wrote:

Vermutlich willst Du das hier auch haben...
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 18:18:37)

webbird · 19.07.2017 18:23:26

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 18:25:43)

webbird · 19.07.2017 18:26:46

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

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

webbird · 20.07.2017 14:15:10

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).

byteworker

byteworker · 23.07.2017 07:35:08

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.

webbird · 24.07.2017 09:24:55

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!

webbird · 24.07.2017 09:29:57

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

florian

byteworker · 24.07.2017 11:06:12

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.

florian

webbird · 24.07.2017 11:10:03

Prima, danke!

byteworker · 24.07.2017 13:24:01

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

webbird · 24.07.2017 16:37:51

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 16:38:28)

byteworker

webbird · 24.07.2017 16:45:11

Wenn man die entsprechenden Offsets nicht richtig angibt...

attachment.php?item=957&download=1

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

webbird · 24.07.2017 16:55:04

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?

WBCE CMS Forum

#1 18.07.2017 16:18:06

LeafletMaps (für Landkarten a la Google Maps)

#2 18.07.2017 17:14:30

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

#3 18.07.2017 18:07:30

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

#4 18.07.2017 18:43:26

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

#5 18.07.2017 18:50:05

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

#6 19.07.2017 12:18:58

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

#7 19.07.2017 12:37:43

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

#8 19.07.2017 13:24:41

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

#9 19.07.2017 13:31:22

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

#10 19.07.2017 15:33:06

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

#11 19.07.2017 15:54:17

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

#12 19.07.2017 17:20:45

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

#13 19.07.2017 17:28:04

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

#14 19.07.2017 18:23:26

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

#15 19.07.2017 18:26:46

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

#16 20.07.2017 14:15:10

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

#17 23.07.2017 07:35:08

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

#18 24.07.2017 09:24:55

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

#19 24.07.2017 09:29:57

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

#20 24.07.2017 11:06:12

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

#21 24.07.2017 11:10:03

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

#22 24.07.2017 13:24:01

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

#23 24.07.2017 16:37:51

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

#24 24.07.2017 16:45:11

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

#25 24.07.2017 16:55:04

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

Board footer