//Leafletでの処理
function init(){
    //地図を表示するdiv要素のidを設定
    var map = L.map('mapcontainer');
    //座標の指定
    var mpoint = [38.5350, 139.8875];
    //マーカーのURL
    var markerIcon = "https://esm.sh/leaflet@1.9.2/dist/images/marker-icon.png";
    var markerIcon2x = "https://esm.sh/leaflet@1.9.2/dist/images/marker-icon-2x.png";
    var markerShadow = "https://esm.sh/leaflet@1.9.2/dist/images/marker-shadow.png";
    //マーカーの色の設定
    var purpleIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconAnchor: [12, 41],
        className: "icon-purple"
    });
    var redIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconAnchor: [12, 41],
        className: "icon-red"
    });
    //地図の中心とズームレベルを指定
    map.setView(mpoint, 10);
    //表示するタイルレイヤのURLとAttributionコントロールの記述を設定して、地図に追加する
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,'
    }).addTo(map);
    //地図に地点を表示する（asahi変数はtsuruoka-asahi.geojsonからロードした）
    L.marker([asahi["features"][0]["geometry"]["coordinates"][1], asahi["features"][0]["geometry"]["coordinates"][0]],
    {title: asahi["features"][0]["properties"]["name"]}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][0]["properties"]["html"],
        asahi["features"][0]["properties"]["quiz"],
        asahi["features"][0]["properties"]["choiceA"],
        asahi["features"][0]["properties"]["choiceB"],
        asahi["features"][0]["properties"]["choiceC"],
        asahi["features"][0]["properties"]["answer"],
        asahi["features"][0]["properties"]["name"],
        asahi["features"][0]["properties"]["description"]);
    });
    L.marker([asahi["features"][1]["geometry"]["coordinates"][1], asahi["features"][1]["geometry"]["coordinates"][0]],
    {title: asahi["features"][1]["properties"]["name"]}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][1]["properties"]["html"],
        asahi["features"][1]["properties"]["quiz"],
        asahi["features"][1]["properties"]["choiceA"],
        asahi["features"][1]["properties"]["choiceB"],
        asahi["features"][1]["properties"]["choiceC"],
        asahi["features"][1]["properties"]["answer"],
        asahi["features"][1]["properties"]["name"],
        asahi["features"][1]["properties"]["description"]);
    });
    L.marker([asahi["features"][2]["geometry"]["coordinates"][1], asahi["features"][2]["geometry"]["coordinates"][0]],
    {title: asahi["features"][2]["properties"]["name"], icon: purpleIcon}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][2]["properties"]["html"],
        asahi["features"][2]["properties"]["quiz"],
        asahi["features"][2]["properties"]["choiceA"],
        asahi["features"][2]["properties"]["choiceB"],
        asahi["features"][2]["properties"]["choiceC"],
        asahi["features"][2]["properties"]["answer"],
        asahi["features"][2]["properties"]["name"],
        asahi["features"][2]["properties"]["description"]);
    });
    L.marker([asahi["features"][3]["geometry"]["coordinates"][1], asahi["features"][3]["geometry"]["coordinates"][0]],
    {title: asahi["features"][3]["properties"]["name"]}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][3]["properties"]["html"],
        asahi["features"][3]["properties"]["quiz"],
        asahi["features"][3]["properties"]["choiceA"],
        asahi["features"][3]["properties"]["choiceB"],
        asahi["features"][3]["properties"]["choiceC"],
        asahi["features"][3]["properties"]["answer"],
        asahi["features"][3]["properties"]["name"],
        asahi["features"][3]["properties"]["description"]);
    });
    L.marker([asahi["features"][4]["geometry"]["coordinates"][1], asahi["features"][4]["geometry"]["coordinates"][0]],
    {title: asahi["features"][4]["properties"]["name"]}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][4]["properties"]["html"],
        asahi["features"][4]["properties"]["quiz"],
        asahi["features"][4]["properties"]["choiceA"],
        asahi["features"][4]["properties"]["choiceB"],
        asahi["features"][4]["properties"]["choiceC"],
        asahi["features"][4]["properties"]["answer"],
        asahi["features"][4]["properties"]["name"],
        asahi["features"][4]["properties"]["description"]);
    });
    L.marker([asahi["features"][5]["geometry"]["coordinates"][1], asahi["features"][5]["geometry"]["coordinates"][0]],
    {title: asahi["features"][5]["properties"]["name"]}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][5]["properties"]["html"],
        asahi["features"][5]["properties"]["quiz"],
        asahi["features"][5]["properties"]["choiceA"],
        asahi["features"][5]["properties"]["choiceB"],
        asahi["features"][5]["properties"]["choiceC"],
        asahi["features"][5]["properties"]["answer"],
        asahi["features"][5]["properties"]["name"],
        asahi["features"][5]["properties"]["description"]);
    });
    L.marker([asahi["features"][6]["geometry"]["coordinates"][1], asahi["features"][6]["geometry"]["coordinates"][0]],
    {title: asahi["features"][6]["properties"]["name"]}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][6]["properties"]["html"],
        asahi["features"][6]["properties"]["quiz"],
        asahi["features"][6]["properties"]["choiceA"],
        asahi["features"][6]["properties"]["choiceB"],
        asahi["features"][6]["properties"]["choiceC"],
        asahi["features"][6]["properties"]["answer"],
        asahi["features"][6]["properties"]["name"],
        asahi["features"][6]["properties"]["description"]);
    });
    L.marker([asahi["features"][7]["geometry"]["coordinates"][1], asahi["features"][7]["geometry"]["coordinates"][0]],
    {title: asahi["features"][7]["properties"]["name"]}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][7]["properties"]["html"],
        asahi["features"][7]["properties"]["quiz"],
        asahi["features"][7]["properties"]["choiceA"],
        asahi["features"][7]["properties"]["choiceB"],
        asahi["features"][7]["properties"]["choiceC"],
        asahi["features"][7]["properties"]["answer"],
        asahi["features"][7]["properties"]["name"],
        asahi["features"][7]["properties"]["description"]);
    });
    L.marker([asahi["features"][8]["geometry"]["coordinates"][1], asahi["features"][8]["geometry"]["coordinates"][0]],
    {title: asahi["features"][8]["properties"]["name"]}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][8]["properties"]["html"],
        asahi["features"][8]["properties"]["quiz"],
        asahi["features"][8]["properties"]["choiceA"],
        asahi["features"][8]["properties"]["choiceB"],
        asahi["features"][8]["properties"]["choiceC"],
        asahi["features"][8]["properties"]["answer"],
        asahi["features"][8]["properties"]["name"],
        asahi["features"][8]["properties"]["description"]);
    });
    L.marker([asahi["features"][9]["geometry"]["coordinates"][1], asahi["features"][9]["geometry"]["coordinates"][0]],
    {title: asahi["features"][9]["properties"]["name"], icon: redIcon}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][9]["properties"]["html"],
        asahi["features"][9]["properties"]["quiz"],
        asahi["features"][9]["properties"]["choiceA"],
        asahi["features"][9]["properties"]["choiceB"],
        asahi["features"][9]["properties"]["choiceC"],
        asahi["features"][9]["properties"]["answer"],
        asahi["features"][9]["properties"]["name"],
        asahi["features"][9]["properties"]["description"]);
    });
    L.marker([asahi["features"][10]["geometry"]["coordinates"][1], asahi["features"][10]["geometry"]["coordinates"][0]],
    {title: asahi["features"][10]["properties"]["name"]}).addTo(map).on("click", () => {
        clickMarker(asahi["features"][10]["properties"]["html"],
        asahi["features"][10]["properties"]["quiz"],
        asahi["features"][10]["properties"]["choiceA"],
        asahi["features"][10]["properties"]["choiceB"],
        asahi["features"][10]["properties"]["choiceC"],
        asahi["features"][10]["properties"]["answer"],
        asahi["features"][10]["properties"]["name"],
        asahi["features"][10]["properties"]["description"]);
    });
}
//マーカーの情報に切り替わる
function clickMarker(url, quiz, a, b, c, ans, pname, explain){
    document.getElementById("model").setAttribute("src", url);
    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("image1").setAttribute("src", "image/img.png");
    document.getElementById("pname").innerHTML = pname;
    document.getElementById("explain").innerHTML = explain;
}
//解答の判定
function judgeAnswer(abc) {
    var select = document.getElementById(abc).value;
    var answer = document.getElementById("answer");
    if (select == answer.textContent) {
        document.getElementById("result").innerHTML = "正解!!";
        document.getElementById("result").setAttribute("class", "correct");
        document.getElementById("image1").setAttribute("src", "image/koeki.png");
    } 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");
    });
});