Update index.html

index.html

@@ -473,6 +473,12 @@
             <button id="save-map-btn" class="hacker-btn secondary">
                 <span class="glow-text">マップを保存</span>
             </button>
+            <button id="overwrite-current-map-btn" class="hacker-btn secondary disabled">
+                <span class="glow-text">(開いたマップ名)を置き換えて保存</span>
+            </button>
+            <button id="overwrite-map-btn" class="hacker-btn secondary">
+                <span class="glow-text">置き換えて保存</span>
+            </button>
             <button id="load-map-btn" class="hacker-btn secondary">
                 <span class="glow-text">マップを読み込み</span>
             </button>
@@ -580,6 +586,7 @@
         let nextMarkerEdit = false;
         let markers = [];
         let currentMapName = '';
+        let lastOpenedMapName = '';
 
         // 初期化処理
         window.onload = function() {
@@ -589,70 +596,72 @@
                 loading.style.display = 'none';
                 initMap();
                 updateEditNextMarkerButton();
+                updateOverwriteCurrentMapButton();
             }, 1000);
 
             // イベントリスナーの設定
             setupEventListeners();
         };
-// マップ初期化
-function initMap() {
-    map = L.map("map").setView([33.321797711641395, 130.52061378343208], 16);
-    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { 
-        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors' 
-    }).addTo(map);
 
-    // マーカーイベントの設定
-    map.on("click", function(e) {
-        if (nextMarkerEdit) {
-            return;
-        }
+        // マップ初期化
+        function initMap() {
+            map = L.map("map").setView([33.321797711641395, 130.52061378343208], 16);
+            L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { 
+                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors' 
+            }).addTo(map);
 
-        if (editingMarker) {
-            const latlng = e.latlng;
-            editingMarker.setLatLng([latlng.lat, latlng.lng]);
-            document.getElementById("marker-lat").value = latlng.lat;
-            document.getElementById("marker-lng").value = latlng.lng;
-            updatePreviewSize();
-            saveCurrentMapToStorage();
-        } else {
-            const latlng = e.latlng;
-            const marker = L.marker(latlng).addTo(map);
-            marker.bindPopup("新しいマーカーのポップアップ");
-            marker.bindTooltip("新しいマーカーのツールチップ");
-            
-            marker.on("mouseover", function() {
-                hoveredMarker = marker;
+            // マーカーイベントの設定
+            map.on("click", function(e) {
+                if (nextMarkerEdit) {
+                    return;
+                }
+
+                if (editingMarker) {
+                    const latlng = e.latlng;
+                    editingMarker.setLatLng([latlng.lat, latlng.lng]);
+                    document.getElementById("marker-lat").value = latlng.lat;
+                    document.getElementById("marker-lng").value = latlng.lng;
+                    updatePreviewSize();
+                    saveCurrentMapToStorage();
+                } else {
+                    const latlng = e.latlng;
+                    const marker = L.marker(latlng).addTo(map);
+                    marker.bindPopup("新しいマーカーのポップアップ");
+                    marker.bindTooltip("新しいマーカーのツールチップ");
+                    
+                    marker.on("mouseover", function() {
+                        hoveredMarker = marker;
+                    });
+                    
+                    marker.on("mouseout", function() {
+                        if (hoveredMarker === marker) {
+                            hoveredMarker = null;
+                        }
+                    });
+                    
+                    document.getElementById("marker-icon-url").value = "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png";
+                    openEditor(marker);
+                    saveCurrentMapToStorage();
+                }
             });
-            
-            marker.on("mouseout", function() {
-                if (hoveredMarker === marker) {
-                    hoveredMarker = null;
+
+            // マーカーが変更されたらボタンの状態を更新
+            map.on('layeradd layerremove', function() {
+                updateEditNextMarkerButton();
+            });
+
+            // ポップアップが開いた時の処理をここに移動
+            map.on('popupopen', function(e) {
+                const marker = e.popup._source;
+                if (nextMarkerEdit) {
+                    openEditor(marker);
+                    nextMarkerEdit = false;
+                    document.getElementById("edit-next-marker").textContent = "次のマーカーを編集";
+                    document.getElementById("edit-next-marker").classList.remove("danger");
+                    document.getElementById("edit-next-marker").classList.add("secondary");
                 }
             });
-            
-            document.getElementById("marker-icon-url").value = "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png";
-            openEditor(marker);
-            saveCurrentMapToStorage();
-        }
-    });
-
-    // マーカーが変更されたらボタンの状態を更新
-    map.on('layeradd layerremove', function() {
-        updateEditNextMarkerButton();
-    });
-
-    // ポップアップが開いた時の処理をここに移動
-    map.on('popupopen', function(e) {
-        const marker = e.popup._source;
-        if (nextMarkerEdit) {
-            openEditor(marker);
-            nextMarkerEdit = false;
-            document.getElementById("edit-next-marker").textContent = "次のマーカーを編集";
-            document.getElementById("edit-next-marker").classList.remove("danger");
-            document.getElementById("edit-next-marker").classList.add("secondary");
-        }
-    });
-}
+        }
 
         // イベントリスナーの設定
         function setupEventListeners() {
@@ -678,6 +687,8 @@ function initMap() {
             
             // マップ保存/読み込み関連
             document.getElementById("save-map-btn").addEventListener("click", showSaveMapModal);
+            document.getElementById("overwrite-current-map-btn").addEventListener("click", overwriteCurrentMap);
+            document.getElementById("overwrite-map-btn").addEventListener("click", showGalleryForOverwrite);
             document.getElementById("load-map-btn").addEventListener("click", showGallery);
             document.getElementById("confirm-save-map").addEventListener("click", saveCurrentMapWithName);
             document.getElementById("cancel-save-map").addEventListener("click", hideSaveMapModal);
@@ -691,6 +702,90 @@ function initMap() {
             document.getElementById("copyButton").onclick = copyHTMLToClipboard;
         }
 
+        // 現在のマップを置き換えボタンの状態を更新
+        function updateOverwriteCurrentMapButton() {
+            const btn = document.getElementById("overwrite-current-map-btn");
+            if (lastOpenedMapName) {
+                btn.classList.remove("disabled");
+                btn.innerHTML = `<span class="glow-text">「${lastOpenedMapName}」を置き換えて保存</span>`;
+            } else {
+                btn.classList.add("disabled");
+                btn.innerHTML = `<span class="glow-text">(開いたマップ名)を置き換えて保存</span>`;
+            }
+        }
+
+        // 現在開いているマップを置き換えて保存
+        function overwriteCurrentMap() {
+            if (!lastOpenedMapName) {
+                alert("置き換えるマップがありません");
+                return;
+            }
+
+            if (confirm(`マップ「${lastOpenedMapName}」を現在の内容で置き換えますか？`)) {
+                saveCurrentMapWithName(lastOpenedMapName);
+            }
+        }
+
+        // 置き換え用のマップギャラリーを表示
+        function showGalleryForOverwrite() {
+            const gallery = document.getElementById("gallery-container");
+            const mapList = document.getElementById("gallery-map-list");
+            mapList.innerHTML = "";
+
+            const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
+            
+            if (Object.keys(savedMaps).length === 0) {
+                mapList.innerHTML = '<div class="text-center py-4">保存されたマップはありません</div>';
+            } else {
+                for (const [name, data] of Object.entries(savedMaps)) {
+                    const mapItem = document.createElement("div");
+                    mapItem.className = "gallery-map-item";
+                    
+                    mapItem.innerHTML = `
+                        <div class="gallery-map-title">${name}</div>
+                        <div class="gallery-map-preview">
+                            マーカー数: ${data.markers.length}<br>
+                            中心座標: ${data.center.lat.toFixed(4)}, ${data.center.lng.toFixed(4)}<br>
+                            ズームレベル: ${data.zoom}
+                        </div>
+                        <div class="gallery-map-actions">
+                            <button class="hacker-btn gallery-btn load-map-btn" data-name="${name}">読み込み</button>
+                            <button class="hacker-btn gallery-btn secondary overwrite-map-btn" data-name="${name}">このマップを置き換え</button>
+                            <button class="hacker-btn gallery-btn danger delete-map-btn" data-name="${name}">削除</button>
+                        </div>
+                    `;
+                    
+                    mapList.appendChild(mapItem);
+                }
+
+                // イベントリスナーを追加
+                document.querySelectorAll('.load-map-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        loadMapFromGallery(this.dataset.name);
+                    });
+                });
+
+                document.querySelectorAll('.overwrite-map-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        if (confirm(`マップ「${this.dataset.name}」を現在の内容で置き換えますか？`)) {
+                            saveCurrentMapWithName(this.dataset.name);
+                            hideGallery();
+                        }
+                    });
+                });
+
+                document.querySelectorAll('.delete-map-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        if (confirm(`マップ「${this.dataset.name}」を削除しますか？`)) {
+                            deleteMapFromGallery(this.dataset.name);
+                        }
+                    });
+                });
+            }
+
+            gallery.style.display = "block";
+        }
+
         // マーカー編集モードのトグル
         function toggleEditNextMarkerMode() {
             if (nextMarkerEdit) {
@@ -980,9 +1075,11 @@ function initMap() {
         }
 
         // マップ名を付けて保存
-        function saveCurrentMapWithName() {
-            const mapName = document.getElementById("save-map-name").value.trim();
-            if (!mapName) {
+        function saveCurrentMapWithName(mapName = null) {
+            const mapNameInput = document.getElementById("save-map-name");
+            const name = mapName || mapNameInput.value.trim();
+            
+            if (!name) {
                 alert("マップ名を入力してください");
                 return;
             }
@@ -1010,13 +1107,15 @@ function initMap() {
             });
 
             const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
-            savedMaps[mapName] = mapData;
+            savedMaps[name] = mapData;
             localStorage.setItem('savedMaps', JSON.stringify(savedMaps));
 
-            currentMapName = mapName;
-            document.getElementById("save-map-name").value = "";
+            currentMapName = name;
+            lastOpenedMapName = name;
+            mapNameInput.value = "";
             hideSaveMapModal();
-            alert(`マップ「${mapName}」を保存しました`);
+            updateOverwriteCurrentMapButton();
+            alert(`マップ「${name}」を保存しました`);
         }
 
         // マップギャラリーを表示
@@ -1075,56 +1174,58 @@ function initMap() {
         }
 
         // ギャラリーからマップを読み込み
-function loadMapFromGallery(mapName) {
-    const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
-    const mapData = savedMaps[mapName];
-
-    if (!mapData) {
-        alert("マップデータが見つかりません");
-        return;
-    }
-
-    // 現在のマップをクリア
-    clearCurrentMap();
-
-    // 新しいマップを読み込み
-    map.setView(mapData.center, mapData.zoom);
-    currentMapName = mapName; // 現在のマップ名を更新
-
-    // マーカーを追加
-    mapData.markers.forEach((markerData) => {
-        const icon = L.icon({
-            iconUrl: markerData.iconUrl,
-            iconSize: markerData.iconSize,
-            iconAnchor: [markerData.iconSize[0] / 2, markerData.iconSize[1]],
-            popupAnchor: [0, -markerData.iconSize[1]],
-            tooltipAnchor: [markerData.iconSize[0] / 2, -markerData.iconSize[1] / 2],
-        });
+        function loadMapFromGallery(mapName) {
+            const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
+            const mapData = savedMaps[mapName];
 
-        const marker = L.marker([markerData.lat, markerData.lng], { icon: icon }).addTo(map);
-        if (markerData.popupContent) marker.bindPopup(markerData.popupContent);
-        if (markerData.tooltipContent) marker.bindTooltip(markerData.tooltipContent);
+            if (!mapData) {
+                alert("マップデータが見つかりません");
+                return;
+            }
 
-        marker.on("mouseover", function() {
-            hoveredMarker = marker;
-        });
+            // 現在のマップをクリア
+            clearCurrentMap();
 
-        marker.on("mouseout", function() {
-            if (hoveredMarker === marker) {
-                hoveredMarker = null;
-            }
-        });
-    });
+            // 新しいマップを読み込み
+            map.setView(mapData.center, mapData.zoom);
+            currentMapName = mapName;
+            lastOpenedMapName = mapName; // 最後に開いたマップ名を更新
+            updateOverwriteCurrentMapButton();
 
-    // 保存フォームにマップ名をセット
-    document.getElementById("save-map-name").value = currentMapName;
-    
-    // ユーザーに通知
-    alert(`マップ「${mapName}」を読み込みました`);
-    
-    hideGallery();
-    updateEditNextMarkerButton();
-}
+            // マーカーを追加
+            mapData.markers.forEach((markerData) => {
+                const icon = L.icon({
+                    iconUrl: markerData.iconUrl,
+                    iconSize: markerData.iconSize,
+                    iconAnchor: [markerData.iconSize[0] / 2, markerData.iconSize[1]],
+                    popupAnchor: [0, -markerData.iconSize[1]],
+                    tooltipAnchor: [markerData.iconSize[0] / 2, -markerData.iconSize[1] / 2],
+                });
+
+                const marker = L.marker([markerData.lat, markerData.lng], { icon: icon }).addTo(map);
+                if (markerData.popupContent) marker.bindPopup(markerData.popupContent);
+                if (markerData.tooltipContent) marker.bindTooltip(markerData.tooltipContent);
+
+                marker.on("mouseover", function() {
+                    hoveredMarker = marker;
+                });
+
+                marker.on("mouseout", function() {
+                    if (hoveredMarker === marker) {
+                        hoveredMarker = null;
+                    }
+                });
+            });
+
+            // 保存フォームにマップ名をセット
+            document.getElementById("save-map-name").value = currentMapName;
+            
+            // ユーザーに通知
+            alert(`マップ「${mapName}」を読み込みました`);
+            
+            hideGallery();
+            updateEditNextMarkerButton();
+        }
 
         // ギャラリーからマップを削除
         function deleteMapFromGallery(mapName) {
@@ -1136,6 +1237,11 @@ function loadMapFromGallery(mapName) {
                 currentMapName = '';
             }
 
+            if (lastOpenedMapName === mapName) {
+                lastOpenedMapName = '';
+                updateOverwriteCurrentMapButton();
+            }
+
             showGallery(); // ギャラリーを更新
         }