リーフレットomnivore +クラスタリングマーカー+フィルタリングマーカークラスタグループ

Question

チュートリアルでデータを検索するために、Leafetのマップボックスとオムニボアプラグインでマップを作成しようとしています。私の場合、omnivoreプラグインからこのコードをどのように統合するのか分かりません。私はgeojsonのURL $.getJSONのデータを使用して、リーフレットのMarkerClusterでマーカーをクラスタリングします。

ありがとうございます。

よろしくお願いいたします。

サンドリーヌ

EDIT

私はMapbox JSツールでマーカーのクラスタグループをフィルタリングしてみてください。

非常にうまくいきますが、この機能をプロジェクトに挿入したいと思います。しかし、私は他の機能をどのように作成するのか分かりません：omnivoreプラグイン、データの検索、ポップアップの表示、マーカークラスタグループ。私たちを手伝ってくれますか ？

マイJSフィドル "フィルタリングマーカーのクラスタグループ"：https://jsfiddle.net/sduermael78/rgoxpxwq/4/

マイプロジェクト：https://jsfiddle.net/sduermael78/1uuubmwb/42/

Answer 1

あなたが現在お使いのmapbox口座から直接の両方のjQuery $.getJSONを通して、あなたのデータをロードします。

私の理解が正しい場合は、leaflet-omnivoreプラグインを使用してこれらのメソッドを置き換えますか？

var geojsonLayer = omnivore.geojson("filePath", null, L.mapbox.featureLayer()); 
geojsonLayer.addTo(map); 

をあなたが（あなたのケースでLeaflet.markerclusterプラグインを使用して）あなたのマーカーをクラスタ化する際に今ではもう少し複雑になる：あなたが直接使用できるよう

直接交換は、非常に単純です。しかし、両方とも非同期AJAX要求を実行し、コールバックで変換する必要があるため、$.getJSONと似ています。リーフレット、雑食動物で

、あなたは.on("ready", callback)の構文を使用します。

var geojsonLayer = omnivore.geojson("filePath", null, L.mapbox.featureLayer()) 
    .on("ready", function() { 
    var markers = L.markerClusterGroup(); 
    markers.addLayer(geojsonLayer); 
    markers.addTo(mymap); 
    }); 

更新JSFiddle：https://jsfiddle.net/1uuubmwb/39/

---

EDIT

OKを私はあなたが「したいあなたの部分を逃しましたあなたが指しているマップボックスからチュートリアルのように "データを検索"します。

マーカをクラスタ化したいのでもっと複雑なので、マップボックスフィーチャレイヤを直接持たず、マーカクラスタグループを持つことができます。

回避策は、あなたのgeojsonLayer mapboxフィーチャレイヤ上のフィルタ条件を変更するには、そのクラスタグループの毎回の内容を置き換えるために、次のようになります。

// this will "hide" markers that do not match the filter. 
geojsonLayer.setFilter(showCode); 

// replace the content of marker cluster group. 
markers.clearLayers(); 
markers.addLayer(geojsonLayer); 

その後、あなたのポップアップのために、あなたはそれを作成し、それを手動でバインドする必要があり、mapbox機能層は、（もしそうなら、それは自動的にポップアップ/「ツールチップ」コンテンツを埋めるためにその情報を使用しています）title属性を使用するようににGeoJSONデータを必要とするよう：

function attachPopups() { 
    // Create popups. 
    geojsonLayer.eachLayer(function (layer) { 
     var props = layer.feature.properties; 

     layer.bindPopup(
     "<b>Code unité&nbsp;:</b> " + props.CODE_UNITE + "<br />" + 
     "<b>Adresse web&nbsp;:</b> <a href='" + props.ADRESSE_WEB + "' target='_blank'>" + props.ADRESSE_WEB + "</a>" 
    ); 
    }); 
} 

残念ながら、それがのように見えますはそのポップアップを削除するので、setFilterの後にこのattachPopups()関数を呼び出す必要があります。

デモ：https://jsfiddle.net/1uuubmwb/40/

Answer 2

は、あなたの答えをいただき、ありがとうございます。実際、urlを使ってgeojsonからデータを検索するには、leaflet-omnivoreプラグインを使用したいと思います。 チュートリアルはhttps://www.mapbox.com/mapbox.js/example/v1.0.0/filtering/ "ユーザークエリに基づいてマーカーをフィルタするための高速検索としてsetFilterを使用する"

これらの新しいケースでは、geojsonからのポップアップをURLで表示するにはどうすればよいですか？ layer.bindPopup(feature.properties.CODE);

この機能をすべて使用してマップを作成できます（マーカー、クラスタリングマーカーなどを検索してもよいですか？）。