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

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

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

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

Q&A

1回答

1867閲覧

javascript「leaflet」のマーカーに内部・外部リンクを設置したい

anpan

総合スコア9

JavaScript

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

0グッド

0クリップ

投稿2018/04/15 02:58

編集2018/04/16 03:05

前提・実現したいこと

javascript「leaflet」を使用してマップページを作成しております。
ライブラリURLは下記参照
http://leafletjs.com/

今回アイコンをカスタマイズしたくて
マーカーアイコン
Leaflet.ExtraMarkers
下記demo参照
http://coryasilva.github.io/Leaflet.ExtraMarkers/

を使用してみたのですが、
markerにページ内リンク・外部リンクを設置することができず困っております。
上記の「http://leafletjs.com/」のチュートリアルやオプション等も確認したのですが
どこにも記載が確認出来ませんでした。

もし「Leaflet.ExtraMarkers」の仕様の方でURLリンクを設置するやり方がお分かりな方は
ご教授願えますでしょうか。
よろしくお願いいたします。

■marker js 記載部分■

// Setup map var map = L.map('map2').setView([33.00, -117.255], 14); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', detectRetina: true }).addTo(map); // Add markers to map // Font-Awesome markers /*ここから*/ L.marker([33.005, -117.270], { icon: L.ExtraMarkers.icon({ icon: 'fa-spinner', shape: 'circle', markerColor: 'red', prefix: 'fa', extraClasses: 'fa-spin' }) }).addTo(map); /*ここまでがひとつのマーカー記載部分です。*/ /*今回この一つ一つに内部リンクを入れたいです。*/ L.marker([33.005, -117.265], { icon: L.ExtraMarkers.icon({ icon: 'fa-coffee', shape: 'square', markerColor: 'orange-dark', prefix: 'fa', iconColor: 'black' }) }).addTo(map); L.marker([33.005, -117.260], { icon: L.ExtraMarkers.icon({ icon: 'fa-cog', shape: 'star', prefix: 'fa', markerColor: 'orange', iconColor: '#6b1d5c' }) }).addTo(map); L.marker([33.005, -117.255], { icon: L.ExtraMarkers.icon({ icon: 'fa-spinner', shape: 'penta', markerColor: 'yellow', prefix: 'fa' }) }).addTo(map); //Semantic UI L.marker([33.005, -117.250], { icon: L.ExtraMarkers.icon({ icon: 'add sign', shape: 'circle', markerColor: 'blue-dark', prefix: 'icon' }) }).addTo(map); L.marker([33.005, -117.245], { icon: L.ExtraMarkers.icon({ icon: ' archive', shape: 'square', markerColor: 'cyan', prefix: 'icon' }) }).addTo(map); L.marker([33.005, -117.240], { icon: L.ExtraMarkers.icon({ icon: 'loading', shape: 'penta', markerColor: 'purple', prefix: 'icon' }) }).addTo(map); // Second Row L.marker([32.995, -117.270], { icon: L.ExtraMarkers.icon({ icon: 'plus sign', shape: 'circle', markerColor: 'violet', prefix: 'icon' }) }).addTo(map); // Glyphicons L.marker([32.995, -117.265], { icon: L.ExtraMarkers.icon({ icon: 'glyphicon-cog', shape: 'square', prefix: 'glyphicon', markerColor: 'pink' }) }).addTo(map); L.marker([32.995, -117.260], { icon: L.ExtraMarkers.icon({ icon: 'glyphicon-bell', shape: 'star', prefix: 'glyphicon', markerColor: 'green-dark' }) }).addTo(map); L.marker([32.995, -117.255], { icon: L.ExtraMarkers.icon({ icon: 'fa-number', shape: 'penta', prefix: 'fa', markerColor: 'green', number: '1' }) }).addTo(map); L.marker([32.995, -117.250], { icon: L.ExtraMarkers.icon({ icon: 'glyphicon-cog', shape: 'circle', prefix: 'glyphicon', markerColor: 'green-light' }) }).addTo(map); // No Icons L.marker([32.995, -117.245], { icon: L.ExtraMarkers.icon({ icon: '', shape: 'square', markerColor: 'black' }) }).addTo(map); L.marker([32.995, -117.240], { icon: L.ExtraMarkers.icon({ shape: 'star', markerColor: 'white' }) }).addTo(map); /*↓ここはポップアップの項目なので今回私のほうではOFFにしています。*/ //adds pop up to each marker map.eachLayer(function (layer) { if(layer._icon && layer._icon.className.includes('leaflet-marker-icon')) { var popUpTextArray = []; console.log(layer) popUpTextArray.push('icon: ' + layer.options.icon.options.icon); popUpTextArray.push('shape: ' + layer.options.icon.options.shape); popUpTextArray.push('markerColor: ' + layer.options.icon.options.markerColor); var popUpText = popUpTextArray.join('<br />'); layer.bindPopup(popUpText); } });

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

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

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

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

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

kei344

2018/04/15 09:20

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
anpan

2018/04/16 03:06

ご指摘ありがとうございました。コード部分修正しました。
guest

回答1

0

マーカーにクリックイベントを付ければよいのでは。

【Documentation - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/reference-1.3.0.html#event-objects

【JavaScript - クリックイベントでサイドバーにJSONデータを渡したい(33778)|teratail】
https://teratail.com/questions/33778

投稿2018/04/16 15:03

kei344

総合スコア69398

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問