diff --git a/annnaimap.css b/annnaimap.css
new file mode 100644
index 0000000..e2f5048
--- /dev/null
+++ b/annnaimap.css
@@ -0,0 +1,27 @@
+#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/annnaimap.html b/annnaimap.html
new file mode 100644
index 0000000..62058de
--- /dev/null
+++ b/annnaimap.html
@@ -0,0 +1,30 @@
+
+
+
+
+ CSVマップ表示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/annnaimap.js b/annnaimap.js
new file mode 100644
index 0000000..fdf406a
--- /dev/null
+++ b/annnaimap.js
@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const map = L.map('map').setView([38.884218,139.864883], 12);
+
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© OpenStreetMap contributors'
+ }).addTo(map);
+
+ Papa.parse("rensyuu3.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 = `
+
+ `;
+
+ L.marker([lat, lng]).addTo(map).bindPopup(popupContent);
+ }
+ });
+ }
+ });
+});
+