diff --git a/dbl.js b/dbl.js index af4bff3..98a4672 100644 --- a/dbl.js +++ b/dbl.js @@ -1,14 +1,12 @@ function dblSize() { - var pElements = document.queySelectorAll("p"); - if (pElements.Lenght == 0) { - alert("p要素はこの文章にはありません。"); - } else { - for (let i of pElements) { - i.style.fontSize = "200%"; - } + var p_elm = document.querySelectorAll("p"); + if (p_elm.length == 0) { + } else { + for (let i of p_elm) { + i.style.fontSize = "200%"; } + } } -function clickIT() { - document.addEventListener("click", dblSize, false); -} -document.addEventListener("DOMContentLoaded", clickIT, false); +document.addEventListener("DOMContentLoaded", function(e){ + document.body.addEventListener("click", dblSize); +}); diff --git a/map/domon/domon.html b/map/domon/domon.html index 93e22e2..18ade7c 100644 --- a/map/domon/domon.html +++ b/map/domon/domon.html @@ -3,19 +3,21 @@ マップ: My First Map! - + + + + -

My First Map!

- - +

酒田駅から大学までのマップ

+ diff --git a/map/domon/domon.js b/map/domon/domon.js index 2288f1d..f2ef604 100644 --- a/map/domon/domon.js +++ b/map/domon/domon.js @@ -1,6 +1,6 @@ /* domon.js - 北緯38.891度, 東経139.824度, ズームレベル16 で地図表示 */ -var mymap = L.map("mymap").setView([38.891, 139.824], 16); +var mymap = L.map("mymap").setView([38.908985,139.835916], 14); L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' diff --git a/map/domon/domon2.html b/map/domon/domon2.html deleted file mode 100644 index 93e22e2..0000000 --- a/map/domon/domon2.html +++ /dev/null @@ -1,21 +0,0 @@ - - - -マップ: My First Map! - - - - - - - -

My First Map!

- - - - diff --git a/map/domon/domon2.js b/map/domon/domon2.js deleted file mode 100644 index 02afa97..0000000 --- a/map/domon/domon2.js +++ /dev/null @@ -1,7 +0,0 @@ -/* domon.js - 北緯38.891度, 東経139.824度, ズームレベル16 で地図表示 */ - -var mymap = L.map("mymap").setView([38.891, 139.824], 16); -L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { - attribution: - '国土地理院' -}).addTo(mymap); diff --git a/map/domon/mymap.js b/map/domon/mymap.js new file mode 100644 index 0000000..08d68bc --- /dev/null +++ b/map/domon/mymap.js @@ -0,0 +1,63 @@ +(() => { +function MyMap(id) { + var mymap; + function init(id) { + mymap = L.map(id).setView([38.901220,139.831367], 14); + L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: + '© OpenStreetMap \ + contributors' + }).addTo(mymap); + } + function mapObjs() { + var pl = [ // Polyline: 連続線分 + [38.921748,139.845850], + [38.920964,139.843383], + [38.921807,139.839048], + [38.919962,139.838684], + [38.912391,139.834929], + [38.908717,139.835830], + [38.898665,139.818921], + [38.896653,139.819951], + [38.893981,139.820015] + ]; + var plProp = { // polylineのプロパティを定義 + color: "red", // 線分の色 + opacity: 0.4, // 線分の透明度 + weight: 9 // 線分の太さ + }; + var plobj = L.polyline(pl, plProp).addTo(mymap); + + var pg = [ // Polygon: ポリゴン + [38.894548,139.818513], + [38.894715,139.819887], + [38.892093,139.820187], + [38.892027,139.818299], // 終点と始点は連結される + ]; + var pgOpt = { // polygonに与えるオプション + color: "blue", // 線分の色 + fillColor: "pink", // 塗りつぶし部分の色 + fillOpacity: 0.2 // 塗りつぶし部分の透明度 + }; + var pgobj = L.polygon(pg, pgOpt).addTo(mymap); + + var marker1 = pl[0], marker2 = pg[0]; // polylineとpolygon各々の始点 + var m1opt = {title: "酒田駅"}, m2opt = {title: "大学"}; + var m1 = L.marker(marker1, m1opt).addTo(mymap); + var m2 = L.marker(marker2, m2opt).addTo(mymap); + + + /* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */ + plobj.bindPopup("酒田駅から大学までの道ですよ!"); + pgobj.bindPopup("東北公益文科大学ですよ!"); + m1.bindPopup("スタート!").openPopup(); + // 次のようにあらかじめ1つのポップアップを開いておくことも可能 + m2.bindPopup("大学についた!"); + } + // ↓初期化時にすぐ実行される + init(id); + mapObjs(); +}; +document.addEventListener("DOMContentLoaded", function(){ + MyMap("mymap");}, false); +})();