var ltlg= [38.72859248614108,139.82239320874214]; //マップの中心にする座標 var M_info=document.getElementById("mak_info"); console.log(M_info); function Boxes(map,Icon,tenten,Name,id){ map.on('popupopen', function(o) { var S_width=window.innerWidth; var S_height=window.innerHeight; if(S_width<S_height){ var M_width=S_width; var M_height=S_height/2; }else{ var M_width=S_width/2; var M_height=S_height-200; }; //console.log(Name[0]); //console.log(o); $(function(){ var num=[]; $('.movie').colorbox({ onOpen:function(){ map.closePopup(); }, onLoad:function(){ map.setZoom(17); num.push($.colorbox.element().context.attributes.id.nodeValue); }, iframe: true, // titleで祭の名前とレストランの名前を表示 width:M_width, height: M_height, rel:'movie', //同じクラス名のものをスライド表示 //width:s_width-100, onClosed:function(){ var pan=num[num.length-1]; var lat=Icon[pan][1],lng=Icon[pan][0]; var pan_to=[lat,lng]; map.flyTo(pan_to); tenten[pan].openPopup(); } }); }); }); }; function henkan(poc,tem,nm){ console.log("unko"); poc=poc.replace("a",tem[nm-1].name); return poc; }; function Set_Contents(str){ //contents replace var desc=""; str=str.split(/\n/); for(i=0; i<str.length; i++){ if(str[i].match(/^{{{/)){ var Mov=str[i].replace(/{{{/g, ""); Mov=Mov.replace(/}}}/g, ""); }else if(str[i].match(/^{{/)){ var Pic=str[i].replace(/{{/g, "<img src=\""); Pic=Pic.replace(/}}/g, "\">"); }else if(str[i].match(/^\[\[/)){ var Link=str[i].replace(/^\[\[/g, "<a href=\"") Link=Link.replace(/\|/g, "\">"); Link=Link.replace(/]]/g, "</a>"); }else{ desc=desc.concat(str[i]); } }; return [desc,Mov,Pic,Link]; }; var osmTile = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> \ contributors' }); var gsiTile = L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>' }); var haru=L.layerGroup([]); var natu=L.layerGroup([]); var akii=L.layerGroup([]); var huyu=L.layerGroup([]); var mymap= L.map("mymap", { layers: [osmTile,haru,natu,akii,huyu], //最初に指定するタイルレイヤー center: ltlg, zoom: 17, scrollWheelZoom: false //中心座標とズームレベルとマウスのホイールでのズームをしないよう設定 }); //var time= document.getElementById("time"); var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile}; //レイヤーの内容 var kasyo=[],naiyo=[],iro=[],k_type=[],ten=[],coments=[],usepan=[],mkname=[]; function M_Icon(CON,MOV,mcon){ var rensyu=L.divIcon({ html:'<img id='+CON+' src="../../src/leaflet/images/marker-icon.png" href='+MOV+' class="movie">', className:'Movie', //if not class name marker has select box //iconUrl: '../../src/leaflet/images/marker-icon.png', //iconRetinaUrl: '../../src/leaflet/images/marker-icon.png', //iconSize: [0, 0], iconAnchor: [22, 40], popupAnchor: [-10,-30], shadowUrl: '../../src/leaflet/images/marker-shadow.png', shadowSize: [68, 95], shadowAnchor: [22, 94] }); mcon.setIcon(rensyu); }; var count=0; var customLayer=L.geoJson(null,{ style: function(feature) { if (feature.properties._storage_options && feature.properties._storage_options.color){ switch (feature.properties._storage_options.color) { //alert(feature.properties._storege_opions); case 'Red': return {color: "red"}; case 'brown': return {color: "brown"}; case 'Cyan': return {color: "cyan"}; case 'lime': return {color: "lime"}; } } if (feature.properties._storage_options && feature.properties._storage_options.weight){ var hutosa=feature.properties._storage_options.weight; return {weight: hutosa}; } if (feature.properties._storage_options && feature.properties._storage_options.dashArray){ var hakai=feature.properties._storage_options.dashArray; return {dashArray: hakai}; } }, onEachFeature: (function unji(feature, layer){ var propert= feature.properties, geomet=feature.geometry; // 予めfeature.propertisをletで宣言。(varでも可) if (propert && geomet) { if (propert.name){ var name=propert.name } else { var name=""; } if (propert.description){ var tose=propert.description; } else { var tose=""; } if (propert._storage_options){ if (propert._storage_options.color){ var color=propert._storage_options.color; iro.push(color); }else { color=""; iro.push(color); } if (propert._storage_options.iconClass){ var katati=propert._storage_options.iconClass; }else { katati=""; } } var season=propert.Season; var period=propert.period; var address=propert.address; var type=geomet.type, m=geomet.coordinates; k_type.push(type); //alert(k_type); if (propert){ if(type=="Point"){ var Point_id=type+count; var SMC=Set_Contents(tose); //alert(SMC[1]); if(SMC[1]==undefined){ var coment="<div id="+Point_id+"><h1>"+name+"</h1><h2>"+SMC[0]+"</h2></div>"; count++; coments.push(coment); usepan.push(m); mkname.push(name); var mak=layer.bindPopup(coment); M_info.innerHTML+=coment; }else{ var coment="<div id="+Point_id+"><h1>"+name+"</h1><h3>"+SMC[0]+"</h3>"+SMC[3]+""+SMC[2]+"</div>"; var movie=SMC[1]; coments.push(movie); usepan.push(m); mkname.push(name); var mak=layer.bindPopup(coment); M_info.innerHTML+=coment; mak.name=name; M_Icon(count,movie,mak); count++; } //console.log(haru); //alert(coment); //console.log(coments); }else{ var coment="<h1>"+name+"</h1><div>"+tose+"</div>"; var mak=layer.bindPopup(coment); M_info.innerHTML+=coment; } } /* if (color=="Red" && type=="Point" && katati==""){ mak.setIcon(r_Icon); }else if (color=="Yellow" && type=="Point" || color=="Gold" && type=="Point" ){ mak.setIcon(y_Icon); }else if (color=="lightpink" && type=="Point" || color=="LightPink" && type=="Point"){ mak.setIcon(lp_Icon); }else if (color=="lime" && type=="Point" || color=="Lime" && type=="Point"){ mak.setIcon(lime_Icon); }else if (color=="DarkSlateGray" && type=="Point" || color=="darkslategray" && type=="Point" ){ mak.setIcon(DSG_Icon); }else if (katati=="Drop"){ mak.setIcon(hinanjo); } */ if(season=="Spring" || season=="spring"){ haru.addLayer(mak); }else if(season=="Summar" || season=="summar"){ //console.log(layer); natu.addLayer(mak); //console.log(m); }else if(season=="Fall" || season=="fall"){ akii.addLayer(mak); }else{ huyu.addLayer(mak); } //natu.addTo(mymap); if (type=="LineString"){ for(i=0; i<m.length; i++){ //alert(m[i]); kasyo.push(m[i]); naiyo.push(tose); ten.push(mak); //alert(naiyo); }; // LineStringでの座標を細かくとる }else { kasyo.push(m); //この関数外に変数を持って行くために使用 naiyo.push(tose); ten.push(mak); } } }) }); var gpxLayer = omnivore.geojson('kisetuwake.geojson', null, customLayer).on('ready', function() { Boxes(mymap,usepan,ten,mkname); }).addTo(mymap); //geojsonファイルを読みだし //レイヤー変更オプション var late_season={'SP':haru,'SM':natu,'FA':akii,'WI':huyu}; var C_layers=L.control.layers(baseLayers,late_season).addTo(mymap); var sidebar = L.control.sidebar('sidebar').addTo(mymap); var vits=C_layers.getContainer(); var l_info=document.getElementById("layer"); l_info.appendChild(vits); console.log(l_info); //console.log();