Update index.html

index.html

@@ -391,6 +391,18 @@
             color: var(--hacker-primary);
             font-weight: bold;
             margin-bottom: 0.5rem;
+            cursor: pointer;
+            padding: 0.25rem;
+            border-radius: 3px;
+        }
+
+        .gallery-map-title:hover {
+            background: rgba(0, 100, 200, 0.3);
+        }
+
+        .gallery-map-title.editing {
+            background: rgba(0, 100, 200, 0.5);
+            outline: 1px solid var(--hacker-primary);
         }
 
         .gallery-map-preview {
@@ -449,6 +461,218 @@
             pointer-events: none;
             cursor: not-allowed;
         }
+
+        /* レイヤーエディタ用スタイル */
+        #layer-editor {
+            display: none;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(0, 20, 40, 0.9);
+            padding: 1.5rem;
+            border-radius: 0;
+            border: 1px solid var(--hacker-border);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
+            z-index: 1000;
+            cursor: move;
+            font-family: 'Source Code Pro', monospace;
+            color: var(--hacker-text);
+            width: 350px;
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+
+        #layer-editor h3 {
+            color: var(--hacker-primary);
+            text-shadow: 0 0 5px var(--hacker-primary);
+            border-bottom: 1px solid var(--hacker-border);
+            padding-bottom: 0.5rem;
+            margin-bottom: 1rem;
+            font-weight: 700;
+        }
+
+        .layer-tabs {
+            display: flex;
+            margin-bottom: 1rem;
+            border-bottom: 1px solid var(--hacker-border);
+        }
+
+        .layer-tab {
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+            border: 1px solid transparent;
+            margin-right: 0.5rem;
+        }
+
+        .layer-tab.active {
+            border: 1px solid var(--hacker-border);
+            border-bottom: 1px solid rgba(0, 20, 40, 0.9);
+            margin-bottom: -1px;
+            background: rgba(0, 100, 200, 0.3);
+        }
+
+        .layer-tab-content {
+            display: none;
+        }
+
+        .layer-tab-content.active {
+            display: block;
+        }
+
+        .layer-form-group {
+            margin-bottom: 1rem;
+        }
+
+        .layer-form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: var(--hacker-secondary);
+        }
+
+        .layer-form-group input,
+        .layer-form-group textarea,
+        .layer-form-group select {
+            width: 100%;
+            padding: 0.5rem;
+            background: rgba(0, 10, 20, 0.8);
+            border: 1px solid var(--hacker-border);
+            color: var(--hacker-text);
+            font-family: 'Source Code Pro', monospace;
+        }
+
+        .layer-form-group input[type="color"] {
+            height: 40px;
+            padding: 0.2rem;
+        }
+
+        .layer-form-actions {
+            margin-top: 1rem;
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .layer-form-actions button {
+            flex: 1;
+        }
+
+        #plugin-manager {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 20, 40, 0.95);
+            border: 1px solid var(--hacker-border);
+            padding: 2rem;
+            z-index: 2002;
+            width: 80%;
+            max-width: 600px;
+        }
+
+        #plugin-manager h3 {
+            color: var(--hacker-primary);
+            margin-bottom: 1rem;
+            text-align: center;
+        }
+
+        #plugin-url {
+            width: 100%;
+            margin-bottom: 1rem;
+            background: rgba(0, 10, 20, 0.8);
+            border: 1px solid var(--hacker-border);
+            color: var(--hacker-text);
+            padding: 0.5rem;
+        }
+
+        #plugin-list {
+            max-height: 300px;
+            overflow-y: auto;
+            margin: 1rem 0;
+            padding: 0.5rem;
+            background: rgba(0, 10, 20, 0.5);
+            border: 1px solid var(--hacker-border);
+        }
+
+        .plugin-item {
+            padding: 0.5rem;
+            margin-bottom: 0.5rem;
+            background: rgba(0, 30, 60, 0.5);
+            border-left: 3px solid var(--hacker-primary);
+        }
+
+        .plugin-item-actions {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+        }
+
+        .plugin-item-actions button {
+            flex: 1;
+            padding: 0.25rem;
+            font-size: 0.8rem;
+        }
+
+        /* レイヤーツリー用スタイル */
+        #layer-tree {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background: rgba(0, 20, 40, 0.9);
+            padding: 1rem;
+            border: 1px solid var(--hacker-border);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
+            z-index: 1000;
+            max-height: 80vh;
+            overflow-y: auto;
+            font-size: 0.9rem;
+        }
+
+        #layer-tree h3 {
+            color: var(--hacker-primary);
+            margin-bottom: 0.5rem;
+            font-size: 1rem;
+        }
+
+        .layer-tree-item {
+            padding: 0.25rem 0;
+            cursor: pointer;
+            margin-left: 1rem;
+        }
+
+        .layer-tree-item:hover {
+            color: var(--hacker-primary);
+        }
+
+        .layer-tree-item.selected {
+            color: var(--hacker-primary);
+            font-weight: bold;
+        }
+
+        .layer-tree-item::before {
+            content: "▸";
+            margin-right: 0.5rem;
+        }
+
+        .layer-tree-item.expanded::before {
+            content: "▾";
+        }
+
+        .layer-tree-item-group {
+            margin-left: 1rem;
+            display: none;
+        }
+
+        .layer-tree-item-group.expanded {
+            display: block;
+        }
+
+        .layer-tree-item-icon {
+            width: 16px;
+            height: 16px;
+            display: inline-block;
+            margin-right: 0.5rem;
+            vertical-align: middle;
+        }
     </style>
 </head>
 
@@ -485,6 +709,15 @@
             <button onclick="if(confirm('現在のマップのすべてのデータが消去されます。いいですか？')){clearCurrentMap()}" class="hacker-btn danger">
                 <span class="glow-text">現在のマップをリセット</span>
             </button>
+            <button id="add-layer-btn" class="hacker-btn">
+                <span class="glow-text">レイヤーを追加</span>
+            </button>
+            <button id="manage-plugins-btn" class="hacker-btn">
+                <span class="glow-text">プラグイン管理</span>
+            </button>
+            <button id="toggle-layer-tree-btn" class="hacker-btn secondary">
+                <span class="glow-text">レイヤーツリー</span>
+            </button>
         </div>
 
         <div class="hacker-container">
@@ -492,6 +725,7 @@
             <div id="map"></div>
         </div>
 
+        <!-- マーカーエディタ -->
         <div id="marker-editor">
             <h3>MARKER EDITOR</h3>
             <div class="terminal-line">緯度:</div>
@@ -537,6 +771,124 @@
             </button>
         </div>
 
+        <!-- レイヤーエディタ -->
+        <div id="layer-editor">
+            <h3>LAYER EDITOR</h3>
+            <div class="layer-tabs">
+                <div class="layer-tab active" data-tab="base">ベースレイヤー</div>
+                <div class="layer-tab" data-tab="overlay">オーバーレイ</div>
+                <div class="layer-tab" data-tab="other">その他</div>
+            </div>
+
+            <!-- ベースレイヤータブ -->
+            <div class="layer-tab-content active" id="base-tab">
+                <div class="layer-form-group">
+                    <label for="base-layer-type">レイヤータイプ:</label>
+                    <select id="base-layer-type">
+                        <option value="tile">タイルレイヤー (TileLayer)</option>
+                        <option value="canvas">Canvasレイヤー (L.Canvas)</option>
+                        <option value="svg">SVGレイヤー (L.SVG)</option>
+                        <option value="grid">グリッドレイヤー (L.GridLayer)</option>
+                    </select>
+                </div>
+
+                <div class="layer-form-group" id="tile-url-group">
+                    <label for="tile-layer-url">タイルURL:</label>
+                    <input type="text" id="tile-layer-url" value="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png">
+                </div>
+
+                <div class="layer-form-group" id="tile-attribution-group">
+                    <label for="tile-layer-attribution">クレジット表示:</label>
+                    <input type="text" id="tile-layer-attribution" value="© OpenStreetMap contributors">
+                </div>
+
+                <div class="layer-form-group" id="tile-options-group">
+                    <label for="tile-layer-options">オプション (JSON):</label>
+                    <textarea id="tile-layer-options" placeholder='{"minZoom": 0, "maxZoom": 19, "subdomains": "abc"}'></textarea>
+                </div>
+
+                <div class="layer-form-actions">
+                    <button id="add-base-layer" class="hacker-btn">
+                        <span class="glow-text">レイヤーを追加</span>
+                    </button>
+                    <button id="cancel-layer" class="hacker-btn danger">
+                        <span class="glow-text">キャンセル</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- オーバーレイタブ -->
+            <div class="layer-tab-content" id="overlay-tab">
+                <div class="layer-form-group">
+                    <label for="overlay-layer-type">レイ��ータイプ:</label>
+                    <select id="overlay-layer-type">
+                        <option value="marker">マーカー (Marker)</option>
+                        <option value="polyline">ポリライン (Polyline)</option>
+                        <option value="polygon">ポリゴン (Polygon)</option>
+                        <option value="circle">サークル (Circle)</option>
+                        <option value="circlemarker">サークルマーカー (CircleMarker)</option>
+                        <option value="geojson">GeoJSONレイヤー (GeoJSON)</option>
+                        <option value="image">画像オーバーレイ (ImageOverlay)</option>
+                        <option value="video">ビデオオーバーレイ (VideoOverlay)</option>
+                    </select>
+                </div>
+
+                <div class="layer-form-group" id="overlay-options-group">
+                    <label for="overlayer-options">オプション (JSON):</label>
+                    <textarea id="overlayer-options" placeholder='{"color": "#ff0000", "weight": 5}'></textarea>
+                </div>
+
+                <div class="layer-form-group" id="overlay-coords-group">
+                    <label>座標 (クリックで追加):</label>
+                    <div id="overlay-coords-list"></div>
+                </div>
+
+                <div class="layer-form-actions">
+                    <button id="add-overlay-layer" class="hacker-btn">
+                        <span class="glow-text">レイヤーを追加</span>
+                    </button>
+                    <button id="cancel-overlay-layer" class="hacker-btn danger">
+                        <span class="glow-text">キャンセル</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- その他タブ -->
+            <div class="layer-tab-content" id="other-tab">
+                <div class="layer-form-group">
+                    <label for="other-layer-type">レイヤータイプ:</label>
+                    <select id="other-layer-type">
+                        <option value="layergroup">レイヤーグループ (LayerGroup)</option>
+                        <option value="featuregroup">フィーチャーグループ (FeatureGroup)</option>
+                        <option value="control">レイヤー切替UI (Control.Layers)</option>
+                        <option value="heatmap">ヒートマップレイヤー (Heatmap)</option>
+                        <option value="cluster">クラスターレイヤー (MarkerCluster)</option>
+                        <option value="vectorgrid">ベクターグリッド (VectorGrid)</option>
+                        <option value="custom">カスタムレイヤー</option>
+                    </select>
+                </div>
+
+                <div class="layer-form-group" id="other-options-group">
+                    <label for="other-layer-options">オプション (JSON):</label>
+                    <textarea id="other-layer-options" placeholder='{"radius": 25, "maxZoom": 18}'></textarea>
+                </div>
+
+                <div class="layer-form-group" id="other-custom-code-group">
+                    <label for="other-layer-custom-code">カスタムコード:</label>
+                    <textarea id="other-layer-custom-code" placeholder="function(layer) { /* カスタム処理 */ }"></textarea>
+                </div>
+
+                <div class="layer-form-actions">
+                    <button id="add-other-layer" class="hacker-btn">
+                        <span class="glow-text">レイヤーを追加</span>
+                    </button>
+                    <button id="cancel-other-layer" class="hacker-btn danger">
+                        <span class="glow-text">キャンセル</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
         <div class="hacker-container">
             <button id="generate-html" class="hacker-btn">
                 <span class="glow-text">HTMLを生成</span>
@@ -575,6 +927,30 @@
         </div>
     </div>
 
+    <!-- プラグインマネージャー -->
+    <div id="plugin-manager">
+        <h3>プラグイン管理</h3>
+        <div class="layer-form-group">
+            <label for="plugin-url">プラグインURL:</label>
+            <input type="text" id="plugin-url" placeholder="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js">
+        </div>
+        <div class="layer-form-actions">
+            <button id="add-plugin" class="hacker-btn">
+                <span class="glow-text">プラグインを追加</span>
+            </button>
+            <button id="close-plugin-manager" class="hacker-btn danger">
+                <span class="glow-text">閉じる</span>
+            </button>
+        </div>
+        <div id="plugin-list"></div>
+    </div>
+
+    <!-- レイヤーツリー -->
+    <div id="layer-tree" style="display: none;">
+        <h3>レイヤーツリー</h3>
+        <div id="layer-tree-content"></div>
+    </div>
+
     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/mono-blue.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
@@ -586,6 +962,11 @@
         let nextMarkerEdit = false;
         let markers = [];
         let currentMapName = '';
+        let layers = [];
+        let plugins = [];
+        let layerControls = {};
+        let currentEditingLayer = null;
+        let overlayCoords = [];
 
         // 初期化処理
         window.onload = function() {
@@ -595,70 +976,113 @@
                 loading.style.display = 'none';
                 initMap();
                 updateEditNextMarkerButton();
+                loadPluginsFromStorage();
             }, 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 (currentEditingLayer) {
+                    handleLayerEditingClick(e);
+                    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();
+                updateLayerTree();
+            });
+
+            // ポップアップが開いた時の処理をここに移動
+            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();
-    });
+        // レイヤー編集時のクリック処理
+        function handleLayerEditingClick(e) {
+            const latlng = e.latlng;
+            overlayCoords.push([latlng.lat, latlng.lng]);
+            updateOverlayCoordsList();
+            
+            // 現在編集中のレイヤーを更新
+            if (currentEditingLayer) {
+                const layerType = document.getElementById("overlay-layer-type").value;
+                
+                if (layerType === 'polyline' || layerType === 'polygon') {
+                    if (currentEditingLayer.setLatLngs) {
+                        currentEditingLayer.setLatLngs(overlayCoords);
+                    }
+                } else if (layerType === 'circle' || layerType === 'circlemarker') {
+                    if (currentEditingLayer.setLatLng) {
+                        currentEditingLayer.setLatLng(latlng);
+                    }
+                }
+            }
+        }
 
-    // ポップアップが開いた時の処理をここに移動
-    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 updateOverlayCoordsList() {
+            const coordsList = document.getElementById("overlay-coords-list");
+            coordsList.innerHTML = '';
+            
+            overlayCoords.forEach((coord, index) => {
+                const coordItem = document.createElement('div');
+                coordItem.className = 'terminal-line';
+                coordItem.textContent = `${index + 1}. ${coord[0].toFixed(6)}, ${coord[1].toFixed(6)}`;
+                coordsList.appendChild(coordItem);
+            });
         }
-    });
-}
 
         // イベントリスナーの設定
         function setupEventListeners() {
@@ -695,6 +1119,625 @@ function initMap() {
             // HTML生成関連
             document.getElementById("generate-html").addEventListener("click", generateMapHTML);
             document.getElementById("copyButton").onclick = copyHTMLToClipboard;
+
+            // レイヤー関連
+            document.getElementById("add-layer-btn").addEventListener("click", showLayerEditor);
+            document.getElementById("cancel-layer").addEventListener("click", hideLayerEditor);
+            document.getElementById("add-base-layer").addEventListener("click", addBaseLayer);
+            document.getElementById("add-overlay-layer").addEventListener("click", addOverlayLayer);
+            document.getElementById("cancel-overlay-layer").addEventListener("click", cancelOverlayLayer);
+            document.getElementById("add-other-layer").addEventListener("click", addOtherLayer);
+            document.getElementById("cancel-other-layer").addEventListener("click", cancelOtherLayer);
+            document.getElementById("toggle-layer-tree-btn").addEventListener("click", toggleLayerTree);
+
+            // タブ切り替え
+            document.querySelectorAll('.layer-tab').forEach(tab => {
+                tab.addEventListener('click', function() {
+                    const tabId = this.dataset.tab;
+                    switchLayerTab(tabId);
+                });
+            });
+
+            // レイヤータイプ変更
+            document.getElementById("base-layer-type").addEventListener("change", updateBaseLayerForm);
+            document.getElementById("overlay-layer-type").addEventListener("change", updateOverlayLayerForm);
+            document.getElementById("other-layer-type").addEventListener("change", updateOtherLayerForm);
+
+            // プラグイン管理
+            document.getElementById("manage-plugins-btn").addEventListener("click", showPluginManager);
+            document.getElementById("close-plugin-manager").addEventListener("click", hidePluginManager);
+            document.getElementById("add-plugin").addEventListener("click", addPlugin);
+        }
+
+        // レイヤーエディタを表示
+        function showLayerEditor() {
+            document.getElementById("layer-editor").style.display = "block";
+            switchLayerTab('base');
+            updateBaseLayerForm();
+            updateOverlayLayerForm();
+            updateOtherLayerForm();
+        }
+
+        // レイヤーエディタを非表示
+        function hideLayerEditor() {
+            document.getElementById("layer-editor").style.display = "none";
+            if (currentEditingLayer) {
+                map.removeLayer(currentEditingLayer);
+                currentEditingLayer = null;
+                overlayCoords = [];
+            }
+        }
+
+        // レイヤータブを切り替え
+        function switchLayerTab(tabId) {
+            // タブを非アクティブ化
+            document.querySelectorAll('.layer-tab').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            
+            // タブコンテンツを非表示
+            document.querySelectorAll('.layer-tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            
+            // 選択されたタブをアクティブ化
+            document.querySelector(`.layer-tab[data-tab="${tabId}"]`).classList.add('active');
+            document.getElementById(`${tabId}-tab`).classList.add('active');
+        }
+
+        // ベースレイヤーフォームを更新
+        function updateBaseLayerForm() {
+            const layerType = document.getElementById("base-layer-type").value;
+            
+            // すべてのグループを非表示
+            document.getElementById("tile-url-group").style.display = 'none';
+            document.getElementById("tile-attribution-group").style.display = 'none';
+            document.getElementById("tile-options-group").style.display = 'none';
+            
+            // 選択されたタイプに応じて表示
+            if (layerType === 'tile') {
+                document.getElementById("tile-url-group").style.display = 'block';
+                document.getElementById("tile-attribution-group").style.display = 'block';
+                document.getElementById("tile-options-group").style.display = 'block';
+            }
+        }
+
+        // オーバーレイレイヤーフォームを更新
+        function updateOverlayLayerForm() {
+            const layerType = document.getElementById("overlay-layer-type").value;
+            
+            // 現在編集中のレイヤーをクリア
+            if (currentEditingLayer) {
+                map.removeLayer(currentEditingLayer);
+                currentEditingLayer = null;
+            }
+            
+            overlayCoords = [];
+            updateOverlayCoordsList();
+            
+            // 新しいレイヤーを作成
+            if (layerType === 'polyline') {
+                currentEditingLayer = L.polyline([], JSON.parse(document.getElementById("overlayer-options").value || '{}')).addTo(map);
+            } else if (layerType === 'polygon') {
+                currentEditingLayer = L.polygon([], JSON.parse(document.getElementById("overlayer-options").value || '{}')).addTo(map);
+            } else if (layerType === 'circle') {
+                currentEditingLayer = L.circle([0, 0], JSON.parse(document.getElementById("overlayer-options").value || '{}')).addTo(map);
+            } else if (layerType === 'circlemarker') {
+                currentEditingLayer = L.circleMarker([0, 0], JSON.parse(document.getElementById("overlayer-options").value || '{}')).addTo(map);
+            } else if (layerType === 'marker') {
+                currentEditingLayer = L.marker([0, 0], JSON.parse(document.getElementById("overlayer-options").value || '{}')).addTo(map);
+            }
+        }
+
+        // その他レイヤーフォームを更新
+        function updateOtherLayerForm() {
+            const layerType = document.getElementById("other-layer-type").value;
+            
+            document.getElementById("other-custom-code-group").style.display = 'none';
+            
+            if (layerType === 'custom') {
+                document.getElementById("other-custom-code-group").style.display = 'block';
+            }
+        }
+
+        // ベースレイヤーを追加
+        function addBaseLayer() {
+            const layerType = document.getElementById("base-layer-type").value;
+            const layerName = prompt("レイヤー名を入力してください", "新しいレイヤー");
+            
+            if (!layerName) return;
+            
+            let layer;
+            let options = {};
+            
+            try {
+                const optionsText = document.getElementById("tile-layer-options").value;
+                if (optionsText) {
+                    options = JSON.parse(optionsText);
+                }
+            } catch (e) {
+                alert("オプションのJSONが不正です");
+                return;
+            }
+            
+            if (layerType === 'tile') {
+                const url = document.getElementById("tile-layer-url").value;
+                const attribution = document.getElementById("tile-layer-attribution").value;
+                
+                if (!url) {
+                    alert("タイルURLを入力してください");
+                    return;
+                }
+                
+                layer = L.tileLayer(url, {
+                    attribution: attribution,
+                    ...options
+                }).addTo(map);
+            } else if (layerType === 'canvas') {
+                layer = L.canvas(options).addTo(map);
+            } else if (layerType === 'svg') {
+                layer = L.svg(options).addTo(map);
+            } else if (layerType === 'grid') {
+                layer = L.gridLayer(options).addTo(map);
+            }
+            
+            if (layer) {
+                layers.push({
+                    id: 'layer-' + Date.now(),
+                    name: layerName,
+                    type: layerType,
+                    layer: layer,
+                    options: options
+                });
+                
+                saveCurrentMapToStorage();
+                updateLayerTree();
+                hideLayerEditor();
+            }
+        }
+
+        // オーバーレイレイヤーを追加
+        function addOverlayLayer() {
+            const layerType = document.getElementById("overlay-layer-type").value;
+            const layerName = prompt("レイヤー名を入力してください", "新しいオーバーレイ");
+            
+            if (!layerName) return;
+            
+            let layer;
+            let options = {};
+            
+            try {
+                const optionsText = document.getElementById("overlayer-options").value;
+                if (optionsText) {
+                    options = JSON.parse(optionsText);
+                }
+            } catch (e) {
+                alert("オプションのJSONが不正です");
+                return;
+            }
+            
+            if (layerType === 'polyline') {
+                if (overlayCoords.length < 2) {
+                    alert("ポリラインには少なくとも2点の座標が必要です");
+                    return;
+                }
+                layer = L.polyline(overlayCoords, options).addTo(map);
+            } else if (layerType === 'polygon') {
+                if (overlayCoords.length < 3) {
+                    alert("ポリゴンには少なくとも3点の座標が必要です");
+                    return;
+                }
+                layer = L.polygon(overlayCoords, options).addTo(map);
+            } else if (layerType === 'circle') {
+                if (overlayCoords.length === 0) {
+                    alert("サークルには中心点が必要です");
+                    return;
+                }
+                layer = L.circle(overlayCoords[0], options).addTo(map);
+            } else if (layerType === 'circlemarker') {
+                if (overlayCoords.length === 0) {
+                    alert("サークルマーカーには中心点が必要です");
+                    return;
+                }
+                layer = L.circleMarker(overlayCoords[0], options).addTo(map);
+            } else if (layerType === 'marker') {
+                if (overlayCoords.length === 0) {
+                    alert("マーカーには位置が必要です");
+                    return;
+                }
+                layer = L.marker(overlayCoords[0], options).addTo(map);
+            }
+            
+            if (layer) {
+                layers.push({
+                    id: 'layer-' + Date.now(),
+                    name: layerName,
+                    type: layerType,
+                    layer: layer,
+                    options: options,
+                    coords: [...overlayCoords]
+                });
+                
+                saveCurrentMapToStorage();
+                updateLayerTree();
+                hideLayerEditor();
+            }
+        }
+
+        // オーバーレイレイヤー追加をキャンセル
+        function cancelOverlayLayer() {
+            if (currentEditingLayer) {
+                map.removeLayer(currentEditingLayer);
+                currentEditingLayer = null;
+            }
+            overlayCoords = [];
+            hideLayerEditor();
+        }
+
+        // その他レイヤーを追加
+        function addOtherLayer() {
+            const layerType = document.getElementById("other-layer-type").value;
+            const layerName = prompt("レイヤー名を入力してください", "新しいレイヤー");
+            
+            if (!layerName) return;
+            
+            let layer;
+            let options = {};
+            
+            try {
+                const optionsText = document.getElementById("other-layer-options").value;
+                if (optionsText) {
+                    options = JSON.parse(optionsText);
+                }
+            } catch (e) {
+                alert("オプションのJSONが不正です");
+                return;
+            }
+            
+            if (layerType === 'layergroup') {
+                layer = L.layerGroup().addTo(map);
+            } else if (layerType === 'featuregroup') {
+                layer = L.featureGroup().addTo(map);
+            } else if (layerType === 'control') {
+                // ベースレイヤーとオーバーレイレイヤーを収集
+                const baseLayers = {};
+                const overlays = {};
+                
+                layers.forEach(l => {
+                    if (l.type === 'tile' || l.type === 'canvas' || l.type === 'svg' || l.type === 'grid') {
+                        baseLayers[l.name] = l.layer;
+                    } else {
+                        overlays[l.name] = l.layer;
+                    }
+                });
+                
+                layer = L.control.layers(baseLayers, overlays, options).addTo(map);
+                layerControls[layer._leaflet_id] = layer;
+            } else if (layerType === 'heatmap') {
+                // ヒートマッププラグインが読み込まれているか確認
+                if (typeof L.HeatLayer === 'undefined') {
+                    alert("ヒートマッププラグインが読み込まれていません");
+                    return;
+                }
+                layer = L.heatLayer([], options).addTo(map);
+            } else if (layerType === 'cluster') {
+                // クラスタープラグインが読み込まれているか確認
+                if (typeof L.markerClusterGroup === 'undefined') {
+                    alert("クラスタープラグインが読み込まれていません");
+                    return;
+                }
+                layer = L.markerClusterGroup(options).addTo(map);
+            } else if (layerType === 'custom') {
+                const customCode = document.getElementById("other-layer-custom-code").value;
+                try {
+                    // カスタムコードを実行
+                    const customFunc = new Function('layer', 'map', customCode);
+                    layer = customFunc(L, map);
+                    if (!layer) {
+                        alert("カスタムコードはレイヤーオブジェクトを返す必要があります");
+                        return;
+                    }
+                    layer.addTo(map);
+                } catch (e) {
+                    alert("カスタムコードの実行中にエラーが発生しました: " + e.message);
+                    return;
+                }
+            }
+            
+            if (layer) {
+                layers.push({
+                    id: 'layer-' + Date.now(),
+                    name: layerName,
+                    type: layerType,
+                    layer: layer,
+                    options: options
+                });
+                
+                saveCurrentMapToStorage();
+                updateLayerTree();
+                hideLayerEditor();
+            }
+        }
+
+        // その他レイヤー追加をキャンセル
+        function cancelOtherLayer() {
+            hideLayerEditor();
+        }
+
+        // レイヤーツリーを表示/非表示
+        function toggleLayerTree() {
+            const layerTree = document.getElementById("layer-tree");
+            if (layerTree.style.display === 'none') {
+                layerTree.style.display = 'block';
+                updateLayerTree();
+            } else {
+                layerTree.style.display = 'none';
+            }
+        }
+
+        // レイヤーツリーを更新
+        function updateLayerTree() {
+            const layerTreeContent = document.getElementById("layer-tree-content");
+            layerTreeContent.innerHTML = '';
+            
+            // ベースレイヤー
+            const baseLayers = layers.filter(l => 
+                l.type === 'tile' || l.type === 'canvas' || l.type === 'svg' || l.type === 'grid'
+            );
+            
+            if (baseLayers.length > 0) {
+                const baseHeader = document.createElement('div');
+                baseHeader.className = 'layer-tree-item';
+                baseHeader.textContent = 'ベースレイヤー';
+                baseHeader.addEventListener('click', function() {
+                    this.classList.toggle('expanded');
+                    document.getElementById('base-layers-group').classList.toggle('expanded');
+                });
+                layerTreeContent.appendChild(baseHeader);
+                
+                const baseGroup = document.createElement('div');
+                baseGroup.id = 'base-layers-group';
+                baseGroup.className = 'layer-tree-item-group';
+                
+                baseLayers.forEach(layer => {
+                    const layerItem = document.createElement('div');
+                    layerItem.className = 'layer-tree-item';
+                    layerItem.textContent = layer.name;
+                    layerItem.addEventListener('click', function(e) {
+                        e.stopPropagation();
+                        // レイヤーを選択状態にする
+                        document.querySelectorAll('.layer-tree-item').forEach(item => {
+                            item.classList.remove('selected');
+                        });
+                        this.classList.add('selected');
+                        // レイヤーを中央に表示
+                        if (layer.layer.getBounds) {
+                            map.fitBounds(layer.layer.getBounds());
+                        } else if (layer.layer.getLatLng) {
+                            map.setView(layer.layer.getLatLng(), map.getZoom());
+                        }
+                    });
+                    baseGroup.appendChild(layerItem);
+                });
+                
+                layerTreeContent.appendChild(baseGroup);
+            }
+            
+            // オーバーレイレイヤー
+            const overlayLayers = layers.filter(l => 
+                l.type === 'marker' || l.type === 'polyline' || l.type === 'polygon' || 
+                l.type === 'circle' || l.type === 'circlemarker' || l.type === 'geojson' || 
+                l.type === 'image' || l.type === 'video'
+            );
+            
+            if (overlayLayers.length > 0) {
+                const overlayHeader = document.createElement('div');
+                overlayHeader.className = 'layer-tree-item';
+                overlayHeader.textContent = 'オーバーレイレイヤー';
+                overlayHeader.addEventListener('click', function() {
+                    this.classList.toggle('expanded');
+                    document.getElementById('overlay-layers-group').classList.toggle('expanded');
+                });
+                layerTreeContent.appendChild(overlayHeader);
+                
+                const overlayGroup = document.createElement('div');
+                overlayGroup.id = 'overlay-layers-group';
+                overlayGroup.className = 'layer-tree-item-group';
+                
+                overlayLayers.forEach(layer => {
+                    const layerItem = document.createElement('div');
+                    layerItem.className = 'layer-tree-item';
+                    layerItem.textContent = layer.name;
+                    layerItem.addEventListener('click', function(e) {
+                        e.stopPropagation();
+                        // レイヤーを選択状態にする
+                        document.querySelectorAll('.layer-tree-item').forEach(item => {
+                            item.classList.remove('selected');
+                        });
+                        this.classList.add('selected');
+                        // レイヤーを中央に表示
+                        if (layer.layer.getBounds) {
+                            map.fitBounds(layer.layer.getBounds());
+                        } else if (layer.layer.getLatLng) {
+                            map.setView(layer.layer.getLatLng(), map.getZoom());
+                        }
+                    });
+                    overlayGroup.appendChild(layerItem);
+                });
+                
+                layerTreeContent.appendChild(overlayGroup);
+            }
+            
+            // その他レイヤー
+            const otherLayers = layers.filter(l => 
+                l.type === 'layergroup' || l.type === 'featuregroup' || l.type === 'control' || 
+                l.type === 'heatmap' || l.type === 'cluster' || l.type === 'vectorgrid' || 
+                l.type === 'custom'
+            );
+            
+            if (otherLayers.length > 0) {
+                const otherHeader = document.createElement('div');
+                otherHeader.className = 'layer-tree-item';
+                otherHeader.textContent = 'その他レイヤー';
+                otherHeader.addEventListener('click', function() {
+                    this.classList.toggle('expanded');
+                    document.getElementById('other-layers-group').classList.toggle('expanded');
+                });
+                layerTreeContent.appendChild(otherHeader);
+                
+                const otherGroup = document.createElement('div');
+                otherGroup.id = 'other-layers-group';
+                otherGroup.className = 'layer-tree-item-group';
+                
+                otherLayers.forEach(layer => {
+                    const layerItem = document.createElement('div');
+                    layerItem.className = 'layer-tree-item';
+                    layerItem.textContent = layer.name;
+                    layerItem.addEventListener('click', function(e) {
+                        e.stopPropagation();
+                        // レイヤーを選択状態にする
+                        document.querySelectorAll('.layer-tree-item').forEach(item => {
+                            item.classList.remove('selected');
+                        });
+                        this.classList.add('selected');
+                        // レイヤーを中央に表示
+                        if (layer.layer.getBounds) {
+                            map.fitBounds(layer.layer.getBounds());
+                        } else if (layer.layer.getLatLng) {
+                            map.setView(layer.layer.getLatLng(), map.getZoom());
+                        }
+                    });
+                    otherGroup.appendChild(layerItem);
+                });
+                
+                layerTreeContent.appendChild(otherGroup);
+            }
+        }
+
+        // プラグインマネージャーを表示
+        function showPluginManager() {
+            document.getElementById("plugin-manager").style.display = "block";
+            updatePluginList();
+        }
+
+        // プラグインマネージャーを非表示
+        function hidePluginManager() {
+            document.getElementById("plugin-manager").style.display = "none";
+        }
+
+        // プラグインを追加
+        function addPlugin() {
+            const pluginUrl = document.getElementById("plugin-url").value.trim();
+            
+            if (!pluginUrl) {
+                alert("プラグインURLを入力してください");
+                return;
+            }
+            
+            // 既に追加されているかチェック
+            if (plugins.some(p => p.url === pluginUrl)) {
+                alert("このプラグインは既に追加されています");
+                return;
+            }
+            
+            // プラグインを追加
+            plugins.push({
+                id: 'plugin-' + Date.now(),
+                url: pluginUrl,
+                loaded: false
+            });
+            
+            // プラグインを読み込み
+            loadPlugin(pluginUrl);
+            
+            // プラグインリストを更新
+            updatePluginList();
+            
+            // ストレージに保存
+            savePluginsToStorage();
+            
+            document.getElementById("plugin-url").value = "";
+        }
+
+        // プラグインを読み込み
+        function loadPlugin(url) {
+            const script = document.createElement('script');
+            script.src = url;
+            script.onload = function() {
+                // プラグインの読み込み状態を更新
+                const plugin = plugins.find(p => p.url === url);
+                if (plugin) {
+                    plugin.loaded = true;
+                    updatePluginList();
+                    savePluginsToStorage();
+                }
+            };
+            script.onerror = function() {
+                alert("プラグインの読み込みに失敗しました: " + url);
+            };
+            document.head.appendChild(script);
+        }
+
+        // プラグインリストを更新
+        function updatePluginList() {
+            const pluginList = document.getElementById("plugin-list");
+            pluginList.innerHTML = '';
+            
+            if (plugins.length === 0) {
+                pluginList.innerHTML = '<div class="terminal-line">プラグインがありません</div>';
+                return;
+            }
+            
+            plugins.forEach(plugin => {
+                const pluginItem = document.createElement('div');
+                pluginItem.className = 'plugin-item';
+                
+                const pluginStatus = plugin.loaded ? '✅ 読み込み済み' : '⏳ 読み込み中...';
+                pluginItem.innerHTML = `
+                    <div class="terminal-line">${plugin.url}</div>
+                    <div class="terminal-line">${pluginStatus}</div>
+                    <div class="plugin-item-actions">
+                        <button class="hacker-btn secondary remove-plugin-btn" data-id="${plugin.id}">削除</button>
+                    </div>
+                `;
+                
+                pluginList.appendChild(pluginItem);
+            });
+            
+            // 削除ボタンのイベントリスナーを追加
+            document.querySelectorAll('.remove-plugin-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const pluginId = this.dataset.id;
+                    removePlugin(pluginId);
+                });
+            });
+        }
+
+        // プラグインを削除
+        function removePlugin(pluginId) {
+            if (confirm("このプラグインを削除しますか？ページをリロードするとプラグインの機能は利用できなくなります。")) {
+                plugins = plugins.filter(p => p.id !== pluginId);
+                updatePluginList();
+                savePluginsToStorage();
+            }
+        }
+
+        // プラグインをストレージから読み込み
+        function loadPluginsFromStorage() {
+            const savedPlugins = localStorage.getItem('mapEditorPlugins');
+            if (savedPlugins) {
+                plugins = JSON.parse(savedPlugins);
+                plugins.forEach(plugin => {
+                    if (plugin.loaded) {
+                        loadPlugin(plugin.url);
+                    }
+                });
+            }
+        }
+
+        // プラグインをストレージに保存
+        function savePluginsToStorage() {
+            localStorage.setItem('mapEditorPlugins', JSON.stringify(plugins));
         }
 
         // マーカー編集モードのトグル
@@ -948,9 +1991,12 @@ function initMap() {
             const mapData = {
                 center: map.getCenter(),
                 zoom: map.getZoom(),
-                markers: []
+                markers: [],
+                layers: [],
+                plugins: plugins
             };
 
+            // マーカーを収集
             map.eachLayer((layer) => {
                 if (layer instanceof L.Marker) {
                     const marker = layer;
@@ -967,6 +2013,32 @@ function initMap() {
                 }
             });
 
+            // レイヤーを収集
+            layers.forEach(layer => {
+                const layerData = {
+                    id: layer.id,
+                    name: layer.name,
+                    type: layer.type,
+                    options: layer.options
+                };
+
+                // タイプに応じて追加データを保存
+                if (layer.type === 'polyline' || layer.type === 'polygon' || 
+                    layer.type === 'circle' || layer.type === 'circlemarker' || 
+                    layer.type === 'marker') {
+                    if (layer.layer.getLatLngs) {
+                        layerData.coords = layer.layer.getLatLngs();
+                    } else if (layer.layer.getLatLng) {
+                        layerData.coords = [layer.layer.getLatLng()];
+                    }
+                } else if (layer.type === 'tile') {
+                    layerData.url = layer.layer._url;
+                    layerData.attribution = layer.layer.options.attribution;
+                }
+
+                mapData.layers.push(layerData);
+            });
+
             if (currentMapName) {
                 // 既存のマップを更新
                 const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
@@ -996,9 +2068,12 @@ function initMap() {
             const mapData = {
                 center: map.getCenter(),
                 zoom: map.getZoom(),
-                markers: []
+                markers: [],
+                layers: [],
+                plugins: plugins
             };
 
+            // マーカーを収集
             map.eachLayer((layer) => {
                 if (layer instanceof L.Marker) {
                     const marker = layer;
@@ -1015,6 +2090,32 @@ function initMap() {
                 }
             });
 
+            // レイヤーを収集
+            layers.forEach(layer => {
+                const layerData = {
+                    id: layer.id,
+                    name: layer.name,
+                    type: layer.type,
+                    options: layer.options
+                };
+
+                // タイプに応じて追加データを保存
+                if (layer.type === 'polyline' || layer.type === 'polygon' || 
+                    layer.type === 'circle' || layer.type === 'circlemarker' || 
+                    layer.type === 'marker') {
+                    if (layer.layer.getLatLngs) {
+                        layerData.coords = layer.layer.getLatLngs();
+                    } else if (layer.layer.getLatLng) {
+                        layerData.coords = [layer.layer.getLatLng()];
+                    }
+                } else if (layer.type === 'tile') {
+                    layerData.url = layer.layer._url;
+                    layerData.attribution = layer.layer.options.attribution;
+                }
+
+                mapData.layers.push(layerData);
+            });
+
             const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
             savedMaps[mapName] = mapData;
             localStorage.setItem('savedMaps', JSON.stringify(savedMaps));
@@ -1040,19 +2141,50 @@ function initMap() {
                     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 danger delete-map-btn" data-name="${name}">削除</button>
-                        </div>
-                    `;
+                    // マップ名を編集可能にする
+                    const mapNameElement = document.createElement("div");
+                    mapNameElement.className = "gallery-map-title";
+                    mapNameElement.textContent = name;
+                    mapNameElement.dataset.name = name;
+                    
+                    // マップ名の編集イベント
+                    mapNameElement.addEventListener('click', function(e) {
+                        if (e.target === this) {
+                            editMapName(this);
+                        }
+                    });
+                    
+                    mapItem.appendChild(mapNameElement);
+                    
+                    // プレビュー情報
+                    const previewDiv = document.createElement("div");
+                    previewDiv.className = "gallery-map-preview";
                     
+                    let previewText = `マーカー数: ${data.markers.length}\n`;
+                    previewText += `レイヤー数: ${data.layers.length}\n`;
+                    previewText += `中心座標: ${data.center.lat.toFixed(4)}, ${data.center.lng.toFixed(4)}\n`;
+                    previewText += `ズームレベル: ${data.zoom}`;
+                    
+                    previewDiv.textContent = previewText;
+                    mapItem.appendChild(previewDiv);
+                    
+                    // アクションボタン
+                    const actionsDiv = document.createElement("div");
+                    actionsDiv.className = "gallery-map-actions";
+                    
+                    const loadBtn = document.createElement("button");
+                    loadBtn.className = "hacker-btn gallery-btn load-map-btn";
+                    loadBtn.dataset.name = name;
+                    loadBtn.textContent = "読み込み";
+                    actionsDiv.appendChild(loadBtn);
+                    
+                    const deleteBtn = document.createElement("button");
+                    deleteBtn.className = "hacker-btn gallery-btn danger delete-map-btn";
+                    deleteBtn.dataset.name = name;
+                    deleteBtn.textContent = "削除";
+                    actionsDiv.appendChild(deleteBtn);
+                    
+                    mapItem.appendChild(actionsDiv);
                     mapList.appendChild(mapItem);
                 }
 
@@ -1075,62 +2207,220 @@ function initMap() {
             gallery.style.display = "block";
         }
 
+        // マップ名を編集
+        function editMapName(element) {
+            const oldName = element.dataset.name;
+            const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
+            
+            // 編集モードに入る
+            element.contentEditable = true;
+            element.classList.add('editing');
+            element.focus();
+            
+            // 選択範囲を最後に移動
+            const range = document.createRange();
+            range.selectNodeContents(element);
+            range.collapse(false);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+            
+            // 編集終了時の処理
+            const handleBlur = function() {
+                element.contentEditable = false;
+                element.classList.remove('editing');
+                
+                const newName = element.textContent.trim();
+                
+                if (newName && newName !== oldName) {
+                    if (savedMaps[newName]) {
+                        alert("この名前のマップは既に存在します");
+                        element.textContent = oldName;
+                        return;
+                    }
+                    
+                    // マップ名を変更
+                    savedMaps[newName] = savedMaps[oldName];
+                    delete savedMaps[oldName];
+                    localStorage.setItem('savedMaps', JSON.stringify(savedMaps));
+                    
+                    // 現在のマップ名を更新
+                    if (currentMapName === oldName) {
+                        currentMapName = newName;
+                    }
+                    
+                    alert(`マップ名を「${oldName}」から「${newName}」に変更しました`);
+                } else {
+                    element.textContent = oldName;
+                }
+                
+                element.removeEventListener('blur', handleBlur);
+                element.removeEventListener('keydown', handleKeyDown);
+            };
+            
+            // Enterキーで編集終了
+            const handleKeyDown = function(e) {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    element.blur();
+                }
+            };
+            
+            element.addEventListener('blur', handleBlur);
+            element.addEventListener('keydown', handleKeyDown);
+        }
+
         // マップギャラリーを非表示
         function hideGallery() {
             document.getElementById("gallery-container").style.display = "none";
         }
 
         // ギャラリーからマップを読み込み
-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; // 現在のマップ名を更新
 
-    // 保存フォームにマップ名をセット
-    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;
+                    }
+                });
+            });
+
+            // レイヤーを追加
+            layers = []; // レイヤーリストをリセット
+            
+            mapData.layers.forEach(layerData => {
+                let layer;
+                
+                switch (layerData.type) {
+                    case 'tile':
+                        layer = L.tileLayer(layerData.url, {
+                            attribution: layerData.attribution,
+                            ...layerData.options
+                        }).addTo(map);
+                        break;
+                        
+                    case 'canvas':
+                        layer = L.canvas(layerData.options).addTo(map);
+                        break;
+                        
+                    case 'svg':
+                        layer = L.svg(layerData.options).addTo(map);
+                        break;
+                        
+                    case 'grid':
+                        layer = L.gridLayer(layerData.options).addTo(map);
+                        break;
+                        
+                    case 'polyline':
+                        layer = L.polyline(layerData.coords, layerData.options).addTo(map);
+                        break;
+                        
+                    case 'polygon':
+                        layer = L.polygon(layerData.coords, layerData.options).addTo(map);
+                        break;
+                        
+                    case 'circle':
+                        layer = L.circle(layerData.coords[0], layerData.options).addTo(map);
+                        break;
+                        
+                    case 'circlemarker':
+                        layer = L.circleMarker(layerData.coords[0], layerData.options).addTo(map);
+                        break;
+                        
+                    case 'marker':
+                        layer = L.marker(layerData.coords[0], layerData.options).addTo(map);
+                        break;
+                        
+                    case 'layergroup':
+                        layer = L.layerGroup().addTo(map);
+                        break;
+                        
+                    case 'featuregroup':
+                        layer = L.featureGroup().addTo(map);
+                        break;
+                        
+                    case 'control':
+                        // ベースレイヤーとオーバーレイレイヤーを収集
+                        const baseLayers = {};
+                        const overlays = {};
+                        
+                        layers.forEach(l => {
+                            if (l.type === 'tile' || l.type === 'canvas' || l.type === 'svg' || l.type === 'grid') {
+                                baseLayers[l.name] = l.layer;
+                            } else {
+                                overlays[l.name] = l.layer;
+                            }
+                        });
+                        
+                        layer = L.control.layers(baseLayers, overlays, layerData.options).addTo(map);
+                        layerControls[layer._leaflet_id] = layer;
+                        break;
+                }
+                
+                if (layer) {
+                    layers.push({
+                        id: layerData.id,
+                        name: layerData.name,
+                        type: layerData.type,
+                        layer: layer,
+                        options: layerData.options
+                    });
+                }
+            });
+
+            // プラグインを読み込み
+            plugins = mapData.plugins || [];
+            savePluginsToStorage();
+            
+            // 未読み込みのプラグインを読み込む
+            plugins.forEach(plugin => {
+                if (!plugin.loaded) {
+                    loadPlugin(plugin.url);
+                }
+            });
+
+            // 保存フォームにマップ名をセット
+            document.getElementById("save-map-name").value = currentMapName;
+            
+            // ユーザーに通知
+            alert(`マップ「${mapName}」を読み込みました`);
+            
+            hideGallery();
+            updateEditNextMarkerButton();
+            updateLayerTree();
+        }
 
         // ギャラリーからマップを削除
         function deleteMapFromGallery(mapName) {
@@ -1148,12 +2438,21 @@ function loadMapFromGallery(mapName) {
         // 現在のマップをクリア
         function clearCurrentMap() {
             map.eachLayer(layer => {
-                if (layer instanceof L.Marker) {
+                if (!(layer instanceof L.TileLayer)) {
                     map.removeLayer(layer);
                 }
             });
+            
+            // レイヤーコントロールを削除
+            Object.values(layerControls).forEach(control => {
+                map.removeControl(control);
+            });
+            
+            layerControls = {};
+            layers = [];
             currentMapName = '';
             updateEditNextMarkerButton();
+            updateLayerTree();
         }
 
         // HTMLを生成
@@ -1182,8 +2481,90 @@ function loadMapFromGallery(mapName) {
 
             const center = map.getCenter();
             const zoom = map.getZoom();
+            
+            // プラグインスクリプトを収集
+            let pluginScripts = '';
+            plugins.forEach(plugin => {
+                pluginScripts += `<script src="${plugin.url}"><\/script>\n`;
+            });
+            
+            // レイヤーを収集
+            let layerScripts = '';
+            let layerControls = '';
+            let baseLayers = {};
+            let overlayLayers = {};
+            
+            layers.forEach(layer => {
+                let layerScript = '';
+                let layerVarName = `layer_${layer.id.replace(/-/g, '_')}`;
+                
+                switch (layer.type) {
+                    case 'tile':
+                        layerScript = `var ${layerVarName} = L.tileLayer('${layer.layer._url}', ${JSON.stringify(layer.layer.options)});\n`;
+                        baseLayers[`"${layer.name}"`] = layerVarName;
+                        break;
+                        
+                    case 'polyline':
+                        layerScript = `var ${layerVarName} = L.polyline(${JSON.stringify(layer.layer.getLatLngs())}, ${JSON.stringify(layer.layer.options)});\n`;
+                        overlayLayers[`"${layer.name}"`] = layerVarName;
+                        break;
+                        
+                    case 'polygon':
+                        layerScript = `var ${layerVarName} = L.polygon(${JSON.stringify(layer.layer.getLatLngs())}, ${JSON.stringify(layer.layer.options)});\n`;
+                        overlayLayers[`"${layer.name}"`] = layerVarName;
+                        break;
+                        
+                    case 'circle':
+                        layerScript = `var ${layerVarName} = L.circle([${layer.layer.getLatLng().lat}, ${layer.layer.getLatLng().lng}], ${JSON.stringify(layer.layer.options)});\n`;
+                        overlayLayers[`"${layer.name}"`] = layerVarName;
+                        break;
+                        
+                    case 'circlemarker':
+                        layerScript = `var ${layerVarName} = L.circleMarker([${layer.layer.getLatLng().lat}, ${layer.layer.getLatLng().lng}], ${JSON.stringify(layer.layer.options)});\n`;
+                        overlayLayers[`"${layer.name}"`] = layerVarName;
+                        break;
+                        
+                    case 'marker':
+                        layerScript = `var ${layerVarName} = L.marker([${layer.layer.getLatLng().lat}, ${layer.layer.getLatLng().lng}], ${JSON.stringify(layer.layer.options)});\n`;
+                        overlayLayers[`"${layer.name}"`] = layerVarName;
+                        break;
+                        
+                    case 'layergroup':
+                        layerScript = `var ${layerVarName} = L.layerGroup();\n`;
+                        overlayLayers[`"${layer.name}"`] = layerVarName;
+                        break;
+                        
+                    case 'featuregroup':
+                        layerScript = `var ${layerVarName} = L.featureGroup();\n`;
+                        overlayLayers[`"${layer.name}"`] = layerVarName;
+                        break;
+                        
+                    case 'control':
+                        // コントロールは別途処理
+                        break;
+                }
+                
+                layerScripts += layerScript;
+            });
+            
+            // レイヤーコントロールを生成
+            if (Object.keys(baseLayers).length > 0 || Object.keys(overlayLayers).length > 0) {
+                layerControls = `L.control.layers({\n    ${Object.keys(baseLayers).join(',\n    ')}\n}, {\n    ${Object.keys(overlayLayers).join(',\n    ')}\n}).addTo(map);\n`;
+            }
+            
+            // レイヤーをマップに追加
+            let addLayersScript = '';
+            Object.values(baseLayers).forEach(layerVar => {
+                addLayersScript += `${layerVar}.addTo(map);\n`;
+            });
+            
+            Object.values(overlayLayers).forEach(layerVar => {
+                addLayersScript += `${layerVar}.addTo(map);\n`;
+            });
+            
             let html = `<div id="map" style="height: 600px; width: 100%;">
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
+${pluginScripts}
 <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"><\/script>
 <script>
     var map = L.map('map').setView([${center.lat}, ${center.lng}], ${zoom});
@@ -1191,6 +2572,10 @@ function loadMapFromGallery(mapName) {
         attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors'
     }).addTo(map);
     
+    ${layerScripts}
+    ${addLayersScript}
+    ${layerControls}
+    
     ${markers.map(marker => `
         var icon = L.icon({
             iconUrl: '${marker.iconUrl}',
@@ -1230,4 +2615,4 @@ function loadMapFromGallery(mapName) {
         }
     </script>
 </body>
-</html>
+</html>