");
@@ -90,37 +99,44 @@
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=[];
+var nakami=[];
-function M_Icon(CON,MOV,mcon){
- var rensyu=L.divIcon({
- html:'
',
- 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);
+function M_Icon(CON,MOV,mcon,pan){
+ if(MOV==undefined){
+ var mkdIcon=L.divIcon({
+ html:'
',
+ 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:'',
+ 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);
};
var count=0;
+
var customLayer=L.geoJson(null,{
style: function(feature) {
if (feature.properties._storage_options && feature.properties._storage_options.color){
@@ -141,7 +157,7 @@
return {dashArray: hakai};
}
},
- onEachFeature: (function unji(feature, layer){
+ onEachFeature: (function (feature, layer){
var propert= feature.properties, geomet=feature.geometry;
// 予めfeature.propertisをletで宣言。(varでも可)
if (propert && geomet) {
@@ -170,7 +186,7 @@
}
}
-
+
var season=propert.Season;
var period=propert.period;
var address=propert.address;
@@ -180,40 +196,55 @@
//alert(k_type);
- if (propert){
- if(type=="Point"){
+
+ if(type=="Point"){
var Point_id=type+count;
var SMC=Set_Contents(tose);
- //alert(SMC[1]);
+
if(SMC[1]==undefined){
- var coment=""+name+"
"+SMC[0]+"
";
- count++;
+ console.log(SMC);
+ var coment=''+name+'
'+SMC[0]+'
'+SMC[2]+'';
+ movie=undefined;
coments.push(coment);
usepan.push(m);
mkname.push(name);
var mak=layer.bindPopup(coment);
- }else{
- var coment=""+name+"
"+SMC[0]+"
"+SMC[3]+""+SMC[2]+"";
+ M_info.innerHTML+=coment;
+ M_Icon(count,movie,mak,m);
+ count++;
+ }else{
+ var coment=''+name+'
'+SMC[0]+'
'+SMC[3]+''+SMC[2]+'';
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);
+ M_Icon(count,movie,mak,m);
count++;
}
-
}else{
- var coment=""+name+"
"+tose+"
";
+
+ var coment=''+name+'
'+tose+'
';
+ movie=undefined;
var mak=layer.bindPopup(coment);
+ M_info.innerHTML+=coment;
+ M_Icon(count,movie,mak,m);
+ count++;
}
- }
-
-
-
+ layer.bindTooltip(name);
+ mak.on('click', function(o){
+ mymap.closePopup();
+ sidebar.open("home");
+ id=o.originalEvent.explicitOriginalTarget.attributes.id;
+ val=document.getElementById(id.value);
+ location.href="#Point"+val.id;
+ });
+
+
+
/*
if (color=="Red" && type=="Point" && katati==""){
mak.setIcon(r_Icon);
@@ -229,7 +260,6 @@
mak.setIcon(hinanjo);
}
*/
-
if(season=="Spring" || season=="spring"){
haru.addLayer(mak);
@@ -265,17 +295,90 @@
});
-// var gpxLayer = omnivore.geojson('https://www.yatex.org/gitbucket/KoekiBrandingPJ/CMDSmap/raw/master/storymap/kisetuwake.geojson', null, customLayer).on('ready', function() {
-//保留
-var gpxLayer = omnivore.geojson('kisetuwake.geojson', null, customLayer).on('ready', function() {
- Boxes(mymap,usepan,ten,mkname);
+var gpxLayer = omnivore.geojson('../viewerdb/geojson/test.geojson', null, customLayer).on('ready', function() {
-}).addTo(mymap);
+ 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: 17 //,scrollWheelZoom: false
+ //中心座標とズームレベルとマウスのホイールでのズームをしないよう設定
+});
+
+gpxLayer.addTo(mymap);
+
+// var gpxLayer = omnivore.geojson('yuza_wakimizu.geojson', null, customLayer).on('ready', function() {
+
+// Boxes(mymap,usepan,ten,mkname);
+// sidebar.on('content', function () {
+// //location.
+// //location.href="#Point1"
+// });
+
+// }).addTo(mymap);
//geojsonファイルを読みだし
//レイヤー変更オプション
var late_season={'SP':haru,'SM':natu,'FA':akii,'WI':huyu};
-L.control.layers(baseLayers,late_season).addTo(mymap);
+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);
+//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);
+/*
+
+マーカーに対する変更
+サイドバーのスマホ表示の仕方
+レイヤーコントロールボタンをサイドバー内に
+
+*/
+