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.
<!DOCTYPE html>
<html>
<head>
<title>firechheForum64423-bunt</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
</head>
<body>
<div id="map" style="height: 300px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script>
var myRedIcon = L.icon({
iconUrl: 'kml/marker-red.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [0, -35]
});
var map = L.map('map').setView([51.864, 8.615], 13);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + mapLink,
maxZoom: 20,
}).addTo(map);
var example = omnivore.kml('kml/2012-02-10.kml')
.on('ready', function() {
//map.fitBounds(this.getBounds());
this.eachLayer(function(layer) {
layer.bindPopup(layer.feature.properties.name);
});
})
.addTo(map);
var gipfel = omnivore.csv('kml/gipfel-mapboxTerminus.csv')
.on('ready', function() {
map.fitBounds(this.getBounds());
this.eachLayer(function(layer) {
layer.bindPopup(layer.feature.properties.name + " (" + layer.feature.properties.country + ")");
if (layer instanceof L.Marker) {layer.setIcon(myRedIcon)};
});
})
.addTo(map);
var overlays = {
"Example": example,
"Gipfel": gipfel,
};
L.control.layers({}, overlays).addTo(map);
</script>
</body>
</html>
Ich hoffe, es hilft
Axel
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.
Zu JavaScript:
https://developer.mozilla.org/de/docs/Learn/JavaScript
(Links führen dort bei mir auf englische Seiten, ggf. oben umschalten)
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?
Vielen Dank für die Doku. Wird mir sicher weiterhelfen.
Denn die Möglichkeit Icons von Fontawesome einzubinden gefällt mir sehr.
var unterflurhydranten_vr = omnivore.kml('/desktop/kml/unterflurhydranten_vr.kml')
.addTo(map).on('ready', function() {
map.fitBounds(this.getBounds());
this.eachLayer(function(layer) {
if (layer instanceof L.Marker) {layer.setIcon(myRedIcon)};
});
})
.on('ready', popupBindenWennAlleGeladen);
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.
Das liegt an der alten Version 0.7 bei dir. Die Funktion hieß da noch L.geoJson() und wurde inzwischen umbenannt, weil die Klasse L.GeoJSON heißt.
Das wäre wirklich sehr nett 
Zur Veranschaulichung dieses Beispiel (#39) mal Schritt für Schritt:
1. Omnivore Custom Layers Style Beispiel kopieren (Kommentar entfernt)
var customLayer = L.geoJson(null, {
style: function(feature) {
return { color: '#f00' };
}
});
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:
var customLayer = L.geoJson(null, {
style: function(feature) {
return { color: '#f00' };
}
});
var pumpenstationen = omnivore.kml('/desktop/kml/pumpenstationen.kml', null, customLayer)
.addTo(map).on('ready', popupBindenWennAlleGeladen);
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.
3. pointToLayer statt style
Jetzt ersetzen wir die “style” mit der “pointToLayer” Option, anhand des Beispiels aus dem GeoJSON Tutorial:
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var customLayer = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
});
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: