Mercurial > hgrepos > hgweb.cgi > skipweb
annotate shuzai/trad/new_late_geojson.js @ 3832:c7bc1cd00174
scrollzoom_on
| author | natto <earlgray_spring@aol.com> |
|---|---|
| date | Tue, 05 Feb 2019 14:00:12 +0900 |
| parents | df9e13061fbe |
| children |
| rev | line source |
|---|---|
| 3769 | 1 //var ltlg= [38.72859248614108,139.82239320874214]; |
|
3803
b9eca1af5ecb
changed new_late_geojson.js(changed start point)
Fumiya SATO <c116092@h.koeki-u.ac.jp>
parents:
3773
diff
changeset
|
2 var ltlg=[38.922825, 139.848747]; |
| 3769 | 3 //var ltlg=[39.019707,139.909754]; |
| 4 //マップの中心にする座標 | |
| 5 | |
| 6 var M_info=document.getElementById("mak_info"); | |
| 7 | |
| 8 function Boxes(map,Icon,tenten,Name,id){ | |
| 9 | |
| 10 map.on('popupopen', function(o) { | |
| 11 var S_width=window.innerWidth; | |
| 12 var S_height=window.innerHeight; | |
| 13 | |
| 14 if(S_width<S_height){ | |
| 15 var M_width=S_width; | |
| 16 var M_height=S_height/2; | |
| 17 }else{ | |
| 18 var M_width=S_width/2; | |
| 19 var M_height=S_height-200; | |
| 20 }; | |
| 21 | |
| 22 //console.log(Name[0]); | |
| 23 //console.log(o); | |
| 24 | |
| 25 $(function(){ | |
| 26 var num=[]; | |
| 27 $('.movie').colorbox({ | |
| 28 onOpen:function(){ | |
| 29 map.closePopup(); | |
| 30 }, | |
| 31 onLoad:function(){ | |
|
3807
617c529dfabb
changed new_late_geojson.js(zoom level 10)
Fumiya SATO <c116092@h.koeki-u.ac.jp>
parents:
3806
diff
changeset
|
32 map.setZoom(17); |
| 3769 | 33 num.push($.colorbox.element().context.attributes.id.nodeValue); |
| 34 }, | |
| 35 iframe: true, | |
| 36 // titleで祭の名前とレストランの名前を表示 | |
| 37 width:M_width, | |
| 38 height: M_height, | |
| 39 rel:'movie', //同じクラス名のものをスライド表示 | |
| 40 //width:s_width-100, | |
| 41 onClosed:function(){ | |
| 42 var pan=num[num.length-1]; | |
| 43 var pp=document.getElementById('Point'+pan); | |
| 44 var lat=Icon[pan][1],lng=Icon[pan][0]; | |
| 45 var pan_to=[lat,lng]; | |
| 46 map.flyTo(pan_to); | |
| 47 //sidebar.open('home') | |
| 48 //location.href="#"+pp;//"#Point"+pan; | |
| 49 } | |
| 50 | |
| 51 }); | |
| 52 | |
| 53 }); | |
| 54 }); | |
| 55 }; | |
| 56 | |
| 57 function Set_Contents(str){ | |
| 58 if(str.match(/{{{/)){ | |
| 59 var Mov_star=str.indexOf("{{{"); | |
| 60 var Mov_end=str.indexOf("}}}"); | |
| 61 var Mov=str.slice(Mov_star,Mov_end+3); //Mov_endがある位置を出すと}が含まれないため +3 している | |
| 62 str=str.replace(Mov,""); | |
| 63 Mov=Mov.replace(/{{{/g, ""); | |
| 64 Mov=Mov.replace(/}}}/g, ""); | |
| 65 }else{ | |
| 66 Mov=""; | |
| 67 } | |
| 68 var Pic=str.replace(/{{/g, "<img width='400' length='200' src=\""); | |
| 69 Pic=Pic.replace(/}}/g, "\">"); | |
| 70 var Link=Pic.replace(/\[\[/g, "<br><a href=\"") | |
| 71 Link=Link.replace(/\|/g, "\">"); | |
| 72 Link=Link.replace(/]]/g, "</a>"); | |
| 73 | |
| 74 return [Link,Mov]; | |
| 75 }; | |
| 76 | |
| 77 | |
| 78 var osmTile = | |
| 79 L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| 80 attribution: | |
| 81 '© <a href="http://osm.org/copyright">OpenStreetMap</a> \ | |
| 82 contributors' | |
| 83 }); | |
| 84 | |
| 85 var gsiTile = | |
| 86 L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { | |
| 87 attribution: | |
| 88 '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>' | |
| 89 }); | |
| 90 | |
| 91 var haru=L.layerGroup([]); | |
| 92 var natu=L.layerGroup([]); | |
| 93 var akii=L.layerGroup([]); | |
| 94 var huyu=L.layerGroup([]); | |
| 95 | |
| 96 //var time= document.getElementById("time"); | |
| 97 | |
| 98 var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile}; | |
| 99 //レイヤーの内容 | |
| 100 | |
| 101 var kasyo=[],naiyo=[],iro=[],k_type=[],ten=[],coments=[],usepan=[],mkname=[]; | |
| 102 var nakami=[]; | |
| 103 | |
| 104 function M_Icon(CON,MOV,mcon,pan){ | |
| 105 if(MOV==undefined){ | |
| 106 var mkdIcon=L.divIcon({ | |
| 3773 | 107 html:'<img id='+CON+' src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/images/marker-icon.png">', |
| 3769 | 108 className:'', |
| 109 //if not class name marker has select box | |
| 110 iconAnchor: [22, 40], | |
| 111 popupAnchor: [-10,-30], | |
| 3773 | 112 shadowUrl: 'https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/images/marker-shadow.png', |
| 3769 | 113 shadowSize: [68, 95], |
| 114 shadowAnchor: [22, 94], | |
| 115 tooltipAnchor:[0,-20] | |
| 116 }); | |
| 117 }else{ | |
| 118 var mkdIcon=L.divIcon({ | |
| 3773 | 119 html:'<img id='+CON+' src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/images/marker-icon.png" href='+MOV+' class="movie">', |
| 3769 | 120 className:'Movie', |
| 121 //if not class name marker has select box | |
| 122 iconAnchor: [22, 40], | |
| 123 popupAnchor: [-10,-30], | |
| 3773 | 124 shadowUrl: 'https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/images/marker-shadow.png', |
| 3769 | 125 shadowSize: [68, 95], |
| 126 shadowAnchor: [22, 94] | |
| 127 }); | |
| 128 } | |
| 129 mcon.setIcon(mkdIcon); | |
| 130 }; | |
| 131 | |
| 132 function mak_click(marker,map){ | |
| 133 marker.on('click', function(o){ | |
| 134 //map.closePopup(); | |
| 135 var pt=L.latLng(o.latlng); | |
| 136 map.flyTo(pt); | |
| 137 sidebar.open("home"); | |
| 138 id=o.originalEvent.explicitOriginalTarget.attributes.id; | |
| 139 val=document.getElementById(id.value); | |
| 140 point_id="Point"+val.id; | |
| 141 var target =document.getElementById(point_id); | |
| 142 target.style.backgroundColor="red"; | |
| 143 location.href="#"+point_id; | |
| 144 }); | |
| 145 }; | |
| 146 | |
| 147 var count=0; | |
| 148 | |
| 149 var customLayer=L.geoJson(null,{ | |
| 150 style: function(feature) { | |
| 151 if (feature.properties._storage_options && feature.properties._storage_options.color){ | |
| 152 switch (feature.properties._storage_options.color) { | |
| 153 //alert(feature.properties._storege_opions); | |
| 154 case 'Red': return {color: "red"}; | |
| 155 case 'brown': return {color: "brown"}; | |
| 156 case 'Cyan': return {color: "cyan"}; | |
| 157 case 'lime': return {color: "lime"}; | |
| 158 } | |
| 159 } | |
| 160 if (feature.properties._storage_options && feature.properties._storage_options.weight){ | |
| 161 var hutosa=feature.properties._storage_options.weight; | |
| 162 return {weight: hutosa}; | |
| 163 } | |
| 164 if (feature.properties._storage_options && feature.properties._storage_options.dashArray){ | |
| 165 var hakai=feature.properties._storage_options.dashArray; | |
| 166 return {dashArray: hakai}; | |
| 167 } | |
| 168 }, | |
| 169 onEachFeature: (function (feature, layer){ | |
| 170 var propert= feature.properties, geomet=feature.geometry; | |
| 171 // 予めfeature.propertisをletで宣言。(varでも可) | |
| 172 if (propert && geomet) { | |
| 173 if (propert.name){ | |
| 174 var name=propert.name | |
| 175 } else { | |
| 176 var name=""; | |
| 177 } | |
| 178 if (propert.description){ | |
| 179 var tose=propert.description; | |
| 180 } else { | |
| 181 var tose=""; | |
| 182 } | |
| 183 if (propert._storage_options){ | |
| 184 if (propert._storage_options.color){ | |
| 185 var color=propert._storage_options.color; | |
| 186 iro.push(color); | |
| 187 }else { | |
| 188 color=""; | |
| 189 iro.push(color); | |
| 190 } | |
| 191 if (propert._storage_options.iconClass){ | |
| 192 var katati=propert._storage_options.iconClass; | |
| 193 }else { | |
| 194 katati=""; | |
| 195 } | |
| 196 | |
| 197 } | |
| 198 | |
| 199 var season=propert.Season; | |
| 200 var period=propert.period; | |
| 201 var address=propert.address; | |
| 202 var type=geomet.type, pos=geomet.coordinates; | |
| 203 k_type.push(type); | |
| 204 | |
| 205 | |
| 206 if(type=="Point"){ | |
| 207 var Point_id=type+count; | |
| 208 if(tose==""){ | |
| 209 var coment='<div><h1>'+name+'</h1><h3>'+tose+'</h3></div>'; | |
| 210 usepan.push(pos); | |
| 211 var mak=layer.bindPopup(coment); | |
| 212 count++; | |
| 213 }else{ | |
| 214 | |
| 215 var SMC=Set_Contents(tose); | |
| 216 var coment='<div id="'+Point_id+'" class="mak"><h1>'+name+'</h1><h3>'+SMC[0]+'</h3></div>'; | |
| 217 var movie=SMC[1]; | |
| 218 coments.push(movie); | |
| 219 usepan.push(pos); | |
| 220 mkname.push(name); | |
| 221 var mak=layer.bindPopup(coment); | |
| 222 M_info.innerHTML+=coment; | |
| 223 mak.name=name; | |
| 224 M_Icon(count,movie,mak,pos); | |
| 225 count++; | |
| 226 mak_click(mak,mymap); | |
| 227 } | |
| 228 }else{ | |
| 229 | |
| 230 var coment='<div id='+Point_id+' class="mak"><h1>'+name+'</h1><h3>'+tose+'</h3></div>'; | |
| 231 //movie=undefined; | |
| 232 var mak=layer.bindPopup(coment); | |
| 233 M_info.innerHTML+=coment; | |
| 234 M_Icon(count,movie,mak,pos); | |
| 235 count++; | |
| 236 } | |
| 237 | |
| 238 layer.bindTooltip(name); | |
| 239 | |
| 240 | |
| 241 /* | |
| 242 if (color=="Red" && type=="Point" && katati==""){ | |
| 243 mak.setIcon(r_Icon); | |
| 244 }else if (color=="Yellow" && type=="Point" || color=="Gold" && type=="Point" ){ | |
| 245 mak.setIcon(y_Icon); | |
| 246 }else if (color=="lightpink" && type=="Point" || color=="LightPink" && type=="Point"){ | |
| 247 mak.setIcon(lp_Icon); | |
| 248 }else if (color=="lime" && type=="Point" || color=="Lime" && type=="Point"){ | |
| 249 mak.setIcon(lime_Icon); | |
| 250 }else if (color=="DarkSlateGray" && type=="Point" || color=="darkslategray" && type=="Point" ){ | |
| 251 mak.setIcon(DSG_Icon); | |
| 252 }else if (katati=="Drop"){ | |
| 253 mak.setIcon(hinanjo); | |
| 254 } | |
| 255 */ | |
| 256 | |
| 257 if(season=="Spring" || season=="spring"){ | |
| 258 haru.addLayer(mak); | |
| 259 }else if(season=="Summar" || season=="summar"){ | |
| 260 //console.log(layer); | |
| 261 natu.addLayer(mak); | |
| 262 //console.log(m); | |
| 263 }else if(season=="Fall" || season=="fall"){ | |
| 264 akii.addLayer(mak); | |
| 265 }else{ | |
| 266 huyu.addLayer(mak); | |
| 267 } | |
| 268 | |
| 269 //natu.addTo(mymap); | |
| 270 if (type=="LineString"){ | |
| 271 for(i=0; i<pos.length; i++){ | |
| 272 //alert(m[i]); | |
| 273 kasyo.push(pos[i]); | |
| 274 naiyo.push(tose); | |
| 275 ten.push(mak); | |
| 276 //alert(naiyo); | |
| 277 }; | |
| 278 // LineStringでの座標を細かくとる | |
| 279 }else { | |
| 280 kasyo.push(pos); //この関数外に変数を持って行くために使用 | |
| 281 naiyo.push(tose); | |
| 282 ten.push(mak); | |
| 283 } | |
| 284 | |
| 285 | |
| 286 } | |
| 287 }) | |
| 288 }); | |
| 289 | |
| 290 //./flood-caution.geojson | |
| 291 | |
| 292 //./wakimizu/yuza_wakimizu.geojson | |
| 293 | |
| 294 var gpxLayer = omnivore.geojson('./dentou.geojson', null, customLayer).on('ready', function() { | |
| 295 | |
| 296 Boxes(mymap,usepan,ten,mkname); | |
| 297 sidebar.on('content', function () { | |
| 298 //location. | |
| 299 //location.href="#Point1" | |
| 300 }); | |
| 301 | |
| 302 });//.addTo(mymap); | |
| 303 | |
| 304 var mymap= L.map("mymap", { | |
| 305 layers: [osmTile,haru,natu,akii,huyu], //最初に指定するタイルレイヤー | |
| 3832 | 306 center: ltlg, zoom: 11 , minZoom:11, //scrollWheelZoom: false |
| 3769 | 307 }); |
| 308 | |
| 309 gpxLayer.addTo(mymap); | |
| 310 | |
| 311 //geojsonファイルを読みだし | |
| 312 | |
| 313 | |
| 314 //レイヤー変更オプション | |
| 315 var late_season={'SP':haru,'SM':natu,'FA':akii,'WI':huyu}; | |
| 316 var C_layers=L.control.layers(baseLayers,late_season).addTo(mymap); | |
| 317 | |
| 318 var sidebar = L.control.sidebar('sidebar',{ | |
| 319 //position: 'left' | |
| 320 }).addTo(mymap); | |
| 321 | |
| 322 //var vits=C_layers.getContainer(); | |
| 323 var l_info=document.getElementById("mak_info"); | |
| 324 //l_info.appendChild(vits); | |
| 325 | |
| 326 | |
| 327 mymap.on("click", function(){ | |
| 328 sidebar.close(); | |
| 329 }); | |
| 330 | |
| 331 sidebar.on('content', function(e) { | |
| 332 var fa_s=document.getElementById("FaW"); | |
| 333 fa_s.classList.remove("fa-map-marker"); | |
| 334 fa_s.classList.add("fa-times"); | |
| 335 }); | |
| 336 | |
| 337 sidebar.on("closing", function(e){ | |
| 338 var fa_s=document.getElementById("FaW"); | |
| 339 fa_s.classList.add("fa-map-marker"); | |
| 340 fa_s.classList.remove("fa-times"); | |
| 341 //color治したい | |
| 342 //var fa_ss=document.getElementsByClassName("active"); | |
| 343 //var fa_icon=fa_ss[0].firstChild.childNodes[0].classList[1]; | |
| 344 //var fa_ss=document.getElementsByClassName(fa_icon); | |
| 345 //var iti=document.getElementById("home"); | |
| 346 //console.log("pop"); | |
| 347 }); | |
| 348 | |
| 349 // var ati=document.getElementById("aps"); | |
| 350 | |
| 351 // function aaaa(){ | |
| 352 // alert("deruyo"); | |
| 353 // }; | |
| 354 | |
| 355 // aps.addEventListener("click",aaaa,false); |
