leaflet > Search & popups プラグイン群 (2018.6.13)


Search & popups プラグインを調べました (2018.6.13)

## leaflet Search & popups プラグイン

[Plugins - Leaflet - a JavaScript library for interactive maps](https://leafletjs.com/plugins.html#search--popups)



## Search & popups プラグイン 一覧


|Plugin|説明|
|:-:|:-:|
|[leaflet-fusesearch](https://github.com/naomap/leaflet-fusesearch)|Lightweightファジー検索を使用してGeoJSONレイヤーのフィーチャーを検索するためのパネルを提供するコントロールFuse.js|
|[Leaflet Search](https://github.com/stefanocudini/leaflet-search)|LayerGroup / GeoJSONのカスタムプロパティによる検索マーカー/機能の検索のコントロール。 AJAX / JSONP、オートコンプリート、サードパーティサービスをサポート|
|[leaflet-custom-searchbox](https://github.com/8to5Developer/leaflet-custom-searchbox)|サイドパネルのスライダコントロールを含むGoogleマップスタイルの検索ボックス。|
|[Leaflet.Rrose](https://erictheise.com/rrose/)|エッジケースのためのリーフレットプラグイン。 マウスオーバー時にポップアップが必要な場合は、クリックしないでください。地図の端に近づくと方向を変えるためのポップアップヒントが必要です。|
|[Leaflet.utfgrid](https://github.com/danzel/Leaflet.utfgrid)|リーフレット用のutfgridインタラクションハンドラを非常に小さなフットプリントで提供します。|
|[Leaflet.RevealOSM](https://github.com/yohanboniface/Leaflet.RevealOSM)|非常にシンプルだが拡張可能なリーフレットプラグインで、地図上のOSM POIデータを表示する。|
|[Leaflet Underneath](https://github.com/perliedman/leaflet-underneath)|Mapbox Vector Tilesデータを使用して、ある場所の近くの興味深い機能を検索し、速度と帯域幅が制限されたタイルレイヤーに対話型機能を追加します。|
|[Leaflet.GeoJSONAutocomplete](https://github.com/utahemre/Leaflet.GeoJSONAutocomplete)|GeoJSONサービスを使用したリモート検索のリーフレットオートコンプリート。|
|[L.tagFilterButton](https://github.com/maydemirx/leaflet-tag-filter-button)|タグによるLeafLetマーカーのフィルタリング|
|[leaflet-google-places-autocomplete](https://github.com/Twista/leaflet-google-places-autocomplete)|マップにGoogleプレイス検索を追加する|
|[leaflet-responsive-popup](https://github.com/yafred/leaflet-responsive-popup)|ポップアップの内容を表示できるように地図を移動する必要性を排除します。|


## 各プラグイン 説明

### leaflet-fusesearch

GeoJSONレイヤーのフィーチャーをあいまい検索できます。
検索対象データはGeoJSON固定のようです。
検索には[Fuse.js](http://fusejs.io/)を使用する。　※Fuse.js: 軽量のファジー検索ライブラリ

[leafletプラグイン > leaflet-fusesearch - Qiita](https://qiita.com/sugasaki/items/23dd26b822b7411fa8a4)

<img src='https://qiita-image-store.s3.amazonaws.com/0/49910/097f193b-df05-1698-bde0-e3193e79c190.png' width=300px />


### Leaflet Search

[stefanocudini/leaflet-search](https://github.com/stefanocudini/leaflet-search)

[demo](https://github.com/yafred/leaflet-responsive-popup)
[Simple Example](http://labs.easyblog.it/maps/leaflet-search/examples/simple.html)

検索ボックスに入力すると候補がいくつか表示されます。
候補を選択すると、マーカーがズームアップされポップアップが表示されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/3353d52c-1f23-3aad-61e0-518408424a2e.png)

### leaflet-custom-searchbox

グーグルマップ風の検索BOXを表示できます。

[8to5Developer/leaflet-custom-searchbox](https://github.com/8to5Developer/leaflet-custom-searchbox)


[demo](https://8to5developer.github.io/leaflet-custom-searchbox/)

<img src='https://qiita-image-store.s3.amazonaws.com/0/49910/7cd5318b-1cae-57ff-9992-97959f96439b.png' width=300px />　<img src='https://qiita-image-store.s3.amazonaws.com/0/49910/db2ff6b2-54b9-a066-1890-389de9b4a513.png' width=300px />



### Leaflet.Rrose

[Rrose by erictheise](https://erictheise.com/rrose/)

世界を格子状に区切り、それぞれのマスに情報をもたせポップアップを表示する事ができます。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/496991ea-ecde-4d0f-51c1-d11f8ff6389e.png)

### Leaflet.utfgrid

UtfGridデータを表示するプラグイン

UtfGridって何？と思いましたが、情報があまりありませんでした。（ほとんどがリンク切れ）
以下を見ると、データをタイルで分けて使うみたいな事なので、MVT・ベクトルタイルの前身でしょうか？
[How Interactivity Works with UTFGrid – Points of interest](https://blog.mapbox.com/how-interactivity-works-with-utfgrid-3b7d437f9ca9)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/b68abb6d-03c6-7d5f-9bd5-a448e301bded.png)


### Leaflet.RevealOSM

[yohanboniface/Leaflet.RevealOSM](https://github.com/yohanboniface/Leaflet.RevealOSM)

最終更新：2013年5月28日

地図をクリックすると、OSMのポイントのデータを表示します。


![image](https://qiita-image-store.s3.amazonaws.com/0/49910/f242b7ab-4090-f6da-089e-e980064118ab.png)

画像のポップアップは以下のテンプレート指示で表示されているようです。

```js
revealOSMControlOptions: {
    queryTemplate: '[out:json];(node(around:{radius},{lat},{lng})[name];way(around:{radius},{lat},{lng})[name][highway];);out body qt 1;'
},
```



### Leaflet Underneath

[Leaflet RevealOSM Control example](http://yohanboniface.github.io/Leaflet.RevealOSM/)

Mapbox Vector Tilesデータを使用して、ある場所の近くの興味深い機能を検索し、速度と帯域幅が制限されたタイルレイヤーに対話型機能を追加します。


[demo](http://www.liedman.net/leaflet-underneath/)

使い方がいまいちよく分からず。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/e172315a-c110-9c18-3409-7f45134018d4.png)


### Leaflet.GeoJSONAutocomplete

[utahemre/Leaflet.GeoJSONAutocomplete: Leaflet Search Bar For Remote Searching with GeoJSON Services.](https://github.com/utahemre/Leaflet.GeoJSONAutocomplete)

最終更新：2015年11月16日

グーグルマップ風の検索BOXを表示します。キー入力でオートコンプリートが効きます。

データはあらかじめ用意したGeoJSONを検索します。

[demo](https://utahemre.github.io/geojsonautocompletedemo.html)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/fef0f3ed-0434-6cbb-64a9-11418ca08e73.png)


### L.tagFilterButton

フィルターボタンを追加します。

以下の方がまとめてくださっていました。

[leaflet入門｜プラグインでフィルターボタンを追加する（L.tagFilterButton） | kitanote](https://kita-note.com/leaflet-plugin-tagfilterbutton)


### leaflet-google-places-autocomplete

[Twista/leaflet-google-places-autocomplete](https://github.com/Twista/leaflet-google-places-autocomplete)

検索BOXに地名を入れるとオートコンプリートで候補地を表示してくれます。
選ぶとそこがズームアップされます。

場所データはGoogleAPIの場所データから取得するようです。
https://maps.googleapis.com/maps/api/js?libraries=places

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/f696b30e-694b-58b3-8700-a206a38edeb5.png)


### leaflet-responsive-popup

[yafred/leaflet-responsive-popup](https://github.com/yafred/leaflet-responsive-popup)

ポップアップの位置を調整します。

左：適用前、右：適用後
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/57cdb8a3-dda3-900f-5b17-a66b22b97223.png)![image](https://qiita-image-store.s3.amazonaws.com/0/49910/c609a269-4c16-f61e-7bc0-53bc208025ff.png)

[demo](https://yafred.github.io/leaflet-responsive-popup/default-marker-tip)

↓のデモがすごい
[Explore with FranceImage](http://franceimage.github.io/map/?llz=46.505954,4.108887,6)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/a23b06db-8e98-a788-b58e-79cae4d315c5.png)