Mercurial > hgrepos > hgweb.cgi > skipweb

changeset 3769:1632ee516a51

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add map html&js
author natto <earlgray_spring@aol.com>
date Fri, 14 Dec 2018 14:49:12 +0900
parents 5452ea19c7ce
children 902a56be60b4
files shuzai/trad/index.html shuzai/trad/new_late_geojson.js
diffstat 2 files changed, 419 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/shuzai/trad/index.html	Fri Dec 14 14:49:12 2018 +0900
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<title>CMDSmap</title>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="stylesheet" href="../src/colorbox/example3/colorbox.css" />
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="../src/colorbox/jquery.colorbox-min.js"></script>
+<link rel="stylesheet" href="../src/leaflet/leaflet.css" />
+<script src="../src/leaflet/leaflet.js"></script>
+<script src="../src/leaflet/leaflet-sidebar.min.js"></script>
+<link rel="stylesheet" href="../src/leaflet/leaflet-sidebar.min.css" />
+<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+<script src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet-omnivore.min.js"></script>
+<!-- <script src="../src/leaflet/leaflet-omnivore.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-content{opacity:0.8}
+-->
+</style>
+</head>
+
+<body>
+<div id="sidebar" class="sidebar collapsed">
+  <!-- Nav tabs -->
+        <div class="sidebar-tabs">
+            <ul role="tablist">
+              <li><a href="#home" role="tab"><i id="FaW" class="fa fa-map-marker"></i></a></li>
+              
+            </ul>
+        </div>
+
+        <!-- Tab panes -->
+        <div class="sidebar-content">
+          <div class="sidebar-pane" id="home">
+            <h1 class="sidebar-header">
+              <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>marker's infomation
+            </h1>
+	    
+	    <div id="mak_info">
+	    </div>
+            
+          </div>
+	  
+          
+        </div>
+	<!--<div class="zoom-left"></div>-->
+</div>
+<div id="mymap" class="sidebar-map" ></div>
+
+<script type="text/javascript" src="./new_late_geojson.js" charset="utf-8"></script>
+
+</body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/shuzai/trad/new_late_geojson.js	Fri Dec 14 14:49:12 2018 +0900
@@ -0,0 +1,360 @@
+//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:
+	'&copy; <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);
+
+
+
+

yatex.org