//Leafletでの処理 function init(){ //地図を表示するdiv要素のidを設定 var map = L.map('playmap'); //座標の指定 var mpoint = [38.8933, 139.8191]; //地図の中心とズームレベルを指定 map.setView(mpoint, 17); //表示するタイルレイヤのURLとAttributionコントロールの記述を設定して、地図に追加する L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' }).addTo(map); // 外部のGeoJSONファイルを取得する fetch("tohokukoeki.geojson") .then(response => response.json()) // GeoJSONを地図に追加する .then(data => { L.geoJSON(data, { pointToLayer: function(feature, latlng) { let name = feature.properties.name; return L.marker(latlng, {title: name}); }, // ポップアップを表示する onEachFeature: function(j, layer){ let p = j.properties; // 地点の名前や概要を取り出す if (p) { let name = p.name; let description = p.description; let address = p.address; let url = p.url; let image = "image/" + p.image; let quiz = p.quiz; let choiceA = p.choiceA; let choiceB = p.choiceB; let choiceC = p.choiceC; let answer = p.answer; let stampid = p.stampid; let stampsrc = p.stampsrc; // ポップアップに表示させる let popup = "<h3>" + name + "</h3><p>" + description + "</p><p>" + address + "</p><a href='" + url + "'>" + url + "</a>" layer.bindPopup(popup) .addEventListener("click", () => { clickMarker(image, quiz, choiceA, choiceB, choiceC, answer, stampid, stampsrc); }); } } }).addTo(map); }); /* 種類ごとのレイヤー切り替え var pointA = [38.891, 139.824]; var pointB = [38.890, 139.822]; var pointC = [38.892, 139.826]; var foodLayer = L.marker(pointA); var placeLayer = L.marker(pointB); var natureLayer = L.marker(pointC); var ovlLayers = {'食 ': foodLayer, '場所': placeLayer, '自然': natureLayer}; L.control.layers(null, ovlLayers).addTo(map); */ } //マーカーの情報に切り替わる function clickMarker(image, quiz, a, b, c, ans, id, src){ document.getElementById("image").setAttribute("src", image); document.getElementById("quiz").innerHTML = quiz; document.getElementById("a").innerHTML = a; document.getElementById("b").innerHTML = b; document.getElementById("c").innerHTML = c; document.getElementById("result").innerHTML = " "; document.getElementById("answer").innerHTML = ans; document.getElementById("stamp-id").innerHTML = id; document.getElementById("stamp-src").innerHTML = src; } //解答の判定 function judgeAnswer(abc) { var select = document.getElementById(abc).value; var answer = document.getElementById("answer"); var stampId = document.getElementById("stamp-id"); var stampSrc = document.getElementById("stamp-src"); if (select == answer.textContent) { document.getElementById("result").innerHTML = "正解!!"; document.getElementById("result").setAttribute("class", "correct"); document.getElementById(stampId.textContent).setAttribute("src", "image/"+stampSrc.textContent); } else { document.getElementById("result").innerHTML = "不正解…"; document.getElementById("result").setAttribute("class", "incorrect"); } } //選択肢がクリックされたときの処理 document.addEventListener("DOMContentLoaded", () => { document.getElementById("a").addEventListener("click", () => { judgeAnswer("a"); }); document.getElementById("b").addEventListener("click", () => { judgeAnswer("b"); }); document.getElementById("c").addEventListener("click", () => { judgeAnswer("c"); }); });