/* domon.js - 北緯38.891度, 東経139.824度, ズームレベル16 で地図表示 */

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

var memap = L.map("memap").setView([35.6838, 139.7539], 16);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution:
   '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(memap);



/*ポリゴン・マーカー*/
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 = [38.8913, 139.8238]; // polylineとpolygon各々の始点
var m1opt = {title: "土門拳記念館"};
var m1 = L.marker(marker1, m1opt).addTo(mymap);
m1.bindPopup("土門拳記念館ですよ!");
/*----------------*/


var crossIcon = L.icon({ //センタークロス表示用
  iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif',
  iconSize: [32, 32],
  iconAnchor: [16, 16]
});
var crossMarker = L.marker( mymap.getCenter(),{icon:crossIcon,zIndexOffset:1000,interactive:false} ).addTo(mymap);


//マップムーブイベント
mymap.on('move', function(e) {
  crossMarker.setLatLng(mymap.getCenter()); //センタークロス表示用

  //マップムーブイベントで値を出力
  outputPos(mymap);
  movePos(mymap);
});

function outputPos(map){
  var pos = map.getCenter();
  var zoom = map.getZoom();
  //inputに出力
  document.getElementById('lat_input').value = pos.lat;
  document.getElementById('lng_input').value = pos.lng;
  document.getElementById('zoom_input').value = zoom;
}

function movePos(map){
  var pos = mymap.getCenter();
  var zoom = mymap.getZoom();

  memap.setView([pos.lat, pos.lng], zoom);
}