diff --git a/suiro/catgps.js b/suiro/catgps.js
index e7a34ba..37f5043 100644
--- a/suiro/catgps.js
+++ b/suiro/catgps.js
@@ -22,9 +22,9 @@
     
     var point = L.marker(mymap.getCenter());
     //
-    var stop = document.getElementById("gps_off");
-   
-    var gps = document.getElementById("gps_on");
+    document.getElementById("switch1").checked=false;
+    var gps = document.getElementById("off");
+        
     var nowTrying = null;
     var doflag=true;
     
@@ -63,6 +63,10 @@
     function countDown(){
 	if (doflag){
 	    alert("周りに注意して使用して下さい");
+	    gps.id="on";
+	    //console.log(gps.id);
+	    var stop = document.getElementById("on");
+	    stop.addEventListener("click", stopCountDown, false);	    
 	    //alert(""+naiyo[0]+"")
 	    tryGetGPS();
 	} else{
@@ -74,6 +78,9 @@
 
     function stopCountDown() {
 	doflag=false;
+	stop.id="off";
+	gps.addEventListener("click", countDown, false);
+	//console.log(stop.id);
 	//countD.textContent = "stop!";
      	//ser.innerHTML = "startボタンをもう一度押すと始まります";
     }
@@ -127,6 +134,6 @@
     }
     
     gps.addEventListener("click", countDown, false);
-    stop.addEventListener("click", stopCountDown, false);
+    
 };
 document.addEventListener("DOMContentLoaded", game, false);
diff --git a/suiro/load_date.js b/suiro/load_date.js
index 1237eb7..8012ee7 100644
--- a/suiro/load_date.js
+++ b/suiro/load_date.js
@@ -3,6 +3,54 @@
 //マップの中心にする座標
 
 var M_info=document.getElementById("mak_info");
+var select_btm=document.getElementById("info_btm");
+var cicle=document.getElementsByClassName("maru");
+var maks=document.getElementsByClassName("mki-intext");
+
+
+function changeTab(){
+    //var targetid =it_a[0].href.substring(it_a[0].href.indexOf('#')+1,it_a[0].href.length);
+    //console.log(a);
+    //console.log(b);
+    if (this.href==undefined){
+	var num=this.children[0].id;
+	var point_num="Point"+num;
+	var Points=document.getElementById(point_num);
+	console.log(this);
+	if (Points==null){}
+	else{
+	    targetid=point_num;
+	}
+    }else{
+	var targetid =this.href.substring(this.href.indexOf('#')+1,this.href.length);
+	
+    }
+    if(targetid==undefined){}
+    else{
+	for(i=1;i<side_id;i++){
+	    var id_s="side"+i;
+	    var side_ids=document.getElementById(id_s);
+	    var P_ids=side_ids.getElementsByTagName("div");
+	    var iii=P_ids[0].id;
+	    
+	    if(iii==targetid){
+		P_ids[0].style.display = "block";	    
+	    }else{
+		P_ids[0].style.display = "none";
+	    }
+	}
+    }
+    
+return false;
+};
+
+function click_EV(Points,move){
+    location.href="#"+Points;
+    //これができるようにする
+    {mymap.flyTo(move,17)};
+    //mymap.openPopup()};    
+};
+
 
 function Boxes(map,Icon,tenten,Name,id){
     
@@ -25,7 +73,7 @@
 	    var num=[];
 	    $('.movie').colorbox({
 		onOpen:function(){	    
-		    map.closePopup();  
+		    //map.closePopup();  
 		},
 		onLoad:function(){
 	    	    map.setZoom(17);		    
@@ -136,7 +184,8 @@
 
 function mak_click(marker,map){
     marker.on('click', function(o){
-	map.closePopup();
+	//console.log(o);
+	//marker.openTooltip();
 	var pt=L.latLng(o.latlng);
 	map.flyTo(pt);
 	sidebar.open("home");
@@ -146,7 +195,7 @@
     });
 };
 
-var count=0;
+var count=0,side_id=1;
 
 
 var customLayer=L.geoJson(null,{
@@ -215,7 +264,7 @@
 		 }else if (color=="Yellow" || color=="Gold" ){
 		     Icon_img="fa fa-exclamation-circle";
 		     type_name="事故現場";
-		     layer.bindTooltip(type_name);
+		     layer.bindTooltip(type_name);		     
 		     color="Gold";
 		     Ic_color="black";
 		     radius=5;
@@ -258,31 +307,39 @@
 		     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);
+		    layer.bindPopup(coment);
+		    M_Icon(count,movie,layer,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);
+		    //layer.bindPopup(coment);
+		    //<span class="info_type">'+tobas+'</span>
+		    layer.bindPopup(type_name);
+		    //onclick="click_EV('+Point_id+',['+pos[1]+','+pos[0]+'])";
+		    var tobas='<a class="maru" href="#'+Point_id+'">'+side_id+'</a>';
+		    //cicle[side_id-1].style.color="red";
+		    var coment='<div id="side'+side_id+'"><div id="'+Point_id+'" class="mak"><h1>'+name+'</h1><h3>'+SMC[0]+'</h3></div></div>';
 		    M_info.innerHTML+=coment;
-		    mak.name=name;
-		    M_Icon(count,movie,mak,Icon_img,color,Ic_color,radius);
+		    //var ids=document.getElementById(Point_id);
+		    select_btm.innerHTML+=tobas;
+		    layer.name=name;
+		    M_Icon(count,movie,layer,Icon_img,color,Ic_color,radius);
 		    count++;
-		    mak_click(mak,mymap);
+		    side_id++;
+		    mak_click(layer,mymap);
 		}
 	    }else{
 		var coment='<div><h1>'+name+'</h1><h3>'+tose+'</h3></div>';
@@ -299,14 +356,14 @@
 		    //alert(m[i]);
 		    kasyo.push(pos[i]);
 		    naiyo.push(tose);
-		    ten.push(mak);
+		    ten.push(layer);
 		    //alert(naiyo);
 		};
 		// LineStringでの座標を細かくとる
 	    }else {
 		kasyo.push(pos); //この関数外に変数を持って行くために使用
 		naiyo.push(tose);
-		ten.push(mak);
+		ten.push(layer);
 	    }
 	    
 	    
@@ -315,12 +372,51 @@
 });
 
 var gpxLayer = omnivore.geojson('suiro.geojson', null, customLayer).on('ready', function() {  
+
     
+    
+    //var aaa=document.getElementsByClassName("maru");
+    //console.log(aaa);
     Boxes(mymap,usepan,ten,mkname);
+    var unko=[],anko=[];
+    for(i=0;i<usepan.length;i++){
+	var tne=ten[i]._latlngs;
+	//console.log(tne.length);
+	if(ten[i].length==2){// && usepan[i][0].length==undefined){
+	    unko.push(tne);
+	    anko.push(usepan[i]);
+	}
+
+    }
+    
+    for(i=0;i<cicle.length;i++){
+	console.log(unko[i]);
+	console.log(anko[i]);
+	//aaa[i].onclick=changeTab;
+	// for(i=1;i<side_id;i++){
+	// 	var iii=document.getElementById("info_btm");
+	// 	var id_s="side"+i;
+	// 	var side_ids=document.getElementById(id_s);
+	//var unko=side_ids;//.getElementsByTagName("div");
+	//console.log(unko);
+	// var pok=side_ids.getElementsByTagName("a");
+	// var targetid = pok[0].href.substring(pok[0].href.indexOf('#')+1,pok[0].href.length);
+	// var mk_id=M_info.getElementsByTagName("div");
+	cicle[i].onclick=changeTab;
+	
+    };
+
+    for(i=0;i<maks.length;i++){
+	maks[i].onclick=changeTab;
+    };
+    
     sidebar.on('content', function () {
 	//location.
-	 //location.href="#Point1"
+	//location.href="#Point1"
      });
+
+    cicle[0].onclick();
+    
     
 }).addTo(mymap);
 
@@ -336,7 +432,7 @@
 
 
 //var vits=C_layers.getContainer();
-var l_info=document.getElementById("mak_info");
+//var l_info=document.getElementById("mak_info");
 //l_info.appendChild(vits)x;
 //console.log(l_info);
 
@@ -346,7 +442,11 @@
     sidebar.close();
 });
 
+
+
 sidebar.on('content', function(e) {
+    var select_btm=document.getElementById("info_btm");
+    select_btm.style.position="fixed";
     var fa_s=document.getElementById("FaW");
     fa_s.classList.remove("fa-map-marker");
     fa_s.classList.add("fa-times");
@@ -363,9 +463,12 @@
     //var fa_ss=document.getElementsByClassName(fa_icon);
     //var iti=document.getElementById("home");
     //console.log("pop");
+    var select_btm=document.getElementById("info_btm");
+    select_btm.style.position="absolute";
 });
 
-// var ati=document.getElementById("aps");
+
+
 
 // function aaaa(){
 //     //alert("unko");
diff --git a/suiro/map.css b/suiro/map.css
new file mode 100644
index 0000000..9a6b0d2
--- /dev/null
+++ b/suiro/map.css
@@ -0,0 +1,108 @@
+body {padding: 0; margin: 0;}
+div#mymap {width: 100vw; height: 100vh; margin: 0 auto;}
+.lorem {font-style: italic; color: #AAA;}
+
+#sidebar{top:100;
+background-color:red;}
+
+.sidebar-tabs{
+
+}
+
+#info_btm{
+//position:absolute;
+bottom:1em;
+background-color:lime;
+overflow:scroll;
+width:30%;
+opacity:0.8;
+}
+
+.maru{
+background-color:white;
+border-radius:50%;
+padding:0px 5px 0px 5px;
+border:2px;
+margin:5px;
+opacity:1.0;
+}
+
+.info_type .maru{
+background-color:white;
+font-size:small;
+}
+
+#aa{
+background-color:white;
+}
+
+
+
+//.sidebar-header{position:fixed}
+//.leaflet-control-zoom{padding-left:40px}
+//.leaflet-control-layers{z-index:10000000000000000000000000000}
+
+
+ /* === ボタンを表示するエリア ============================== */
+#switchArea {
+  line-height    : 32px;                /* 1行の高さ          */
+  letter-spacing : 0;                   /* 文字間             */
+  text-align     : center;              /* 文字位置は中央     */
+  font-size      : 13px;                /* 文字サイズ         */
+
+  position       : relative;            /* 親要素が基点       */
+  margin         : auto;                /* 中央寄せ           */
+  width          : 69px;               /* ボタンの横幅       */
+  background     : #fff;                /* デフォルト背景色   */
+}
+
+ /* === チェックボックス ==================================== */
+#switchArea input[type="checkbox"] {
+  display        : none;            /* チェックボックス非表示 */
+}
+
+ /* === チェックボックスのラベル（標準） ==================== */
+#switchArea label {
+  display        : block;               /* ボックス要素に変更 */
+  box-sizing     : border-box;          /* 枠線を含んだサイズ */
+  height         : 32px;                /* ボタンの高さ       */
+  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
+  border-radius  : 16px;                /* 角丸               */
+}
+
+ /* === チェックボックスのラベル（ONのとき） ================ */
+#switchArea input[type="checkbox"]:checked +label {
+  border-color   : #78bd78;             /* 選択タブの枠線     */
+}
+
+ /* === 表示する文字（標準） ================================ */
+#switchArea label span:after{
+  content        : "OFF";               /* 表示する文字       */
+  padding        : 0 0 0 19px;          /* 表示する位置       */
+  color          : #999999;             /* 文字色             */
+}
+
+ /* === 表示する文字（ONのとき） ============================ */
+#switchArea  input[type="checkbox"]:checked + label span:after{
+  content        : "ON";                /* 表示する文字       */
+  padding        : 0 19px 0 0;          /* 表示する位置       */
+  color          : #78bd78;             /* 文字色             */
+}
+
+ /* === 丸部分のSTYLE（標準） =============================== */
+#switchArea #swImg {
+  position       : absolute;            /* 親要素からの相対位置*/
+  width          : 24px;                /* 丸の横幅           */
+  height         : 24px;                /* 丸の高さ           */
+  background     : #999999;             /* カーソルタブの背景 */
+  top            : 4px;                 /* 親要素からの位置   */
+  left           : 4px;                 /* 親要素からの位置   */
+  border-radius  : 12px;                /* 角丸               */
+  transition     : .2s;                 /* 滑らか変化         */
+}
+
+ /* === 丸部分のSTYLE（ONのとき） =========================== */
+#switchArea input[type="checkbox"]:checked ~ #swImg {
+  transform      : translateX(37px);    /* 丸も右へ移動       */
+  background     : #78bd78;             /* カーソルタブの背景 */
+}
diff --git a/suiro/map.css~ b/suiro/map.css~
new file mode 100644
index 0000000..da26d87
--- /dev/null
+++ b/suiro/map.css~
@@ -0,0 +1,44 @@
+body {padding: 0; margin: 0;}
+div#mymap {width: 100vw; height: 100vh; margin: 0 auto;}
+.lorem {font-style: italic; color: #AAA;}
+
+#sidebar{top:100;
+background-color:red;}
+
+.sidebar-tabs{
+
+}
+
+#info_btm{
+//position:absolute;
+bottom:1em;
+background-color:lime;
+overflow:scroll;
+width:30%;
+opacity:0.8;
+}
+
+.maru{
+background-color:white;
+border-radius:50%;
+padding:0px 5px 0px 5px;
+border:2px;
+margin:5px;
+opacity:1.0;
+}
+
+.info_type .maru{
+background-color:white;
+text-size:small;
+}
+
+#Point0{
+width:100%;
+height:1000px;
+}
+#aa{
+background-color:white;
+}
+//.sidebar-header{position:fixed}
+//.leaflet-control-zoom{padding-left:40px}
+//.leaflet-control-layers{z-index:10000000000000000000000000000}
diff --git a/suiro/map.html b/suiro/map.html
index 0f8b917..58978d2 100644
--- a/suiro/map.html
+++ b/suiro/map.html
@@ -17,22 +17,7 @@
 <!-- <link rel="stylesheet" href="https://www.yatex.org/gitbucket/natto/leaflet_plugins/raw/master/mapkeys/dist/MapkeyIcons.css" /> -->
 <script src="https://www.yatex.org/gitbucket/natto/leaflet_plugins/raw/master/mapkeys/dist/L.Icon.Mapkey.js"></script>
 
-<style type="text/css">
-<!--
-body {padding: 0; margin: 0;}
-div#mymap {width: 100vw; height: 100vh; margin: 0 auto;}
-.lorem {font-style: italic; color: #AAA;}
-.sidebar{top:100;
-background-color:red;}
-.sidebar-pane{
-
-}
-
-//.sidebar-header{position:fixed}
-//.leaflet-control-zoom{padding-left:40px}
-//.leaflet-control-layers{z-index:10000000000000000000000000000}
--->
-</style>
+<link rel="stylesheet" href="./map.css">
 </head>
 
 <body>
@@ -43,8 +28,7 @@
         <div class="sidebar-tabs"> 
           <ul role="tablist">
             <li title="marker's infomation"><a href="#home" role="tab"><i id="FaW" class="fa fa-map-marker-alt"></i></a></li>
-            <li title="get your position"><a id="gps_on"><i id="FaW" class="fa fa-toggle-on"></i></a></li>
-	    <li title="remove your position"><a id="gps_off"><i id="FaW" class="fa fa-toggle-off"></i></a></li>
+            <li title="This map functions"><a href="#functions" role="tab"><i id="FaW" class="fas fa-wrench"></i></a></li>
 	    <li title="copyright"><a href="#copyright" role="tab"><i id="FaW" class="fa fa-copyright"></i></a></li>
           </ul>
         </div>
@@ -56,12 +40,27 @@
               <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>marker's infomation
             </h1>
 	    
-	    <div id="mak_info">
-	    </div>
-            
+	    <div id="mak_info"> </div>
+            <div id="info_btm"></div>
           </div>
+	  
+	  <div class="sidebar-pane" id="functions">
+	     <h1 class="sidebar-header">
+              <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>map function's
+             </h1>
+	     <table>
+	       <tr>
+	       <td>位置情報の取得:</td>
+	     <td><div id="switchArea"><div id="off">
+	       <input type="checkbox" id="switch1" >
+	       <label for="switch1"><span></span></label>
+	       <div id="swImg"></div>
+	       </div></div></td></tr>
 
-	  <div class="sidebar-pane" id="copyright">
+	     </table>
+	     
+	  </div>
+	    <div class="sidebar-pane" id="copyright">
             <h1 class="sidebar-header">
               <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>copy rights
             </h1>
@@ -80,7 +79,6 @@
 <div id="mymap" class="sidebar-map"></div>
 <script type="text/javascript" src="./load_date.js" charset="utf-8"></script>
 <script type="text/javascript" src="./catgps.js" charset="utf-8"></script>
-<!-- <script type="text/javascript" src="./mapkeys.js" charset="utf-8"></script> -->
-<!-- <script type="text/javascript" src="./Extramak.js" charset="utf-8"></script> -->
+
 </body>
 </html>