Ich bin neu in Leaflet und Javascript, und versuche, eine Karte mit informativen Punkten zu machen. Probieren Sie statt des Standardblues die tollen Icons aus, wenn Sie die Broschüre verwenden. Ich habe alle Arten von Varianten aus Beispielen versucht, späteste unten. Es scheint überhaupt nicht für mich zu funktionieren.Font Awesome Icons mit GeoJson-Dateien in der Broschüre
Alle Icons erscheinen in der blauen Standardfarbe auf der Karte, also bin ich hier ein wenig verloren. Auch im nächsten Schritt möchte ich nach einer Möglichkeit suchen, Eigenschaften aus der GeoJSON-Datei zu verwenden, um den Symbolstil basierend auf den Werten in der GeoJSON-Datei zu ändern, indem ich tolle Symbole verwende. Zum Beispiel "koncept = "Large"
Verwenden Sie awesome Symbol dies, koncept = "Small"
Verwenden Sie tolle Symbol dies.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Leaflet test</title>
<link rel="stylesheet" type="text/css" href="css/leaflet.css">
<link rel="stylesheet" type="text/css" href="css/mapstyle.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.awesome-markers.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<script type="text/javascript" src="js/leaflet.ajax.min.js"></script>
<script type="text/javascript" src="js/leaflet.awesome-markers.min.js"></script>
<script src="js/spin.js"></script>
<script src="js/leaflet.spin.min.js"></script>
<script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script>
<script type="text/javascript" src="dip.geojson"></script>
<body>
<div id="mapid"></div>
<script type="text/javascript">
var map = L.map('mapid').setView([59.5, 14.5], 7);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
//test if awesome icon works... and it works...
L.marker([59.5,14.621303], {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'}) }).addTo(map);
//This part below does not work with awesome markers, it returns to the default blue markers
var dip = new L.geoJson.ajax(["dip.geojson"], {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'}) }).addTo(map);
</script>
</head>
</div>
</body>
</html>
Hat einige Änderungen aber noch keine AwesomeMarkers, nur den blauen Standard auf der Karte ...
var dip = new L.geoJson.ajax(["dip.geojson"],{icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'})}).addTo(map);
Willkommen bei SO! Stellen Sie sicher, dass Sie [MCVE] (https://stackoverflow.com/help/mcve) bereitstellen, damit die Personen vollständig verstehen können, woher die Fehlernachricht stammt. Stellen Sie idealerweise ein Live-Beispiel bereit, das ein Live-Code-Snippet, Plunker, JSFiddle, JSBin usw. verwendet. – ghybs