TurfJS MapBoxマップにポイントを追加

Turf JSの新機能でMapBox APIを使用して統合を検討しています。デフォルトのMapBox.Outdoorsマップを使用して、例のTurfJSドキュメントhttp://turfjs.org/docs/#pointのいくつかに従っていますが、マップ上にポイントをプロットすることはできません。任意の提案を大いに感謝し、エラーはFeatureLayer.setGeoJSONに関連してコードの私のリスト行にあるようだが、私はそれを把握することはできません。最後の行をアクティブなままにしておくと、マップはロードされません。コメントを外してもマップはロードされますが、ピンは表示されません。TurfJS MapBoxマップにポイントを追加

<BODY> 
<div id='map'></div> 
<script> 
L.mapbox.accessToken = 'pk.eyJ1IjoibWFya2d1ayIsImEiOiJjaXNsd2VhMG8wMDdrMzNybmticDJhdnZsIn0.KXcvejg6QplSsAlj8aimjA'; 

var point = turf.point([35.463453, -97.514914], { 
"title": "OKC Thunder", 
"description": "100 W Reno Ave, Oklahoma City", 
"marker-color": "#6BC65F", 
"marker-size": "large", 
"marker-symbol": "basketball" 
}); 

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19); 
.featureLayer.setGeoJSON(point); // If I comment this line out the map loads with no pin. If I leave this line active the map doesn't load at all? 
</SCRIPT> 
</BODY>

出典

2016-09-05 MarkGuk

私は問題があなたが最初に変換せずに地図にgeojsonを追加しようとしていると思います。 geojsonをリーフレットが使用できる形式に変換する必要があります。ここでは、あなたのために動作する必要があります例です。また、プロパティを表示するポイントマーカーにポップアップをバインドします。スタイル部分は、静的に（タイトルを除くすべてのプロパティのように）、機能コレクション内のすべてのポイントに適用されるように、または各フィーチャのプロパティを動的に使用するように（タイトルと同様に）実行できます。

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19); 

var featureCollection = {"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"title": "OKC Thunder"}, "geometry": {"type": "Point", "coordinates": [35.463453, -97.514914]}}]}; 

L.geoJson(featureCollection, { 
    onEachFeature: function (feature, layer) { 
     layer.bindPopup(""+feature.properties+"<br />"); 
    }, 
    style: function (feature) { 
     style = { 
      "title": feature.properties.title, 
      "description": "100 W Reno Ave, Oklahoma City", 
      "marker-color": "#6BC65F", 
      "marker-size": "large", 
      "marker-symbol": "basketball" 
     }; 
     return style 
    } 
}).addTo(map)

出典

2016-11-23 14:40:44

マップボックスで使用できるように設定されたマーカー機能を使用する必要があります。したがって、フィーチャレイヤの作成をスキップして、mapbox-marker関数を使用するだけで済みます。ここに文書化されて：あなたはちょうどturf.point経由にGeoJSONオブジェクトの作成をスキップする可能性が提供されているコードについて https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/

： https://www.mapbox.com/mapbox.js/api/v3.0.1/l-marker/

ここで簡単なマーカーを作成する方法についての説明もあります

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19); 
L.marker([-97.514914, 35.463453], { 
    icon: L.mapbox.marker.icon({ 
    "title": "OKC Thunder", 
    "description": "100 W Reno Ave, Oklahoma City", 
    "marker-color": "#6BC65F", 
    "marker-size": "large", 
    "marker-symbol": "basketball" 
    }) 
}).addTo(map);

それとも、turf.pointとにGeoJSON使用したい場合は、あなたがそれをそのようにも行うことができます：

var point = turf.point([-97.514914, 35.463453], { 
    "title": "OKC Thunder", 
    "description": "100 W Reno Ave, Oklahoma City", 
    "marker-color": "#6BC65F", 
    "marker-size": "large", 
    "marker-symbol": "basketball" 
}); 

var coords = point.geometry.coordinates; 

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19); 
    L.marker(coords, { 
    icon: L.mapbox.marker.icon(point.properties) 
    }).addTo(map);

012を、ちょうどこれを使用また

あなたはあなたのポイントはから[35.463453、-97.514914]座標に反転する必要があることを確認して[-97.514914、35.463453]「地理座標の投影座標、経度、緯度」

あるにGeoJSON仕様に合わせて

http://geojson.org/geojson-spec.html#id2

出典

2016-12-01 13:58:13

TurfJS MapBoxマップにポイントを追加

答えて

関連する問題