//var ltlg= [38.72859248614108,139.82239320874214]; var ltlg=[38.96715, 139.966164]; //マップの中心にする座標 var M_info=document.getElementById("mak_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); location.href="#Point"+pan; } }); }); }); }; function Set_Contents(str){ if(str.match(/{{{/)){ var Mov_star=str.indexOf("{{{"); var Mov_end=str.indexOf("}}}"); var Mov=str.slice(Mov_star,Mov_end+3); //Mov_endがある位置を出すと}が含まれないため +3 している str=str.replace(Mov,""); Mov=Mov.replace(/{{{/g, ""); Mov=Mov.replace(/}}}/g, ""); }else{ Mov=""; } var Pic=str.replace(/{{/g, "<img width='400' length='200' src=\""); Pic=Pic.replace(/}}/g, "\">"); var Link=Pic.replace(/\[\[/g, "<a href=\"") Link=Link.replace(/\|/g, "\">"); Link=Link.replace(/]]/g, "</a>"); return [Link,Mov]; }; 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 mymap= L.map("mymap", { layers: [osmTile], //最初に指定するタイルレイヤー center: ltlg, zoom: 14, scrollWheelZoom: false //中心座標とズームレベルとマウスのホイールでのズームをしないよう設定 }); //var time= document.getElementById("time"); var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile}; //レイヤーの内容 var kasyo=[],naiyo=[],iro=[],k_type=[],ten=[],coments=[],usepan=[],mkname=[]; var nakami=[]; /* var mkdIcon = L.icon.mapkey({ //htmlCode:'<a href="https://www.google.com"></a>', icon:"drop", color:'white', background:col, size:30 }); */ //src='+icon+' function M_Icon(CON,MOV,mcon,icon,col,ic_col,rad){ if(MOV==""){ var mkdIcon = L.icon.mapkey({ htmlCode:'<span id='+CON+' class="'+icon+'"></span>', //htmlCode:'<span id='+CON+' class="fa fa-map-marker"></span>', color:ic_col, background:col, size:25, borderRadius:rad }); }else{ var mkdIcon = L.icon.mapkey({ htmlCode:'<span id='+CON+' class="'+icon+' movie" href='+MOV+'></span>', //htmlCode:'<span id='+CON+' class="fa fa-map-marker"></span>', color:ic_col, background:col, size:25, additionalCSS:"border:4px solid #aa3838;" }); } mcon.setIcon(mkdIcon); }; function mak_click(marker,map){ marker.on('click', function(o){ map.closePopup(); var pt=L.latLng(o.latlng); map.flyTo(pt); sidebar.open("home"); id=o.originalEvent.explicitOriginalTarget.attributes.id; val=document.getElementById(id.value); location.href="#Point"+val.id; }); }; var count=0; var customLayer=L.geoJson(null,{ style: function(feature) { //alert(feature.properties._storage_options.color); if (feature.properties._storage_options && feature.properties._storage_options.color){ var colors=feature.properties._storage_options.color; switch (feature.properties._storage_options.color) { case colors: return {color:colors}; } } 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 (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; if(katati=="Default"){ katati=""; } }else { katati=""; } } var type=geomet.type, pos=geomet.coordinates,st_o=propert._storage_options; k_type.push(type); if(type=="Point"){ if (color=="red" && katati=="" || color=="Red" && katati==""){ Icon_img="fa fa-exclamation-triangle"; type_name="死亡事故現場"; layer.bindTooltip(type_name); Ic_color="white"; radius=0.1; }else if (color=="Yellow" || color=="Gold" ){ Icon_img="fa fa-exclamation-circle"; type_name="事故現場"; layer.bindTooltip(type_name); color="Gold"; Ic_color="black"; radius=5; //Icon_img="forbidden"; }else if (color=="lightpink" || color=="LightPink"){ Icon_img="fa fa-history"; type_name="歴史的な事物"; layer.bindTooltip(type_name); Ic_color="black"; radius=20; }else if (color=="lime" || color=="Lime"){ Icon_img="fa fa-tint"; type_name="湧き水"; Ic_color="black"; layer.bindTooltip(type_name); radius=20; }else if (color=="DarkSlateGray" || color=="darkslategray"){ Icon_img="mki mki-waterwork"; type_name="水管理"; layer.bindTooltip(type_name); Ic_color="white"; radius=20; }else if(katati=="Drop"){ Icon_img="mki mki-shelter"; type_name="避難所"; layer.bindTooltip(type_name); color="green"; Ic_color="white"; radius=10; }else if(color=="LawnGreen"){ Icon_img="fa fa-play-circle"; type_name="水路動画関連"; layer.bindTooltip(type_name); Ic_color="black"; radius=20; }else{ Icon_img="fa fa-exclamation"; type_name="危険箇所"; layer.bindTooltip(type_name); Ic_color="white"; color="blue"; radius=20; //Icon_img="https://www.yatex.org/gitbucket/natto/leaflet/raw/master/images/marker-icon.png"; } var Point_id=type+count; if(tose==""){ var coment='<div><h1>'+name+'</h1><h3>'+tose+'</h3></div>'; movie=""; usepan.push(pos); mkname.push(name); var mak=layer.bindPopup(coment); M_Icon(count,movie,mak,Icon_img,color,Ic_color,radius); count++; }else{ var SMC=Set_Contents(tose); var coment='<div id="'+Point_id+'" class="mak"><h1>'+name+'</h1><h3>'+SMC[0]+'</h3></div>'; var movie=SMC[1]; usepan.push(pos); mkname.push(name); var mak=layer.bindPopup(coment); M_info.innerHTML+=coment; mak.name=name; M_Icon(count,movie,mak,Icon_img,color,Ic_color,radius); count++; mak_click(mak,mymap); } }else{ var coment='<div><h1>'+name+'</h1><h3>'+tose+'</h3></div>'; usepan.push(pos); var line=layer.bindPopup(coment); count++; } //natu.addTo(mymap); if (type=="LineString"){ for(i=0; i<pos.length; i++){ //alert(m[i]); kasyo.push(pos[i]); naiyo.push(tose); ten.push(mak); //alert(naiyo); }; // LineStringでの座標を細かくとる }else { kasyo.push(pos); //この関数外に変数を持って行くために使用 naiyo.push(tose); ten.push(mak); } } }) }); var gpxLayer = omnivore.geojson('suiro.geojson', null, customLayer).on('ready', function() { Boxes(mymap,usepan,ten,mkname); sidebar.on('content', function () { //location. //location.href="#Point1" }); }).addTo(mymap); //geojsonファイルを読みだし //レイヤー変更オプション var C_layers=L.control.layers(baseLayers).addTo(mymap); var sidebar = L.control.sidebar('sidebar',{ position: 'left' }).addTo(mymap); //var vits=C_layers.getContainer(); var l_info=document.getElementById("mak_info"); //l_info.appendChild(vits)x; //console.log(l_info); //console.log(); mymap.on("click", function(){ sidebar.close(); }); sidebar.on('content', function(e) { var fa_s=document.getElementById("FaW"); fa_s.classList.remove("fa-map-marker"); fa_s.classList.add("fa-times"); //console.log(fa_s); //sidebar open }); sidebar.on("closing", function(e){ var fa_s=document.getElementById("FaW"); fa_s.classList.add("fa-map-marker"); fa_s.classList.remove("fa-times"); //var fa_ss=document.getElementsByClassName("active"); //var fa_icon=fa_ss[0].firstChild.childNodes[0].classList[1]; //var fa_ss=document.getElementsByClassName(fa_icon); //var iti=document.getElementById("home"); //console.log("pop"); }); // var ati=document.getElementById("aps"); // function aaaa(){ // //alert("unko"); // }; // aps.addEventListener("click",aaaa,false); /* マーカーに対する変更 サイドバーのスマホ表示の仕方 レイヤーコントロールボタンをサイドバー内に */