var mymap = L.map("mymap",{
  center: [38.8932, 139.8190], 
  zoom: 18,
  minZoom: 16,
  maxZoom: 18});
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution:
   '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);


/*ポリゴン・マーカー*/
var pg = [			// Polygon: ポリゴン
  [38.89154269130935,139.82343978181328],
  [38.891626305385756,139.82389732427205],
  [38.891689015878455,139.82388117571466],
  [38.89169737727329,139.8240157470261],
  [38.891643335276754,139.824045242108],
  [38.89163497387553,139.8240237106982],
  [38.8915346369843,139.824045242108],
  [38.89150955273935,139.8239752650261],
  [38.89123362546016,139.824045242108],
  [38.89116255310857,139.8236361453214],
  [38.89100786597994,139.82367382528858],
  [38.89097442006996,139.82351772256735],
  [38.89126707124806,139.82344236263296],
  [38.89128797485751,139.82358231679683],
  [38.89133396277663,139.8235715510919],
  [38.89131305918071,139.82343159692803],
  [38.89144266137617,139.82339929981333],
  [38.891455203511555,139.82344236263296]
  	// 終点と始点は連結される
];
var pgOpt = {			// polygonに与えるオプション
  color: "blue",		// 線分の色
  fillColor: "pink",		// 塗りつぶし部分の色
  fillOpacity: 0.4		// 塗りつぶし部分の透明度
};
var pgobj = L.polygon(pg, pgOpt).addTo(mymap);

var marker1 = L.latLng([38.89281202751533, 139.81944273002574]); // marker1の座標
var m1Icon = L.icon({ //アイコンサイズ
  iconUrl: '../img/apple-tree.png',
  iconSize: [40, 40],
  iconAnchor: [20, 35]
});
var m1 = L.marker(marker1,{title:'リンゴの木',icon:m1Icon,zIndexOffset:1000,riseOnHover:true}).addTo(mymap);
//m1.bindPopup("土門拳記念館ですよ!");
var continueclosem1 = false;

function m1big(){//マーカーを大きくする
  mymap.removeLayer(m1);
  m1Icon = L.icon({
    iconUrl: '../img/apple-tree.png',
    iconSize: [80, 80],
    iconAnchor: [40, 75]
  });
  m1 = L.marker(marker1,{title:'リンゴの木',icon:m1Icon,zIndexOffset:1000,riseOnHover:true})
  .addTo(mymap).on('click', function(e) {marker1cilck(e);});
  continueclosem1 = true;
}
function m1small(){//マーカーを小さくする
  mymap.removeLayer(m1);
  m1Icon = L.icon({ //アイコンサイズ
    iconUrl: '../img/apple-tree.png',
    iconSize: [40, 40],
    iconAnchor: [20, 35]
  });
  m1 = L.marker(marker1,{title:'リンゴの木',icon:m1Icon,zIndexOffset:1000,riseOnHover:true})
  .addTo(mymap);
  continueclosem1 = false;
}
/*----------------*/


var nyanIcon = L.icon({ //ニャンキャット表示用
  iconUrl: '../img/nyan_cat.gif',
  iconSize: [60, 60],
  iconAnchor: [40, 30]
});
var nyanMarker = L.marker( mymap.getCenter(),{icon:nyanIcon,zIndexOffset:1000,interactive:false} ).addTo(mymap);


/*---------------目的地との距離---------------*/
function distance(x1, y1, x2, y2) {	// ヒュベニ式による距離概算
  rx = 6378137;			// 赤道半径(m) WGS84
  ry = 6356752.314;			// 極半径(m)   WGS84
  e2=(rx*rx-ry*ry)/rx/rx;		// 離心率 E^2
  dx = (x2-x1)*Math.PI/180;		// 経度の差をラジアン変換
  dy = (y2-y1)*Math.PI/180;		// 緯度の差をラジアン変換
  my = (y1+y2)/2.0*Math.PI/180;	// 緯度の平均をラジアン変換
  w = Math.sqrt(1-e2*Math.sin(my)*Math.sin(my));
  m = rx*(1-e2)/Math.pow(w,3);		// 子午線曲率半径
  n = rx/w;				// 卯酉線曲率半径
  return Math.sqrt(Math.pow(dy*m,2) + Math.pow(dx*n*Math.cos(my),2));
}
/*------------------------------------------*/

/*----------------マップムーブイベント---------------*/
mymap.on('move', function(e) {
  document.getElementById('zoom_input').value = mymap.getZoom();

  let d = distance(latlng.lng, latlng.lat, marker1.lng, marker1.lat);		// 距離を計算

  if(d <= 15){//マーカー1までの距離10メートル以内
    if(!continueclosem1){
      m1big();
    }
  }else{
    if(continueclosem1){
      m1small();
    }
  }
  //console.log(latlng.lng +" "+ latlng.lat +" "+ marker1.lng +" "+ marker1.lat);
  //→ NaN //マーカーの緯度経度にL.lagLng()で解決
	document.getElementById('distance_input').value = "距離: "+Math.round(d*100)/100+"m";	// 表示
});

/*--------------------------------------*/

/*---------------------GPSなし操作------------------*/
mymap.options.singleClickTimeout = 250;
mymap.on('singleclick', function(e) {
  if (true){
    latlng = L.latLng(e.latlng);
    nyanMarker.setLatLng(e.latlng);
    mymap.panTo(e.latlng);
    console.log(e.latlng);
  }
});
/*--------------------------------------------------*/

/*---------------GPS情報取得-------------------*/
var timerInterval = 3000;
var tmId = null;
var latlng = L.latLng(mymap.getCenter());
function tryGetGPS() {	// 取得を開始する処理を行なう関数の定義
    navigator.geolocation.getCurrentPosition(
    onSuccess, onError,{	// 下で定義する2つの関数をコールバック指定
        maximumAge:0, timeout: 2000, enableHighAccuracy: true
    });
    nyanMarker.bindPopup("取得中...").openPopup();
}
function onSuccess(pos) { // 成功時のコールバック。関数名は何でもよい。
    // pos.coords に位置情報が入る。LeafletのLatLngに変換する。
    latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
    nyanMarker.setLatLng(latlng);
    console.log("取得した位置情報" + latlng);

    document.getElementById('lat_input').value = latlng.lat;
    document.getElementById('lng_input').value = latlng.lng;
    document.getElementById('zoom_input').value = mymap.getZoom();
    nyanMarker.setPopupContent(// ポップアップ表示を
    "今はココだニャン"//このコメントに変え
    ).openPopup();// ポップアップする
    mymap.panTo(latlng);// 地図の中心を取得した位置に
    //センタリングが上手くいかなかったが、ポップアップ表示の処理を消したら上手くいった
    //その後ポップアップ処理の後ろに移動したら上手くいった
    tmId = setTimeout(tryGetGPS, timerInterval);//timerIntervalミリ秒後再度GPS取得
}
function onError(err) {			// 失敗時のコールバック
    let nTrial = 3;			// 最大試行回数を決めておく
    restN = "あと"+(--nTrial)+"回試行します。";
    nyanMarker.setPopupContent("取得失敗:"+restN).openPopup();
    if (nTrial > 0) {			// 残り回数があれば
    tryGetGPS();			// 再度取得を試行する
    }
}
/*-------------------------------------------*/

/*------------------UIイベント-------------------*/
var item_popup = document.getElementById('items');

var ui_ryuku = document.getElementById('ryuku');

closeitemsPopUp(ui_ryuku);
function closeitemsPopUp(elem) {//上の要素のどれかをクリックしたら表示もしくは非表示
  if(!elem) return;
  elem.addEventListener('click', function() {
    item_popup.classList.toggle('is-show');
  });
}
/*----------------------------------------------*/

/*---------------マップイベント-----------------*/
var popup = document.getElementById('js-popup');
var blackBg = document.getElementById('js-black-bg');
var closeBtn = document.getElementById('js-close-btn');

closePopUp(blackBg);
closePopUp(closeBtn);
function closePopUp(elem) {//上の要素のどれかをクリックしたら表示もしくは非表示
  if(!elem) return;
  elem.addEventListener('click', function() {
    popup.classList.toggle('is-show');
  });
}

function marker1cilck(){ 
    if(!popup) return;
    popup.classList.toggle('is-show');
}
/*---------------------------------------------*/
