Update index.html

index.html

@@ -473,15 +473,15 @@
             <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>
+            <button id="replace-current-map-btn" class="hacker-btn secondary" style="display: none;">
+                  <span class="glow-text"><span id="replace-map-name"></span>を置き換えて保存</span>
+            </button>
+            <button id="replace-other-map-btn" class="hacker-btn secondary">
+                  <span class="glow-text">他のマップを置き換えて保存</span>
+            </button>
             <button onclick="if(confirm('現在のマップのすべてのデータが消去されます。いいですか？')){clearCurrentMap()}" class="hacker-btn danger">
                 <span class="glow-text">現在のマップをリセット</span>
             </button>
@@ -586,7 +586,6 @@
         let nextMarkerEdit = false;
         let markers = [];
         let currentMapName = '';
-        let lastOpenedMapName = '';
 
         // 初期化処理
         window.onload = function() {
@@ -596,72 +595,70 @@
                 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);
 
-        // マップ初期化
-        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;
-                }
-
-                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();
-                }
-            });
+    // マーカーイベントの設定
+    map.on("click", function(e) {
+        if (nextMarkerEdit) {
+            return;
+        }
 
-            // マーカーが変更されたらボタンの状態を更新
-            map.on('layeradd layerremove', function() {
-                updateEditNextMarkerButton();
+        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('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");
+            
+            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();
+        }
+    });
+
+    // マーカーが変更されたらボタンの状態を更新
+    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() {
@@ -687,8 +684,6 @@
             
             // マップ保存/読み込み関連
             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);
@@ -702,90 +697,6 @@
             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) {
@@ -1075,11 +986,9 @@
         }
 
         // マップ名を付けて保存
-        function saveCurrentMapWithName(mapName = null) {
-            const mapNameInput = document.getElementById("save-map-name");
-            const name = mapName || mapNameInput.value.trim();
-            
-            if (!name) {
+        function saveCurrentMapWithName() {
+            const mapName = document.getElementById("save-map-name").value.trim();
+            if (!mapName) {
                 alert("マップ名を入力してください");
                 return;
             }
@@ -1107,15 +1016,13 @@
             });
 
             const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
-            savedMaps[name] = mapData;
+            savedMaps[mapName] = mapData;
             localStorage.setItem('savedMaps', JSON.stringify(savedMaps));
 
-            currentMapName = name;
-            lastOpenedMapName = name;
-            mapNameInput.value = "";
+            currentMapName = mapName;
+            document.getElementById("save-map-name").value = "";
             hideSaveMapModal();
-            updateOverwriteCurrentMapButton();
-            alert(`マップ「${name}」を保存しました`);
+            alert(`マップ「${mapName}」を保存しました`);
         }
 
         // マップギャラリーを表示
@@ -1174,58 +1081,56 @@
         }
 
         // ギャラリーからマップを読み込み
-        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;
-            lastOpenedMapName = mapName; // 最後に開いたマップ名を更新
-            updateOverwriteCurrentMapButton();
-
-            // マーカーを追加
-            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];
+
+    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],
+        });
 
-                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);
+        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("mouseover", function() {
+            hoveredMarker = marker;
+        });
 
-                marker.on("mouseout", function() {
-                    if (hoveredMarker === marker) {
-                        hoveredMarker = null;
-                    }
-                });
-            });
+        marker.on("mouseout", function() {
+            if (hoveredMarker === marker) {
+                hoveredMarker = null;
+            }
+        });
+    });
 
-            // 保存フォームにマップ名をセット
-            document.getElementById("save-map-name").value = currentMapName;
-            
-            // ユーザーに通知
-            alert(`マップ「${mapName}」を読み込みました`);
-            
-            hideGallery();
-            updateEditNextMarkerButton();
-        }
+    // 保存フォームにマップ名をセット
+    document.getElementById("save-map-name").value = currentMapName;
+    
+    // ユーザーに通知
+    alert(`マップ「${mapName}」を読み込みました`);
+    
+    hideGallery();
+    updateEditNextMarkerButton();
+}
 
         // ギャラリーからマップを削除
         function deleteMapFromGallery(mapName) {
@@ -1237,11 +1142,6 @@
                 currentMapName = '';
             }
 
-            if (lastOpenedMapName === mapName) {
-                lastOpenedMapName = '';
-                updateOverwriteCurrentMapButton();
-            }
-
             showGallery(); // ギャラリーを更新
         }
 
@@ -1330,4 +1230,4 @@
         }
     </script>
 </body>
-</html>
+</html>