質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2372閲覧

OpenStreetMapに検索機能を付けたい

oyatsu8

総合スコア97

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/09/18 03:17

###前提・実現したいこと
OpenStreetMapの初心者です。
WEBページにOpenStreetMapを埋め込み、
レイヤーをiframeの外から操作(表示、非表示)したり、
検索機能を付けて、自分が読み込ませているCSV内の検索が出来るようにしたいです。

###発生している問題・エラーメッセージ

###該当のソースコード

###試したこと
課題に対してアプローチしたことを記載してください

現在umapを使っており、レイヤー操作は出来るのですが、
検索や、外部操作が出来るかどうかがわかりません(自分が今まで調べた中には情報がありませんでした)。

leafletは少し触り、簡単なものであれば動かす事ができました。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

データベースはほとんど使用したことが無いのですが、
必要であればどのように使えばいいのか、
leaflet + ○○
のような形で教えて頂けると助かります。

どうぞよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

本格的な検索というわけではありませんが、マーカーから検索をするものなら下記のようなものがあるようです。

【GitHub - stefanocudini/leaflet-search: Search stuff in a Leaflet map】
https://github.com/stefanocudini/leaflet-search#examples

投稿2016/09/23 10:29

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyatsu8

2016/09/29 01:15

回答ありがとうございます、遅くなってしまい申し訳ありません。 今から試してみます。
oyatsu8

2016/09/30 08:35

ありがとうございます。教えて頂いた物の中に自分がやりたいことに近いものがあったのですが、複数表示したい場合にどうしたらいいかがわかりませんでした。例えば下記のjsのコードでblackをblueにした場合で、blueを検索窓に入力した場合、2つ表示されてほしいのですが、下記のコードでは出来ませんでした。単純にjsの理解かと思うのですが、アドバイス頂けたら幸いです。 http://labs.easyblog.it/maps/leaflet-search/examples/methods.html <script> //sample data values for populate map var data = [ {"loc":[41.575330,13.102411], "title":"aquamarine"}, {"loc":[41.575730,13.002411], "title":"black"}, {"loc":[41.807149,13.162994], "title":"blue"}, {"loc":[41.507149,13.172994], "title":"chocolate"}, {"loc":[41.847149,14.132994], "title":"coral"}, {"loc":[41.219190,13.062145], "title":"cyan"}, {"loc":[41.344190,13.242145], "title":"darkblue"}, {"loc":[41.679190,13.122145], "title":"darkred"}, {"loc":[41.329190,13.192145], "title":"darkgray"}, {"loc":[41.379290,13.122545], "title":"dodgerblue"}, {"loc":[41.409190,13.362145], "title":"gray"}, {"loc":[41.794008,12.583884], "title":"green"}, {"loc":[41.805008,12.982884], "title":"greenyellow"}, {"loc":[41.536175,13.273590], "title":"red"}, {"loc":[41.516175,13.373590], "title":"rosybrown"}, {"loc":[41.506175,13.173590], "title":"royalblue"}, {"loc":[41.836175,13.673590], "title":"salmon"}, {"loc":[41.796175,13.570590], "title":"seagreen"}, {"loc":[41.436175,13.573590], "title":"seashell"}, {"loc":[41.336175,13.973590], "title":"silver"}, {"loc":[41.236175,13.273590], "title":"skyblue"}, {"loc":[41.546175,13.473590], "title":"yellow"}, {"loc":[41.239190,13.032145], "title":"white"} ]; var map = new L.Map('map', {zoom: 9, center: new L.latLng(data[0].loc) }); //set center from first location map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer var markersLayer = new L.LayerGroup(); //layer contain searched elements map.addLayer(markersLayer); var controlSearch = new L.Control.Search({layer: markersLayer, initial: false, position:'topright'}); map.addControl( controlSearch ); ////////////populate map with markers from sample data for(i in data) { var title = data[i].title, //value searched loc = data[i].loc, //position found marker = new L.Marker(new L.latLng(loc), {title: title} );//se property searched marker.bindPopup('title: '+ title ); markersLayer.addLayer(marker); } $('#textsearch').on('keyup', function(e) { controlSearch.searchText( e.target.value ); }) </script>
kei344

2016/09/30 08:49

ダウンロードしたファイルの中に、「/examples/multiple-results.html」というものがあるのでそれを確認してみてください。
oyatsu8

2016/10/02 16:27

ありがとうございます!LayerGroupというものがあることすら知らず、、 http://leafletjs.com/reference-1.0.0.html#layergroup 更に可能だったら質問させてください、例えば /examples/multiple-results.html のようなコードにgeojsonを読み込ませて、そのjsonの中のproperties の内容ごとにLayer分けするようなことがしたいのですが、それは無理でしょうか?  { "type": "Feature", "properties": { "Prefecture": "山形県", "Prefectural capital": "山形市", "Place": "スキー場" }, "geometry": { "type": "Point", "coordinates": [ 140.3803719, 38.4833438 ] } }, 例えば、スキー場というレイヤーがあって、geojsonの propertiesの中に「スキー場」があるものは全てピンが立つようなことがしたいと考えています
kei344

2016/10/04 17:04

> それは無理でしょうか? 出来るとは思いますよ。コメント欄に書いておられたコードの「var data = [/*内容*/];」のような感じで処理すれば出来ると思います。JavaScript の知識が無ければ難しいとは思いますが、比較的簡単だと思います。
oyatsu8

2016/10/07 17:42

ありがとうございます、まだ解決はしていないのですが、これからがんばってみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問