//var ltlg= [38.72859248614108,139.82239320874214]; var ltlg=[38.963092, 139.986249]; //var ltlg=[39.019707,139.909754]; //マップの中心にする座標 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 pp=document.getElementById('Point'+pan); var lat=Icon[pan][1],lng=Icon[pan][0]; var pan_to=[lat,lng]; map.flyTo(pan_to); //sidebar.open('home') //location.href="#"+pp;//"#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, "<br><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 haru=L.layerGroup([]); var natu=L.layerGroup([]); var akii=L.layerGroup([]); var huyu=L.layerGroup([]); //var time= document.getElementById("time"); var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile}; //レイヤーの内容 var kasyo=[],naiyo=[],iro=[],k_type=[],ten=[],coments=[],usepan=[],mkname=[]; var nakami=[]; function M_Icon(CON,MOV,mcon,pan){ if(MOV==undefined){ var mkdIcon=L.divIcon({ html:'<img id='+CON+' src="../src/leaflet/images/marker-icon.png">', className:'', //if not class name marker has select box iconAnchor: [22, 40], popupAnchor: [-10,-30], shadowUrl: '../../src/leaflet/images/marker-shadow.png', shadowSize: [68, 95], shadowAnchor: [22, 94], tooltipAnchor:[0,-20] }); }else{ var mkdIcon=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 iconAnchor: [22, 40], popupAnchor: [-10,-30], shadowUrl: '../../src/leaflet/images/marker-shadow.png', shadowSize: [68, 95], shadowAnchor: [22, 94] }); } 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); point_id="Point"+val.id; var target =document.getElementById(point_id); target.style.backgroundColor="red"; location.href="#"+point_id; }); }; 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 (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, pos=geomet.coordinates; k_type.push(type); if(type=="Point"){ var Point_id=type+count; if(tose==""){ var coment='<div><h1>'+name+'</h1><h3>'+tose+'</h3></div>'; usepan.push(pos); var mak=layer.bindPopup(coment); 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]; coments.push(movie); usepan.push(pos); mkname.push(name); var mak=layer.bindPopup(coment); M_info.innerHTML+=coment; mak.name=name; M_Icon(count,movie,mak,pos); count++; mak_click(mak,mymap); } }else{ var coment='<div id='+Point_id+' class="mak"><h1>'+name+'</h1><h3>'+tose+'</h3></div>'; //movie=undefined; var mak=layer.bindPopup(coment); M_info.innerHTML+=coment; M_Icon(count,movie,mak,pos); count++; } layer.bindTooltip(name); /* 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<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); } } }) }); //./flood-caution.geojson //./wakimizu/yuza_wakimizu.geojson var gpxLayer = omnivore.geojson('./dentou.geojson', null, customLayer).on('ready', function() { Boxes(mymap,usepan,ten,mkname); sidebar.on('content', function () { //location. //location.href="#Point1" }); });//.addTo(mymap); var mymap= L.map("mymap", { layers: [osmTile,haru,natu,akii,huyu], //最初に指定するタイルレイヤー center: ltlg, zoom: 12 //,scrollWheelZoom: false //中心座標とズームレベルとマウスのホイールでのズームをしないよう設定 }); gpxLayer.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',{ //position: 'left' }).addTo(mymap); //var vits=C_layers.getContainer(); var l_info=document.getElementById("mak_info"); //l_info.appendChild(vits); 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"); }); sidebar.on("closing", function(e){ var fa_s=document.getElementById("FaW"); fa_s.classList.add("fa-map-marker"); fa_s.classList.remove("fa-times"); //color治したい //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("deruyo"); // }; // aps.addEventListener("click",aaaa,false);