Kennt sich jemand mit Javascript aus?

[Bender_74]

Für die Fahnen Challenge powered by Michelin möchten wir unsere Karte der Fahnenorte upgraden.
Das bisher von uns benutzte Wordpress-Plugin "OSM" kommt leider bei der Datenmenge schon länger an seine Grenzen.

Die Anforderungen an das neue Programm sind:
- Import von (mehreren) KML Dateien zur Datenübergabe an das Programm
- Clustering
- Anzeige/ Auswahl von unterschiedlichen Kategorien
- Verwendung von OSM Karten

aktuell sind zwei Programme in der näheren Betrachtung: Das Wordpressplugin "Maps Marker Pro" (kostenpflichtig) und Leaflet, eine open source javascript library.

Derzeit favorisieren wir Leaflet, benötigen aber jemanden mit Javascriptkentnnissen, der uns eine Karte einrichten kann und bestenfalls noch erklärt, wie wir das zukünftig selber können

[gmbo]

Ich habe im letzten Jahr mal etwas experementiert um besser mit Leaflet klarzukommen.
Wie ich so etwas in ein WP-Plugin bekomme weiß ich noch nicht. aber man könnte aber in eine normale Webseite kann man das gut einbinden.
Das Beispiel hat jetzt zwar keine KML- Dateien und ein völlig anderes Thema. Es hat aber auch ein einfach aufgebautes POI- Dateiformat, aber ich sollte das hinbekommen, das auch aus einer KML-Datei oder csv-Datei speisen zu können.
Es sollte ja auch nur die Möglichkeiten aufzeigen und die sind mit Leaflet groß.
Leider ist es wohl schwierig auf unsere Zwecke abgestimmtes Verhalten in ein WP-Plugin zu bekommen, und ich habebisher noch nicht herausgefunden wie man das als WP-Plugin umsetzen kann.

[Bender_74]

Hallo Gisbert,
ohne mich detaillierter damit auszukennen, denke ich, dass wir leaflet auch ohne Wordpress-Plugin über den Quellcode in eine Seite eingebaut bekommen.
Das Beispiel der Stadt Würselen gibt da Hoffnung:
https://wuerselen.de/leaflet-maps-marker-test/

Die derzeit offene Frage ist, wie man die leaflet Karte so einrichtet, dass sie das anzeigt, was wir wünschen.

[gmbo]

Ab Montag sind die Enkelkinder wieder bei ihren Eltern, dann mache ich mal ein Beispiel fertig mit den Fahnen.

[Bender_74]

Das wäre cool

[gmbo]

Die derzeit offene Frage ist, wie man die leaflet Karte so einrichtet, dass sie das anzeigt, was wir wünschen.

Was brauchen wir denn genau?

Ich versuche mal einen ersten Vorschlag, Wünsche sind natürlich willkommen.
Ich gehe erst einmal davon aus eine Karte die die Welt anzeigen kann und die POIs geclustert dargestellt werden.
dann gehe ich davon aus, dass es gut wäre ein Menu zu haben bei dem die Jahrgänge ein und ausgeblendetwerden können.
Beim POI-Dateiformat bin ich mirnicht sicher ob CSV oder KML besser wäre, CSV wäre mit Ecxel bearbeitbar, hängt davon ab was für die Bearbeiter besser wäre
Symbole (Icons) sollten unterschiedlich möglich sein. also Beispielsweise andersfarbiger Rand für die Jahrgänge und getrenntes Clustering.

[Bender_74]

Guten Morgen Gisbert,

die einzelnen Jahrgänge wären natürlich toll, das würde uns 6 Karten auf der Hauptseite der FC sparen und diese auch im Hinblick auf die kommenden Jahre wesentlich übersichtlicher machen.
Aber der Hauptgrund ist, dass wir eine Kategorisierung der Fahnenfotos vornehmen wollen, um diese besser nutzbar zu machen. Dafür wäre ein Auswahlmenü dann viel wichtiger.

Kategorien in der Art:
Denkmäler/Statuen
Motorradparkplätze
Pausenplätze
Kirchen u religiöse Stätten
Pässe und Berge

etc.

[gmbo]

Deshalb ja meine Frage. Das ginge natürlich auch.
Wie gesagt in dem Beispiel für Frankenthal habe ich das mal dargestellt.
Die einfachste Art wäre über die Icons und dadurch könnten sie in verschiedene Variablen einzusortieren, dann hätten sie eigene Cluster.
Ich mache mal Anfang der Woche ein Beispiel.

gibt eine POI-Datei in der ich die Kategorie der POIs drin habe. Dann könnte ich davon etwas nutzen.
oder Beispielhaft je eine Datei pro POI-Kategorie.

[Bender_74]

Ohne dem FC - Team da vorgreifen zu wollen und die Grenzen des machbaren zu kennen denke ich, dass es am besten ist, in die Exceltabelle aus der die KML erstellt wird ein zusätzliches Feld einzubauen für die Kategorie. Dann hat man weiterhin eine Datei pro Jahr. Wenn Leaflet mehrere KML ein lesen kann wie das OSM-Plugin, sollte das gut funktionieren.

[gmbo]

Habe jetzt mal ein erstes Beispiel hochgeladen.
Oben rechts ist ein Menue bei dem verschiedene Hintergrundkarten und Layer gewählt werden können.
Das Format der im Moment benutzten POIs im JS-Variablenformat ist warscheinlich einfacher zu erzeugen, da es fast dem csv-Format entspricht.

Code: Alles auswählen

var points = [
// Zeilen hinter // sind nur Kommentare
//  Fahnen Challenge 2023 powered by MICHELIN
//  jede Zeile beinhaltet [lat,lon,HTML Beschreibung,Icon]wie beim CSV-Format nur Unterschied jede Zeile in [] eckigen Klammern
[54.46030,11.00891,'<h3>Jimmy Hendrix Gedenkstein</h3><a href="https://www.kilometerfresser.eu/forum/viewtopic.php?p=28232#p28232"> <img src="https://www.kilometerfresser.eu/forum/download/file.php?id=12150" width="200" alt="Fahnenbild"></a><br>',"Icon1"],
// folgt ein Komma wird eine nächste Zeile erwartet.
[51.21586,9.38859,'<h3>Mittelpunkt Deutschlands</h3><br>liegt in Besse<br><a href="https://www.kilometerfresser.eu/forum/viewtopic.php?f=26&t=3639#p39626"> <img src="https://www.kilometerfresser.eu/forum/download/file.php?id=20724" width="200" alt="Fahnenbild"></a><br>',"Icon1"]
// der letzte POI bekommt kei Komma und es folgt das Variablen Ende
];

Wichtiger wäre das was anders angezeigt werden soll. In der POI-Datei würde zum Beispiel [lat,lon,name,Titel,Info, BeitragsID,BildID,Kategorie,Icon] reichen und man setzt das HTML des Pushups in der Karte mit JS.
Dafür wäre natürlich erst mal gut zu wissen was gewünscht wird, dann kann man schauen was wo am einfachsten möglich ist.


Excel nutze ich seit über 10 Jahren nicht mehr habe daher auch keine Version mehr mit der ich testen könnte. Mir ging der Automatismus auf den Geist mit dem das Progamm immer wieder versucht Zahlen eigenständig zu formatieren auch wenn man eigentlich eine genaue Vorgabegemacht hatte. Das macht aber das Libre-Office Calc auch mit dem ich mir zumindest schon mal eine xmls-Datei anschauen kann.


Dass das OSM-Tool die KML Datei ließt ist mir fast schleierhaft, denn diese enthält ein völlig anderes Zeichenformat, warscheinlich UTF-16, als UTF-8 wie für kml angegeben wird.

c22_kml.png (216.77 KiB) 3032 mal betrachtet

Ich habe mal die beiden bildlichdargestellt um die Unerschiede zu zeigen.
Leider werden auch hier die überflüssigen Bytes durch viele Editoren nicht angezeigt, da die das Textformat automatisch umstellen, das läßt sich aber nur mit riesen Librarypaketen automatisieren.