diff --git a/A2teamkadai/main.css b/A2teamkadai/main.css index 3e8a17d..0b3e3ee 100644 --- a/A2teamkadai/main.css +++ b/A2teamkadai/main.css @@ -49,9 +49,12 @@ margin: 0 auto; text-align: center; } +.icon-purple { + filter: hue-rotate(80deg); +} .icon-red { filter: hue-rotate(150deg); - } +} .quiz { margin: 20px auto; text-align: center; diff --git a/A2teamkadai/map.js b/A2teamkadai/map.js index 19da0f4..c684910 100644 --- a/A2teamkadai/map.js +++ b/A2teamkadai/map.js @@ -4,11 +4,22 @@ 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: "https://esm.sh/leaflet@1.9.2/dist/images/marker-icon.png", - iconRetinaUrl: "https://esm.sh/leaflet@1.9.2/dist/images/marker-icon-2x.png", - shadowUrl: "https://esm.sh/leaflet@1.9.2/dist/images/marker-shadow.png", + iconUrl: markerIcon, + iconRetinaUrl: markerIcon2x, + shadowUrl: markerShadow, iconAnchor: [12, 41], className: "icon-red" }); @@ -42,7 +53,7 @@ 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"]}).addTo(map).on("click", () => { + {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"], @@ -108,7 +119,7 @@ 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"], icon: redIcon}).addTo(map).on("click", () => { + {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"], @@ -119,7 +130,7 @@ 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"]}).addTo(map).on("click", () => { + {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"],