[[:programming_start]] ====== Leaflet 外部からポップアップを開く ====== Leaflet 1系を使用してマーカのポップアップを外部からオープンします。注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ===== デモ ===== 地図下部のリンクをクリックするとポップアップが開きます。

---- ===== ソースコード =====







【東京都】
【千葉県】
【埼玉県】

---- ===== 備考 ===== 基本的な部分は[[leaflet:marker]]と同じです。マーカー情報をマップ外から使用するためのグローバル変数を用意。


var markers=[];

マーカーの設定を上記で準備したグローバル変数に登録。


markers[0]=L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都");
markers[1]=L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県");
markers[2]=L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県");

マップ外からポップアップを開くためのJavaScript関数。''openPopup()'' でポップアップが開きます。


function popupOn(id){
  markers[id].openPopup();
}

HTMLにポップアップを開くためのリンクを設置。popupOn()の数字はmarkers[]の配列番号と連動しています。


【東京都】
【千葉県】
【埼玉県】

---- ===== おまけ ===== マーカーをセンターに表示したい場合はfunction popupOn()を下記のようにします。（注意：マップが小さくポップアップが画面外にはみ出る場合はpanToとopenPopupの順番が動作に影響します。下記の順番ではポップアップが画面外に出てもマーカーがセンターに来ます。逆にpanTo→openPopupの順にするとポップアップが表示領域にできるだけ収まるように表示されます）


function popupOn(id){
  var latlng=markers[id].getLatLng();

  markers[id].openPopup();
  //↑↓順番を変えると動作が少し変わります
  mymap.panTo(latlng);
}