- ベストアンサー
Leafletで番号付マーカーを設定
- Leafletを使用してマップに番号付きのマーカーを設定する方法について調べています。
- CSSクラスとマーカーの作成方法を参考にして、マーカーに静的な値を表示することはできるが、動的な値を表示する方法がわかりません。
- また、配列を使用して複数のマーカーを設定しているが、特定の番号のマーカーを表示する方法もわかりません。
- turu575
- お礼率80% (91/113)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
No.4のお礼コメントに対して回答します。 https://leafletjs.com/reference-1.6.0.html#diviconで、"Inherits from Icon but ignores the iconUrl and shadow options."とあり、divIconはiconUrlを継承しないことを見落としていました。。 よって、classNameでクラス指定してCSSで背景画像としてアイコンを表示するのが簡潔です。 【CSS】 .my-custom-marker{ background: url('images/my-icon.png'); background-repeat: no-repeat; } 【JS】 L.marker( mk.pos, { icon: L.divIcon({ className: 'my-custom-marker', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45], html: mk.id }), title: mk.pos } ).bindPopup(popup).addTo(map);
その他の回答 (4)
- Proof4
- ベストアンサー率78% (151/192)
No.3のお礼コメントに対して回答します まず、L.iconメソッド(https://leafletjs.com/reference-1.6.0.html#icon)はhtmlオプションを持たないのでNo.1やNo.2と同様にdivIconメソッドを利用します。 そのうえで、for文の内部でL.markerのオプションとしてアイコンを生成します。 下記のような実装になります。 <script> //マーカーに表示したい対象の緯度経度とポップアップする名称を設定 var markerList = [ { pos: [35.021374099999996,135.75594859999998],name:"京都府庁<br/>京都市上京区薮之内町",id:"26"}, { pos: [33.8416231,132.765729],name:"愛媛県庁<br/>松山市一番町4-4-2",id:"38"}, { pos: [51.5033635,-0.12762479999999998],name:"ダウニング街10番地<br/>10 Downing St, Westminster, London SW1A 2AA イギリス",id:"61"}, ]; function init() { var map = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); //マーカー全体が入るボックスを作る var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos); //markerListの設定でマーカーを追加 for (var num in markerList) { var mk = markerList[num]; var popup = L.popup().setContent(mk.name); L.marker( mk.pos, { icon: L.divIcon({ iconUrl: 'images/my-icon.png', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45], html: mk.id }), title: mk.pos } ).bindPopup(popup).addTo(map); //マーカー全体が入るボックスを広げる bound.extend(mk.pos); } //マーカー全体が入るように地図範囲を設定する map.fitBounds(bound); } </script> ※OKWAVEの仕様上、ソースコードのインデントを全角スペースで表現しています。コピペの際はご注意ください。
お礼
度々のご回答有り難うございます。下記のようにコードを書き換えたところ mk.pos, { icon: L.divIcon({ iconUrl:'images/my-icon.png', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45], html: mk.id }), title: mk.pos } ).bindPopup(popup).addTo(map); 確かにidがマーカー部に表示されるのですがマーカーの呼び出しがなされず白角のマーカーとなりました。for内にurlの設定をすることに問題があると思いますがよく分かりません。ご面倒でも再度ご教授願います。
- Proof4
- ベストアンサー率78% (151/192)
No.2のお礼コメントに対して回答します。 L.markerメソッドはドキュメントにあるとおり、引数を最大でも2つしかとりません(https://leafletjs.com/reference-1.6.0.html#marker)。 よって、No.1で示したコードのaddDivIcon関数のconst markerの部分を下記のように書き換える必要があります。 const marker = new L.marker( LatLng, { icon: numberIcon, draggable: true, title: "Resource location", alt: "Resource Location", riseOnHover: true } ).addTo(map); ※OKWAVEの仕様上、ソースコードのインデントを全角スペースで表現しています。コピペの際はご注意ください。
お礼
再々の回答有難うございます。 const marker = new L.marker( LatLng,{icon: numberIcon,draggable: true,title: "Resource location",alt: "Resource Location",riseOnHover: true}).addTo(map); で追加マーカーのドラッグが出来るようになりました。Leafletの公式サイトのチュートリアルをしっかり読み込めば良いのですが。他人にはマニュアルが基本だなど常に言っている割りに、英語が苦手を言い訳にして怠っていた自分が情けないです。 ついでと言ってとはは誠に申し訳ありませんが 配列からマーカーhtmlに任意の数字を配置する方法の実装もお願いいたします。 例えば別途マーカーで置き換えている場合、idをマーカーのhtnlに入れるfor文ついてお願いいたします。マーカーの呼び出しは前回の質問にあるCSSどちらでも構いません。 <script> var myIcon = L.icon({ iconUrl: 'images/my-icon.png', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45] }); //マーカーに表示したい対象の緯度経度とポップアップする名称を設定 var markerList = [ { pos: [35.021374099999996,135.75594859999998],name:"京都府庁<br/>京都市上京区薮之内町",id:"26"}, { pos: [33.8416231,132.765729],name:"愛媛県庁<br/>松山市一番町4-4-2",id:"38"}, { pos: [51.5033635,-0.12762479999999998],name:"ダウニング街10番地<br/>10 Downing St, Westminster, London SW1A 2AA イギリス",id:"61"},]; function init() { var map = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); //マーカー全体が入るボックスを作る var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos); //markerListの設定でマーカーを追加 for (var num in markerList) { var mk = markerList[num]; var popup = L.popup().setContent(mk.name); L.marker(mk.pos,{icon: myIcon},{ title:mk.pos}).bindPopup(popup).addTo(map); //マーカー全体が入るボックスを広げる bound.extend(mk.pos); } //マーカー全体が入るように地図範囲を設定する map.fitBounds(bound); } </script>
- Proof4
- ベストアンサー率78% (151/192)
No.1のお礼コメントに対して回答します。 scriptの部分だけを以下のように書き換えると所望の動作になると思います。 <script> let num = 1; // マーカーにつける番号 function addDivIcon(map, LatLng, html){ const numberIcon = L.divIcon({ className: "greenIcon", iconSize: [25, 41], iconAnchor: [10, 43], popupAnchor: [3, -45], html: html }); const marker = new L.marker( LatLng, { icon: numberIcon } ).addTo(map); return marker; } // クリックでmapにマーカを設置 function onMapClick(e) { // マーカーの追加 const marker = addDivIcon(map, e.latlng, num); // ポップアップ表示 marker.bindPopup(e.latlng.toString()).openPopup(); // 最後のマーカーの座標を変数に aa = e.latlng.toString(); // 選択マーカの座標をポップアップ表示 // ドラッグ操作が完了した時点でポップアップ marker.on("dragend", function (ev) { var chagedPos = ev.target.getLatLng(); this.bindPopup(chagedPos.toString()).openPopup(); }); // 左クリックポップアップ座標を変数に marker.on("click", function (ev) { var chagedPos = ev.target.getLatLng(); this.bindPopup(chagedPos.toString()).openPopup(); aa = chagedPos.toString(); }); // 右クリックで追加マーカーを消す marker.on('contextmenu', function (ev) { map.removeLayer(ev.target); }); // マーカーの番号を増加させる num++; } var point = [51.5, -0.09]; var map = L.map('map').setView(point, 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' }).addTo(map); var marker = L.marker(point).addTo(map); marker.bindPopup("<p>popup1</p><p>指定されたポイント</p>").openPopup(); map.on('click', onMapClick); </script> ※OKWAVEの仕様上、ソースコードのインデントを全角スペースで表現しています。コピペの際はご注意ください。 onMapClick関数のvar marker = L.marker(...でしていた処理をNo.1の回答で提示したaddDivIconに任せる形となります。 addDivIconのmarkerを返値とし、onMapClickで受け取ることでポップアップの表示などができるようになっています。 onMapClickが実行されるごとに、次回作成されるマーカーの番号を増加させています。 classを使ってオブジェクト指向で記述するとすっきりとしたコードになりますが、そこはもう少し慣れてからの課題ということにします。
お礼
再度の回答有難うございました。そのままコードを使い実行しましたところ番号付けはうまく行きましたが（中身につきましてはこれから勉強します。）2番目の静的例示で間違いがありました。 // クリックでmapにマーカを設置 function onMapClick(e) {var marker = L.marker(e.latlng, {icon: greenIcon}, {draggable: true,title: "Resource location",alt: "Resource Location",riseOnHover: true}).addTo(map).bindPopup(e.latlng.toString()).openPopup(); としてましたが、{icon: greenIcon}を付け加える事で静的マーカーとして変更できたと思っていましたが。確かにマーカを追加すれば変更したマーカーに変わりますが次の操作でマーカーのドラッグが効かない結果となってしていました。 // 選択マーカの座標をポップアップ表示 //ドラッグ操作が完了した時点でポップアップ marker.on("dragend", function (ev) {var chagedPos = ev.target.getLatLng();this.bindPopup(chagedPos.toString()).openPopup();}); 実装例の // マーカーの追加 const marker = addDivIcon(map, e.latlng, num); に下記のコードの部分（ただ単に人様のサイトからコピペで借用したもの）を {draggable: true,title: "Resource location",alt: "Resource Location",riseOnHover: true}).addTo(map).bindPopup(e.latlng.toString()).openPopup(); どう生かせば良いか分かりません。もし宜しければ実装できるかどうかも含めお教えください。
- Proof4
- ベストアンサー率78% (151/192)
new L.markerをマーカーの数だけfor文でループさせ、各ループでL.divIconのhtmlオプションに異なる値を指定すれば実現できます。 番号付きマーカーをセットする関数を作成します。 function addDivIcon(map, LatLng, html){ const numberIcon = L.divIcon({ className: "number-icon", iconSize: [25, 41], iconAnchor: [10, 44], popupAnchor: [3, -40], html: html }); map.marker = new L.marker( LatLng, { icon: numberIcon } ).addTo(map); } この関数の引数ですが、 map: L.map(https://leafletjs.com/reference-1.6.0.html#map)で作成するインスタンス LatLng: [緯度, 経度]の配列 html: マーカーの表示内容 となっています。 あとは、この関数をマーカーの数だけ呼び出せばよいです。 「配列に任意の番号を組み入れた場合、その番号で表示できないかどうか」とのことですので、そのような場合の例を以下に示します。 const markerConfig = [ // マーカーの設定を記述する配列 { latlng: [35.6812362,139.7671248], // 位置 html: "東京駅" // マーカーの表示内容 }, { latlng: [35.6580339,139.6994471], html: "渋谷駅" }, { latlng: [35.7295028,139.7087114], html: "池袋駅" }, ]; for(marker of markerConfig){ addDivIcon(map, marker.latlng, marker.html); } 今はmarkerConfigのhtmlに文字列を入れていますが、これを番号にすればよいでしょう。 ※OKWAVEの仕様上、ソースコードのインデントを全角スペースで表現しています。コピペの際はご注意ください。
お礼
早速の回答有難うございます。下記のような例を書き換えようとしましたが私の能力では、番号付きマーカーをセットする関数を作成しどこに配置するかなど全く理解出来ていないため実現不可能でした。 .greenIcon { background-image: url("images/my-icon.png"); text-align:center; line-height:30px; color:black; } </style> </head> <body> <div id="map"></div> <script> var point=[51.5, -0.09]; //静的設定の場合 var greenIcon = L.divIcon({ className: "greenIcon", iconSize: [25, 41], iconAnchor: [10, 43], popupAnchor: [3, -45], html:"a" }); var map = L.map('map').setView(point, 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' }).addTo(map); var marker = L.marker(point).addTo(map);marker.bindPopup("<p>popup1</p><p>指定されたポイント</p>").openPopup(); // クリックでmapにマーカを設置 function onMapClick(e) {var marker = L.marker(e.latlng, {icon: greenIcon}, {draggable: true,title: "Resource location",alt: "Resource Location",riseOnHover: true}).addTo(map).bindPopup(e.latlng.toString()).openPopup(); // 最後のマーカーの座標を変数に aa =e.latlng.toString(); // 選択マーカの座標をポップアップ表示 //ドラッグ操作が完了した時点でポップアップ marker.on("dragend", function (ev) {var chagedPos = ev.target.getLatLng();this.bindPopup(chagedPos.toString()).openPopup();}); //左クリックポップアップ座標を変数に marker.on("click", function (ev) { var chagedPos = ev.target.getLatLng();this.bindPopup(chagedPos.toString()).openPopup();aa =chagedPos.toString();}); //右クリックで追加マーカーを消す marker.on('contextmenu', function (ev) {map.removeLayer(ev.target);}); } map.on('click', onMapClick); 以下省略 どこをどうすれば良いのか再度ご教授お願いいたします。
お礼
ご回答、大変有難うございます。以下の設定で変更マーカーにidが表示されました。私も最初の質問でのCSSの設定で試みていたのですが、マーカーがでなくて（透過状態？）idだけ表示される結果となっていました,CSSにbackground-repeat: no-repeat;を加え無ければならないとはつゆ知らず。無知の極みです。 .my-custom-marker{ background: url('images/my-icon.png'); background-repeat: no-repeat; line-height:30px; text-align:center; } </style> </head> <body> <script> //マーカーに表示したい対象の緯度経度とポップアップする名称を設定 var markerList = [ { pos: [35.021374099999996,135.75594859999998],name:"京都府庁<br/>京都市上京区薮之内町",id:"26"}, { pos: [33.8416231,132.765729],name:"愛媛県庁<br/>松山市一番町4-4-2",id:"38"}, { pos: [51.5033635,-0.12762479999999998],name:"ダウニング街10番地<br/>10 Downing St, Westminster, London SW1A 2AA イギリス",id:"61"}, ]; function init() { var map = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); //マーカー全体が入るボックスを作る var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos); //markerListの設定でマーカーを追加 for (var num in markerList) { var mk = markerList[num]; var popup = L.popup().setContent(mk.name); L.marker( mk.pos, { icon: L.divIcon({ className: 'my-custom-marker', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45], html: mk.id }), title: mk.pos } ).bindPopup(popup).addTo(map); //マーカー全体が入るボックスを広げる bound.extend(mk.pos); } //マーカー全体が入るように地図範囲を設定する map.fitBounds(bound); } </script> 長々とお付き合いしていただき大変お世話になりました。