2017-12-31 41 views
0

リーフレットとJavascriptを初めて使用していて、参考にして地図を作成しようとしています。リーフレットを使用するときにデフォルトの青の代わりにすばらしいアイコンを適用しようとしています。私はすべての種類の変形を試してみました。私のために働いていないようです。フォントリーフレットのgeoJsonファイルを含むすばらしいアイコン

すべてのアイコンが地図の青色のデフォルト色で表示されるので、ここで少し失われています。 また、次のステップでは、GeoJSONファイルのプロパティを使用してGeoJSONファイルの値に基づいてアイコンスタイルを変更する方法を探しています。たとえば、"koncept = "Large"は素晴らしいアイコンを使用します。koncept = "Small"はすばらしいアイコンです。など

<!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> 

このフィドルを見てくださいいくつかの変更が、まだありませんAwesomeMarkers、マップ上の唯一の青デフォルト...

var dip = new L.geoJson.ajax(["dip.geojson"],{icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#ffffff'})}).addTo(map); 
+1

ようこそ!エラーメッセージの出所を完全に理解できるように[MCVE](https://stackoverflow.com/help/mcve)を提供してください。理想的には、ライブコードスニペット、Plunker、JSFiddle、JSBinなどを使用してライブサンプルを提供してください。 – ghybs

答えて

1

をした:http://jsfiddle.net/VPzu4/92/を。 外部ソースを確認してください:リーフレットだけでなく、bootstrap.min.cssfont-awesome.cssが含まれています。私はあなたのコードがそれを逃していると思う - あなたのスクリプトにそれらを含める。

また、コードにいくつかのエラーがあります。これは間違っています:

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

マップの項目は頭の部分にあってはなりません。体に頭から地図のdivの宣言を移動します。

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

また、ご含ま源(ライブラリやjsons)このページでアクセス可能であることを確認してください。ブラウザ検査ツールで確認してください。多分あなたはコンソールでいくつかのエラーを見るかもしれませんか?


EDITあなたのコメントを参照のうえ

- 作りあなたのコードとデータのjsfiddleは「非常識」ではない、それはあなたのために便利です。私はあなたのデータをすべて追加するとは言えません - あなたに手伝ってくれる人のために簡単に再現できるように簡単な例を作ってください..

とにかく、 geojsonを処理すると、となります。

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

あなたはjQueryを使ってにGeoJSONつかむことができます - 外部ソースを気に - と機能に応じて、条件を追加しますので、他の模範データ(ここではUSGSの地震毎日のデータを)に取り組んであなたはfontawesomeとJSONのスタイルを設定する方法を見ることができます規模データ:

$.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

はい、ありがとうございます。私はフィドルを見て、それが動作していたことを確認するためにスクリプトから1行を選びました。私はそれについてコメントします... //テストすれば.....しかし、私はgeojsonポイントファイルで動作する必要があります。それを機能させることができず、どのようにしてそれを行うことができるかの例は見つけられていません。私の最後の試行は: 'var dip = L.geoJson.ajax([" dip。onEachFeature:popUp})。addTo(map(); mapColor: 'red'、iconColor: '#ffffff')) ); ' – Soreno

+0

@Soreno、dip.geojsonファイルへのリンクを共有してもらえますか?jsfiddleに実際のスクリプトを置くことはできますか? – d324223

+0

dip.geojsonファイルに固有のものではありません。 geojsonファイルを読み込んで、素晴らしいフォントライブラリをアクティブにしようとしていると思います。リーフレットを使ってマップ上にデフォルトの青いボールペンマーカーがあります。問題はありません。このフォントにgeojsonファイルを使用しています。この特定のファイルには何千ものポイントがあり、jsfiddleの例でindex.htmlに配列を書くことには興味がありません。それは非常に難しいでしょう:) – Soreno

関連する問題