前提・実現したいこと
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: '© <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); } });