diff --git a/gitbucket_rensyuu.css b/gitbucket_rensyuu.css new file mode 100644 index 0000000..4263d16 --- /dev/null +++ b/gitbucket_rensyuu.css @@ -0,0 +1,241 @@ +/* 全体のスタイル */ + body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + background-color: #7fffd4; /* 淡い紫 */ + color: #000000; /* 濃い紫 */ + } + + h1 { + font-family: 'Playfair Display', serif; + font-size: 32px; + text-align: center; + margin: 0; + padding: 20px; + background-color: #32cd32; /* 紫の背景 */ + color: white; + font-weight: 700; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + letter-spacing: 1px; + border-bottom: 4px solid #4b0082; /* 深い紫のアクセント */ + } + + a{ + color: #ff5757; + } + + .modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.8); + } + + .modal-content { + margin: auto; + display: block; + max-width: 90%; + max-height: 90%; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + animation: fadeIn 0.3s; + } + + .close { + position: absolute; + top: 10px; + right: 25px; + color: white; + font-size: 35px; + font-weight: bold; + cursor: pointer; + } + + .close:hover, + .close:focus { + color: #ccc; + text-decoration: none; + } + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + /* ポップアップのカスタムスタイル */ + .popup-content { + width: 250px; /* 幅を広く設定 */ + height: auto; + padding: 15px; + font-size: 18px; /* フォントサイズを大きく */ + line-height: 1.5; + } + + .popup-content h3 { + font-size: 30px; + margin-bottom: 10px; + color: #6a0dad; + } + + .popup-content p { + margin: 15px 0; + color: #333; + } + + .popup-content button { + padding: 15px 25px; + font-size: 20px; + background-color: #6a0dad; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + } + + .popup-content button:hover { + background-color: #4b0082; + } + + /* ポップアップの全体サイズを大きく */ + .leaflet-popup-content-wrapper { + width: auto !important; /* ポップアップの幅 */ + height: auto !important; /* 高さは内容に合わせて自動 */ + } + + .leaflet-popup-tip { + display: none; /* ポップアップの三角形を非表示にする */ + } + + /* 検索欄 */ + .search-container { + display: flex; + justify-content: center; + margin: 20px 0; + } + + .search-container input[type="text"] { + width: 80%; + max-width: 600px; + padding: 15px; + font-size: 18px; + border: 2px solid #9b59b6; /* 紫色の枠線 */ + border-radius: 25px; + background-color: white; + color: #3e004f; /* 濃い紫 */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: border-color 0.3s ease, box-shadow 0.3s ease; + } + + .search-container input[type="text"]:focus { + border-color: #6a0dad; /* フォーカス時の枠線 */ + box-shadow: 0 4px 8px rgba(106, 13, 173, 0.4); /* フォーカス時の影 */ + outline: none; + } + + /* マップエリア */ + #map { + height: 500px; + margin: 20px; + border-radius: 10px; + border: 2px solid #9b59b6; /* 紫色の枠線 */ + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + } + + /* お気に入りリンク */ + .favorites-link, .back-link { + display: block; + text-align: center; + margin: 20px auto; + font-size: 25px; + color: #6a0dad; + text-decoration: none; + font-weight: bold; + } + + .favorites-link:hover, .back-link:hover { + text-decoration: underline; + color: #4b0082; /* ホバー時の濃い紫 */ + } + + + /* お気に入りリスト */ + #favorites-list { + margin: 20px auto; + font-size: 20px; + padding: 0; + list-style: none; + max-width: 600px; + } + + #favorites-list li { + background-color: #ffffff; /* 白背景 */ + color: #3e004f; /* 濃い紫 */ + border: 1px solid #9b59b6; /* 紫色の枠線 */ + border-radius: 10px; + padding: 10px 15px; + margin: 10px 0; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + #favorites-list li button { + padding: 10px 10px; + font-size: 30px; + background-color: #6a0dad; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + #favorites-list li button:hover { + background-color: #4b0082; + } + + /* Leafletズームコントロールのカスタマイズ */ + .leaflet-control-zoom { + transform: scale(1.5); /* サイズを縮小 (デフォルトの80%) */ + right: 10px; /* 位置を少し右に調整 (必要に応じて変更) */ + bottom: -300px; /* 位置を少し上に調整 (必要に応じて変更) */ + } + + .leaflet-control-zoom a { + width: 30px; /* ボタンの幅を調整 */ + height: 30px; /* ボタンの高さを調整 */ + font-size: 18px; /* ボタン内の文字サイズを調整 */ + line-height: 30px; /* ボタン内のテキストの位置を中央に揃える */ + border-radius: 5px; /* ボタンに角丸を付ける */ + background-color: #0078d7; /* ボタンの背景色を変更 */ + color: white; /* テキストの色 */ + transition: background-color 0.3s ease; + } + + .leaflet-control-zoom a:hover { + background-color: #005a9e; /* ホバー時の背景色 */ + } + + /* レスポンシブ対応 */ + @media (max-width: 768px) { + #map { + height: 600px; + } + + .search-container input[type="text"] { + font-size: 16px; + padding: 12px; + } + } diff --git a/gitbucket_rensyuu.csv b/gitbucket_rensyuu.csv new file mode 100644 index 0000000..9cf0890 --- /dev/null +++ b/gitbucket_rensyuu.csv @@ -0,0 +1,4 @@ +name,latitude,longitude,description1,description2,description3,img1,img2,icon +東北公益文科大学,38.894544,139.819597,看板が青かったです！,日差しがあって気持ちよかったです！,緑が豊かでした！,images/daigaku.jpg,,images/daigaku_toudai.png +名前2,38.8544515,139.8989159,説明1,説明2,説明3(説明2,説明3もない場合は削除する),images/sample1.jpeg,images/sample2.jpeg(画像が一枚のみの場合は削除する),, +名前3,38.655288,139.909914,説明1,説明2,説明3(説明2,説明3もない場合は削除する),images/sample1.jpeg,images/sample2.jpeg(画像が一枚のみの場合は削除する),, diff --git a/gitbucket_rensyuu.html b/gitbucket_rensyuu.html new file mode 100644 index 0000000..96dc350 --- /dev/null +++ b/gitbucket_rensyuu.html @@ -0,0 +1,33 @@ + + + + + GitBucket 練習マップ + + + + + + + + + + +

GitBucket 練習マップ

+ +
+ + + + + + + + + + + + diff --git a/gitbucket_rensyuu.js b/gitbucket_rensyuu.js new file mode 100644 index 0000000..d1ab086 --- /dev/null +++ b/gitbucket_rensyuu.js @@ -0,0 +1,79 @@ +document.addEventListener('DOMContentLoaded', () => { + const map = L.map('map').setView([38.893567, 139.818873], 13); + + // OSMタイル + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors' + }).addTo(map); + + // CSV読み込み + Papa.parse("gitbucket_rensyuu.csv", { + download: true, + header: true, + complete: function(results) { + results.data.forEach(row => { + if (row.latitude && row.longitude) { + const lat = parseFloat(row.latitude); + const lng = parseFloat(row.longitude); + + // 説明文（空欄は無視） + const descriptions = [row.description1, row.description2, row.description3] + .filter(desc => desc && desc.trim() !== "") + .map(desc => `

${desc}

`) + .join(""); + + // 画像処理（空欄は無視、クリックでモーダル） + let images = ""; + if (row.img1 && row.img1.trim() !== "") { + images += ``; + } + if (row.img2 && row.img2.trim() !== "") { + images += ``; + } + + // icon処理（空欄ならデフォルトを使用） + const iconUrl = row.icon && row.icon.trim() !== "" ? row.icon : "images/default_icon.png"; + const markerIcon = L.icon({ + iconUrl: iconUrl, + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -32] + }); + + // ポップアップ内容 + const popupContent = ` +
+

${row.name}

+ ${descriptions} + ${images} +
+ `; + + // マーカー追加（カスタムアイコン付き） + L.marker([lat, lng], { icon: markerIcon }).addTo(map).bindPopup(popupContent); + } + }); + } + }); + + // モーダル開閉 + window.openModal = function(imageSrc) { + const modal = document.getElementById('image-modal'); + const modalImage = document.getElementById('modal-image'); + modalImage.src = imageSrc; + modal.style.display = 'block'; + }; + + window.closeModal = function() { + const modal = document.getElementById('image-modal'); + modal.style.display = 'none'; + }; + + // モーダル外クリックで閉じる + window.onclick = function(event) { + const modal = document.getElementById('image-modal'); + if (event.target === modal) { + modal.style.display = 'none'; + } + }; +}); diff --git a/rensyuu.css b/rensyuu.css deleted file mode 100644 index e2f5048..0000000 --- a/rensyuu.css +++ /dev/null @@ -1,27 +0,0 @@ -#map { - height: 75vw; - width: 90vw; - margin: auto; -} - -.leaflet-popup-content { - max-width: auto !important; /* ポップアップ全体の最大幅 */ - max-height: 300px; - font-size: 14px; - line-height: 1.0; - overflow-y: auto; /* 縦スクロールを有効にする */ -} - -.popup-content { - display: flex; - flex-direction: column; - text-align: center; -} - -.popup-content img { - max-width: 300px; - height: auto; - margin-top: 5px; - border-radius: 6px; -} - diff --git a/rensyuu.csv b/rensyuu.csv deleted file mode 100644 index 6d0ba81..0000000 --- a/rensyuu.csv +++ /dev/null @@ -1,3 +0,0 @@ -name,description,Latitude,Longitude -203教室,"大学 -{{https://kd2.koeki-prj.org/index.php/apps/files_sharing/publicpreview/HnEAiNFYNzXnCJ3?file=/2025-naoki/%E7%B7%A8%E9%9B%86%E5%BE%8C/%E6%9D%B1%E5%8C%97%E5%85%AC%E7%9B%8A%E6%96%87%E7%A7%91%E5%A4%A7%E5%AD%A6/daigaku.jpeg&fileId=2826675&x=1280&y=720&a=true&etag=1d144061aa4a138cd6e8e455df9c50fc}}",38.893567,139.818873 diff --git a/rensyuu.html b/rensyuu.html deleted file mode 100644 index c4b6a01..0000000 --- a/rensyuu.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - CSVマップ表示 - - - - - - - - - - -
- - - - - - - - - - - - - - diff --git a/rensyuu.js b/rensyuu.js deleted file mode 100644 index d9b55d0..0000000 --- a/rensyuu.js +++ /dev/null @@ -1,40 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - const map = L.map('map').setView([38.893567, 139.818873], 16); - - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors' - }).addTo(map); - - Papa.parse("rensyuu.csv", { - download: true, - header: true, - complete: function(results) { - results.data.forEach(row => { - if (row.Latitude && row.Longitude) { - const lat = parseFloat(row.Latitude); - const lng = parseFloat(row.Longitude); - - // すべての {{URL}} を抽出 - const matches = row.description.match(/\{\{(.+?)\}\}/g) || []; - const imageUrls = matches.map(m => m.replace(/\{\{|\}\}/g, '')); - - // 複数の タグに変換 - const imgTags = imageUrls.map(url => `画像`).join(""); - - // 画像部分（{{...}}）を除いたテキスト - const text = row.description.replace(/\{\{.+?\}\}/g, "").trim(); - - const popupContent = ` -
-

${row.name}

-

${text}

- ${imgTags} -
- `; - - L.marker([lat, lng]).addTo(map).bindPopup(popupContent); - } - }); - } - }); -});