Die Dokumentation auf der Seite bei leaflet bezieht sich aber immer nur darauf, wenn ich den Marker direkt einbinde und nicht über den Weg des Import mit omnivore gehe.
Wie müsste ich den Code denn einfügen und wo? Und wenn ich das “customLayer” durch die Layerbenennung ersetze, die ich umfärben möchte, funktioniert es auch nicht.
Mir bereitet es Schwierigkeiten zu verstehen wie ich die in der leaflet Dokumentation angegebenen Codezeilen einsetze, wenn ich meine Marker doch per omnivore importiere.
Wie wär’s, wenn du eh omnivore nutzt, dass du dann auch die “mapbox.js” mit einbindest? Dann kannst du ohne weiteres “L.mapbox.marker.icon” nutzen. Wenn du das nicht willst, dann wird es in der Tat nicht so einfach, das normale Leaflet Marker blau in etwas anderes zu verwandeln, da ist der Aufwand definitiv höher.
Übrigens, wie du die Marker importierst ist egal, zum Schluß und letztendlich handelt es sich immer im L.icon, siehe Dokumentation
Ob man Mapbox.js verwenden soll, ist vermutlich Ansichtssache. Es gibt viele schöne Beispiele und den Marker-Stil ändern geht wohl einfacher. Andererseits ist es halt eine spezielle Erweiterung zu Leaflet und macht die Sache noch komplizierter, weil noch eine weitere Bibliothek dazu kommt, mit der sich auch weniger auskennen. Ich hätte zum Beispiel keine Lust, Fragen dazu zu beantworten. Vielleicht kann man sich aber dann ja an den Mapbox Support wenden.
Um mit Standard-Leaflet die Marker Farbe zu ändern oder ein inneres Symbol zu setzen, gibt es diese Optionen:
Die .css Dateien (vom Plugin + fontawesome) habe ich jeweils im Head Bereich eingebaut.
.js (awesome-markers) im Body Bereich.
Ich möchte gerne die fontawesome Icons nutzen. Die setze ich in einem anderen Bereich auch schon ein.
Ich habe mal einen Testmarker erstellt (siehe Abschnitt “Marker erstellen”).
Dieser wird erzeugt, in rot dargestellt. Jedoch wird das gewünschte Icon nicht eingeblendet.
Dieses Icon sollte erscheinen:
Es erscheint aber das Rechteck, welches man desöfteren sieht wenn eine Grafikdatei nicht vorhanden ist. Ich tippe darauf, dass ich die .css Datei von fontawesome nicht korrekt eingebaut habe. Jedoch schlägt momentan jeder Versuch fehl.
Nun möchte ich natürlich den Markern, die ich mit omnivore erstelle die entsprechende Farbe + Icon von fontawesome geben. Das schlägt leider auch fehl. Egal ob ich das "{icon: redMarker} hinter die .kml Datei packe oder vor dem .addTo(map) Ausdruck. Es wird nicht umgesetzt.
Wild geraten: evtl. leaflet.awesome-markers.css nach fontawesome einbinden?
In solchen Fällen finde ich es hilfreich, erst mal in einem minimalen Beispiel in einer separaten Datei zu testen. Z.B. nur HTML + Fontawesome, dann nur einfacher AwesomeMarkers Marker.
leaflet-omnivore liefert ja schon Marker, über die in
kmls[i].eachLayer(function(layer) {
iteriert wird. D.h. statt einen zusätzlichen neuen Marker anzulegen (“L.marker(…”) , vielleicht das einfach Icon austauschen mit Marker.setIcon (nicht getestet)?
war nur zum testen ob das Fontawesome Icon geladen wird.
Marker sollen nur über omnivore gesetzt werden. Diese Icons der gesetzten Marker möchte ich ändern.
Habe ich dich richtig verstanden? Habe den Code von dir eingesetzt, jedoch wird jetzt der . in der nächste Zeile bemängelt.
Ich weiß nicht genau, was ich ersetzen muss
Gibt es eine Eigenschaft in den KML Dateien, nach der man abfragen könnte, welches Icon gesetzt werden soll?
Das wäre eine Möglichkeit. Aber nicht über die style function, sondern mit der “pointToLayer” function Using GeoJSON with Leaflet - Abschnitt “pointToLayer”
Oder:
b) wie oben erwähnt in der Schleife über alle Layer nach Eigenschaft in den Daten (layer.feature.properties.?) unterscheiden
c) einen zweiten “.on(‘ready’, setMarkerIconX)” Handler je Layer, der jeweils ein anderes Marker Icon setzt
In der KML Datei gibt es eine Eigenschaft die die Farbe definieren könnte.
Allerdings sind diese KML primär für die App maps.me gestaltet, hier habe ich max. 7 vorgegebene Farben zur Auswahl.
Die gleichen Daten sollen nun noch als Webanwendung zur Verfügung stehen. Hier möchte ich mir schon den Luxus gönnen mehr Farben einzusetzen und auch verschiedene Icons.
Erst mal sind da Syntax-Fehler: es fehlen die schließenden Klammern der pointToLayer Funktion und zu L.geoJson. Und die Variable redMarker ist doppelt definiert.
Ein vernünftiger Editor könnte helfen, zumindest die groben Syntaxfehler gleich anzumeckern und die einander entsprechenden Klammern anzuzeigen, z.B. https://code.visualstudio.com/
Eine Vertiefung der JavaScript Grundlagen wäre vermutlich auch hilfreich, um den Code besser zu verstehen. Hast du da schon entsprechende Dokus/Einführungen zu JavaScript?
Ich nutze den Notepad++
Werde mir mal den verlinkten Editor ansehen.
Nein, ich hangel mich von Plugin Doku zu Plugin Doku. Und zum Teil halt bei der Leaflet Doku.
Würde der Code denn ansonsten funktionieren, also mangelt es “nur” an den Klammern oder sind dort sonst noch grobe Fehler?
Wäre interessant für mich einen lauffähigen Code zu sehen der halt das macht, was ich möchte. Daran könnte ich sicher ne Menge nachvollziehen.
Man kann den icon in omnivore ändern ohne zusätliche Bibliotheken. http://www.roeltgen.com/foren/firechheForum64423-bunt.html
Das ist eine nachträgliche Änderung nach dem Laden der Dateien.
Den direkten Weg bekomme ich nicht hin, da ich nicht auf L.geoJSON() zugreifen kann.
Nein, das ist noch nicht ganz das, was wir wollen. Ich klinke mich aber für heute aus.
Es hilft schon, Code von anderen anzuschauen. Ich glaube halt, dass der Lerneffekt viel größer ist, wenn man sich selbst durchbeißt. Zudem gebe ich für meinen Teil hier gerne Hilfe zur Selbsthilfe, fertige Lösungen baue ich aber lieber für meine eigenen Projekte.
Habe ich soweit hinbekommen mit einer Ausnahme:
Die Funktion “PopUpWennAlleGeladen” habe ich mit einem zusätzlichem .on(‘ready’)… nochmal unten drunter eingefügt.
Ist das so korrekt oder gibt es eine elegantere Lösung?
Ich schau mal, ob ich zu der Custom Layer Variante mit pointToLayer aus #39 noch eine Schritt-für-Schritt Anleitung schreiben kann, zum besseren Verständnis.
Da gehören auch die schließenden Klammern dazu, die bei dir in #39 fehlen, also die letzten beiden Zeilen von oben:
}
});
Zu jeder öffnenden Klammer muss es auch eine entsprechende schließende Klammer geben, in umgekehrter Reihenfolge. Den Inhalt rückt man ein, so dass man die zusammengehörenden Zeilen mit der öffnenden (hinten) und schließenden geschweiften Klammer (vorne) leicht zuordnen kann.
Bei dieser oft üblichen kompakten Schreibweise oben werden die Parameter (mit Komma getrennte Übergabe-Werte in runden Klammern) einer Funktion an Ort und Stelle definiert. Auch über mehrere Zeilen, wenn eine Funktion oder ein Objekt übergeben wird.
Die Funktions-Parameter kann man aber auch erst Variablen zuweisen und dann die Variablen übergeben, das macht es etwas leserlicher. Hier das obige kompakte Beispiel aufgetrennt:
var redStyle = function(feature) {
return { color: '#f00' };
};
var options = {
style: redStyle
};
var customLayer = L.geoJson(null, options);
Jeweils in einer Zeile:
var redStyle = function(feature) { return { color: '#f00' }; };
var options = { style: redStyle };
var customLayer = L.geoJson(null, options);
Der “options” Parameter ist ein Objekt und kommt bei Leaflet öfter vor, hier für L.geoJSON.
Übung ;): Obige drei Zeilen wieder in das Ausgangsformat unter 1. bringen: Variablen-Referenzen durch Wert ersetzen, Zeilenumbruch nach öffnender und vor schließender geschweifter Klammer.
2. customLayer Parameter hinzufügen
var pumpenstationen = omnivore.kml('/desktop/kml/pumpenstationen.kml', null, customLayer)
.addTo(map).on('ready', popupBindenWennAlleGeladen);
Bei deinem Code in #39 fehlt der “null” Parameter in der Mitte. Der ist aber wichtig, damit die Position und Reihenfolge der Parameter stimmt. Optionale Parameter können nur am Ende weggelassen werden, dazwischen muss dann eben “null” übergeben werden.
Der momentane Code sieht jetzt so aus und sollte ohne Fehler im Editor oder der Chrome Console laufen:
Geändert hat sich noch nichts, da die “style” Option nur für Vektoren (Linien, Polygone und Punkte als CircleMarker) gilt, nicht aber für Standard-Marker mit Icon.
Die “geojsonMarkerOptions” fügen wir nur kurz zum Testen ebenfalls hinzu, damit wir diesen Schritt auch gleich auführen können - die Pumpenstationen werden jetzt als Kreise dargestellt.
4. Awesome Markers statt CircleMarker
Diesen Schritt überlasse ich jetzt dir.
Hinweise:
pointToLayer Doku zeigt die Standard-Implementierung
