2017-12-31 115 views
0

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.

etc
<!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: '&copy; <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); 
+1

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

Antwort

1

Bitte nehmen Sie sich einen Blick auf dieser Geige: http://jsfiddle.net/VPzu4/92/. Überprüfen Sie externe Quellen: Es gibt nicht nur leaflet.awesome-Marker, sondern auch bootstrap.min.css und font-awesome.css enthalten. Ich denke, dein Code vermisst das - schließe sie in dein Skript ein.

Auch Sie haben einige Fehler in Ihrem Code. Das ist falsch:

<head> 
    //... 
<div id="mapid"></div> // map div in head section 
    //... 
</head> 
<body> 
</div> // left div closing tag 
</body> 

Ihr Karten-Div sollte nicht im Kopfbereich sein. Bewegen Sie die Karte div Erklärung von Kopf bis Körper:

<body> 
<div id="mapid"></div> 
</body> 

Also, stellen Sie sicher, dass Ihre Quellen enthalten (Bibliotheken und jsons) sind von dieser Seite aus erreichbar. Überprüfen Sie es im Browser-Inspektions-Tool. Vielleicht siehst du noch mehr Fehler in der Konsole?


EDIT

auf Ihren Kommentar verweis - jsfiddle Ihres Codes und Daten machen, ist nicht ‚verrückt‘, ist es für Sie hilfreich ist. Ich sage nicht, dass Sie alle Ihre Daten addieren - machen Sie einfach ein kurzes Beispiel davon, um leicht reproduzierbar für andere zu sein, die Ihnen helfen möchten ..

Wie auch immer, nun sehe ich, dass Sie kein Problem mit der Schriftart genial haben aber mit handling geojson. So arbeiten an anderen Exemplar Daten (hier USGS Erdbeben Tageswerte) Sie können sehen, wie json mit fontawesome stylen:

http://jsfiddle.net/VPzu4/1559/

Sie mit jquery greifen GeoJSON können - die externen Quellen dagegen - und Bedingungen hinzufügen, auf Funktion abhängig Betragsdaten:

$.getJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(json) { 

    geoLayer = L.geoJson(json, { 
    onEachFeature: function(feature, layer) { 
     var popupText = "<b>Magnitude:</b> " + feature.properties.mag + 
     "<br><b>Location:</b> " + feature.properties.place + 
     "<br><a href='" + feature.properties.url + "'>More info</a>"; 
     layer.bindPopup(popupText, { 
     closeButton: true, 
     offset: L.point(0, -20) 
     }); 
     layer.on('click', function() { 
     layer.openPopup(); 
     }); 
    }, 

    pointToLayer: function(feature, latlng) { 
    var mag = feature.properties.mag; 
    var marker; 
    if (mag >= 4.0) { 
     marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'cog', prefix: 'glyphicon',markerColor: 'cadetblue'}) }); 
     } else if (mag >= 3.0) { 
     marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'glyphicon',markerColor: 'black'}) }); 
     } else if (mag >= 2.0) { 
     marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'spinner', markerColor: 'red', prefix: 'fa', spin:true}) }); 
     } else { 
     marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon',markerColor: 'orange'}) }); 
     } 
    return marker; 
    } 
    }).addTo(map); 
}); 
+0

Ja, das div-Dankeschön wurde korrigiert. Ich habe mir die Geige angeschaut und eine Zeile aus dem Skript ausgewählt, um sicherzugehen, dass sie funktioniert und ich kommentiere sie ... // test wenn ... Aber ich brauche es für eine Geojson-Punktdatei, ich Ich habe es nicht geschafft, und ich habe kein Beispiel dafür, wie es gemacht werden kann. Mein letzter Versuch ist: 'var dip = L.geoJson.ajax ([" dip.geojson "], {icon: L.AwesomeMarkers.icon ({icon: 'coffee', Präfix: 'fa', markerColor: 'rot', iconColor: '#ffffff'}), onEachFeature: popUp}). addTo (map); ' – Soreno

+0

@Soreno, können Sie bitte einen Link zu Ihrer dip.geojson Datei dann? Kannst du dein tatsächliches Skript in jsfiddle? – d324223

+0

es ist nicht spezifisch für dip.geojson Datei Ich habe viele verschiedene Geojson-Dateien so jede Punktdatei ausprobiert Im Geojson-Format würde das. Ich denke, es hat mit dem Laden von Geojson-Datei zu tun und versuchen, die ehrfürchtige Schriftbibliothek zu aktivieren. Ich habe die Standard-blauen ballon Marker auf der Karte mit dem leaflet.ajax. Problem ist, habe ich keine gesehen Beispiel diese Schriftart mit einer Geojson-Datei verwenden.Diese bestimmte Datei hat tausend Punkte und ich bin nicht daran interessiert, ein Array in der index.html mit dem Beispiel von jsfiddle zu schreiben, das wäre verrückt :) – Soreno