Versuche gerade dieses Plugin zu installieren:
https://github.com/lvoogdt/Leaflet.awesome-markers
-
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:
https://fontawesome.com/icons/ambulance?style=solid
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.
<!DOCTYPE html>
<html>
<head>
<title>Maps</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/desktop/leaflet/leaflet.css"/>
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
<link rel="stylesheet" href="plugins/awesome_markers/dist/leaflet.awesome-markers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div id="map" style="height: 900px"></div>
<script src="leaflet/leaflet.js"></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script src="plugins/awesome_markers/dist/leaflet.awesome-markers.js"></script>
<script>
var map = L.map('map').setView([X, Y], 12);
mapLink =
'<a href="https://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + mapLink,
maxZoom: 20,
}).addTo(map);
var popupBindenWennAlleGeladen = function() {
fertigGeladeneKMLs++; // eins ist geladen worden
if(fertigGeladeneKMLs == kmls.length) { // wenn jetzt alle geladen sind, dann popups binden
for (var i=0;i<kmls.length;i++) { // in Schleife alle durchgehen
kmls[i].eachLayer(function(layer) {
layer.bindPopup(layer.feature.properties.description);
});
}
} else { // noch nicht alle geladen => nix tun
}
}
// Marker erstellen
var redMarker = L.AwesomeMarkers.icon({
icon: 'fas fa-ambulance',
markerColor: 'red'
});
L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);
// KML Dateien einbinden
var pumpenstationen = omnivore.kml('/desktop/kml/pumpenstationen.kml', {icon: redMarker})
.addTo(map).on('ready', popupBindenWennAlleGeladen);
var ansaugstellen = omnivore.kml('/desktop/kml/ansaugstellen.kml')
.addTo(map).on('ready', popupBindenWennAlleGeladen);
var unterflurhydranten_vr = omnivore.kml('/desktop/kml/unterflurhydranten_vr.kml')
.addTo(map).on('ready', popupBindenWennAlleGeladen)
// Layer auffuehren, die PopUp Info bekommen sollen
var kmls = [pumpenstationen, ansaugstellen, unterflurhydranten_vr];
// zu anfang ist keins davon geladen
var fertigGeladeneKMLs = 0;
var overlays = {
"Pumpenstationen": pumpenstationen,
"Ansaugstellen": ansaugstellen,
"Unterflurhydranten": unterflurhydranten_vr
};
L.control.layers({}, overlays).addTo(map);
</script>
</body>
</html>