Update index.html

index.html

@@ -1149,24 +1149,56 @@
             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 showLayerEditor() {
+    const editor = document.getElementById("layer-editor");
+    editor.style.display = "block";
+    
+    // 画面中央に表示
+    editor.style.left = "50%";
+    editor.style.top = "50%";
+    editor.style.transform = "translate(-50%, -50%)";
+    
+    // タブをリセット
+    switchLayerTab('base');
+    updateBaseLayerForm();
+    updateOverlayLayerForm();
+    updateOtherLayerForm();
+    
+    // フォーカスを設定
+    setTimeout(() => {
+        const firstInput = editor.querySelector('input, select, textarea');
+        if (firstInput) firstInput.focus();
+    }, 100);
+}
+
+// タブ切り替え関数を改善
+function switchLayerTab(tabId) {
+    // タブを非アクティブ化
+    document.querySelectorAll('.layer-tab').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    
+    // タブコンテンツを非表示
+    document.querySelectorAll('.layer-tab-content').forEach(content => {
+        content.classList.remove('active');
+    });
+    
+    // 選択されたタブをアクティブ化
+    const tab = document.querySelector(`.layer-tab[data-tab="${tabId}"]`);
+    if (tab) {
+        tab.classList.add('active');
+        document.getElementById(`${tabId}-tab`).classList.add('active');
+        
+        // 現在編集中のレイヤーをクリア
+        if (currentEditingLayer) {
+            map.removeLayer(currentEditingLayer);
+            currentEditingLayer = null;
+            overlayCoords = [];
+            updateOverlayCoordsList();
         }
+    }
+}
 
         // レイヤータブを切り替え
         function switchLayerTab(tabId) {
@@ -1202,32 +1234,69 @@
             }
         }
 
-        // オーバーレイレイヤーフォームを更新
-        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 updateOverlayLayerForm() {
+    const layerType = document.getElementById("overlay-layer-type").value;
+    let options = {};
+    
+    try {
+        const optionsText = document.getElementById("overlayer-options").value;
+        if (optionsText) {
+            options = JSON.parse(optionsText);
+        }
+    } catch (e) {
+        console.error("Options JSON error:", e);
+    }
+    
+    // 現在編集中のレイヤーをクリア
+    if (currentEditingLayer) {
+        map.removeLayer(currentEditingLayer);
+        currentEditingLayer = null;
+    }
+    
+    overlayCoords = [];
+    updateOverlayCoordsList();
+    
+    // オプションフォームのプレースホルダーを設定
+    let placeholder = '{"color": "#ff0000", "weight": 5}';
+    
+    // 新しいレイヤーを作成
+    switch(layerType) {
+        case 'polyline':
+            currentEditingLayer = L.polyline([], options).addTo(map);
+            break;
+        case 'polygon':
+            currentEditingLayer = L.polygon([], options).addTo(map);
+            placeholder = '{"color": "#ff0000", "fillColor": "#ff0000", "weight": 5}';
+            break;
+        case 'circle':
+            currentEditingLayer = L.circle([0, 0], options).addTo(map);
+            placeholder = '{"radius": 500, "color": "#ff0000", "fillColor": "#ff0000"}';
+            break;
+        case 'circlemarker':
+            currentEditingLayer = L.circleMarker([0, 0], options).addTo(map);
+            placeholder = '{"radius": 10, "color": "#ff0000", "fillColor": "#ff0000"}';
+            break;
+        case 'marker':
+            currentEditingLayer = L.marker([0, 0], options).addTo(map);
+            placeholder = '{"draggable": true}';
+            break;
+    }
+    
+    document.getElementById("overlayer-options").placeholder = placeholder;
+    
+    // オプション変更時のリアルタイム更新
+    document.getElementById("overlayer-options").addEventListener('input', function() {
+        try {
+            const newOptions = JSON.parse(this.value);
+            if (currentEditingLayer && currentEditingLayer.setStyle) {
+                currentEditingLayer.setStyle(newOptions);
             }
+        } catch (e) {
+            // JSONが無効な場合は無視
         }
+    });
+}
 
         // その他レイヤーフォームを更新
         function updateOtherLayerForm() {
@@ -1240,61 +1309,72 @@
             }
         }
 
-        // ベースレイヤーを追加
-        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が不正です");
+
+
+      // ベースレイヤー追加関数にバリデーションを追加
+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が不正です:\n" + e.message);
+        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;
+        }
+        
+        // URLバリデーション
+        if (!url.includes('{z}') || !url.includes('{x}') || !url.includes('{y}')) {
+            if (!confirm("タイルURLに{z}, {x}, {y}のプレースホルダーが含まれていません。続行しますか？")) {
                 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.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();
-            }
-        }
+    
+    if (layer) {
+        layers.push({
+            id: 'layer-' + Date.now(),
+            name: layerName,
+            type: layerType,
+            layer: layer,
+            options: options
+        });
+        
+        saveCurrentMapToStorage();
+        updateLayerTree();
+        hideLayerEditor();
+        alert(`レイヤー「${layerName}」を追加しました`);
+    }
+}
 
         // オーバーレイレイヤーを追加
         function addOverlayLayer() {
@@ -1476,143 +1556,202 @@
         }
 
         // レイヤーツリーを更新
-        function updateLayerTree() {
-            const layerTreeContent = document.getElementById("layer-tree-content");
-            layerTreeContent.innerHTML = '';
+// レイヤーツリーの改善
+function updateLayerTree() {
+    const layerTreeContent = document.getElementById("layer-tree-content");
+    layerTreeContent.innerHTML = '';
+    
+    // レイヤーをタイプ別に分類
+    const layerTypes = {
+        'base': ['tile', 'canvas', 'svg', 'grid'],
+        'overlay': ['marker', 'polyline', 'polygon', 'circle', 'circlemarker', 'geojson', 'image', 'video'],
+        'other': ['layergroup', 'featuregroup', 'control', 'heatmap', 'cluster', 'vectorgrid', 'custom']
+    };
+    
+    // 各タイプごとに表示
+    Object.entries(layerTypes).forEach(([typeName, typeList]) => {
+        const typeLayers = layers.filter(l => typeList.includes(l.type));
+        
+        if (typeLayers.length > 0) {
+            // タイプヘッダー
+            const header = document.createElement('div');
+            header.className = 'layer-tree-item';
+            header.innerHTML = `
+                <span class="layer-tree-toggle">▸</span>
+                ${typeName === 'base' ? 'ベースレイヤー' : 
+                  typeName === 'overlay' ? 'オーバーレイレイヤー' : 'その他レイヤー'}
+                <span class="layer-count">(${typeLayers.length})</span>
+            `;
             
-            // ベースレイヤー
-            const baseLayers = layers.filter(l => 
-                l.type === 'tile' || l.type === 'canvas' || l.type === 'svg' || l.type === 'grid'
-            );
+            const groupId = `${typeName}-layers-group`;
+            header.addEventListener('click', function() {
+                this.querySelector('.layer-tree-toggle').textContent = 
+                    this.querySelector('.layer-tree-toggle').textContent === '▸' ? '▾' : '▸';
+                document.getElementById(groupId).classList.toggle('expanded');
+            });
             
-            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);
-            }
+            layerTreeContent.appendChild(header);
             
-            // オーバーレイレイヤー
-            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'
-            );
+            // レイヤーグループ
+            const group = document.createElement('div');
+            group.id = groupId;
+            group.className = 'layer-tree-item-group';
             
-            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);
+            typeLayers.forEach(layer => {
+                const layerItem = document.createElement('div');
+                layerItem.className = 'layer-tree-item';
                 
-                const overlayGroup = document.createElement('div');
-                overlayGroup.id = 'overlay-layers-group';
-                overlayGroup.className = 'layer-tree-item-group';
+                // レイヤーアイコン
+                const icon = document.createElement('span');
+                icon.className = 'layer-tree-icon';
+                icon.innerHTML = getLayerIcon(layer.type);
+                layerItem.appendChild(icon);
                 
-                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);
+                // レイヤー名
+                const nameSpan = document.createElement('span');
+                nameSpan.textContent = layer.name;
+                nameSpan.className = 'layer-name';
+                layerItem.appendChild(nameSpan);
+                
+                // 操作ボタン
+                const btnGroup = document.createElement('div');
+                btnGroup.className = 'layer-tree-buttons';
+                
+                const editBtn = document.createElement('button');
+                editBtn.className = 'layer-tree-btn edit-btn';
+                editBtn.title = '編集';
+                editBtn.innerHTML = '✏️';
+                editBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    editLayer(layer);
                 });
                 
-                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');
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'layer-tree-btn delete-btn';
+                deleteBtn.title = '削除';
+                deleteBtn.innerHTML = '🗑️';
+                deleteBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    deleteLayer(layer);
                 });
-                layerTreeContent.appendChild(otherHeader);
                 
-                const otherGroup = document.createElement('div');
-                otherGroup.id = 'other-layers-group';
-                otherGroup.className = 'layer-tree-item-group';
+                btnGroup.appendChild(editBtn);
+                btnGroup.appendChild(deleteBtn);
+                layerItem.appendChild(btnGroup);
                 
-                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());
-                        }
+                layerItem.addEventListener('click', function(e) {
+                    if (e.target.closest('.layer-tree-btn')) return;
+                    
+                    // レイヤーを選択状態にする
+                    document.querySelectorAll('.layer-tree-item').forEach(item => {
+                        item.classList.remove('selected');
                     });
-                    otherGroup.appendChild(layerItem);
+                    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());
+                    }
                 });
                 
-                layerTreeContent.appendChild(otherGroup);
-            }
+                group.appendChild(layerItem);
+            });
+            
+            layerTreeContent.appendChild(group);
+        }
+    });
+    
+    // 初期状態で最初のグループを展開
+    const firstGroup = document.querySelector('.layer-tree-item-group');
+    if (firstGroup) {
+        firstGroup.classList.add('expanded');
+        const firstHeader = document.querySelector('.layer-tree-item');
+        if (firstHeader) {
+            firstHeader.querySelector('.layer-tree-toggle').textContent = '▾';
+        }
+    }
+}
+
+// レイヤーアイコンを取得
+function getLayerIcon(type) {
+    const icons = {
+        'tile': '🧩',
+        'canvas': '🎨',
+        'svg': '🖌️',
+        'grid': '🔲',
+        'marker': '📍',
+        'polyline': '➖',
+        'polygon': '🔶',
+        'circle': '⭕',
+        'circlemarker': '🔵',
+        'layergroup': '📁',
+        'featuregroup': '📂',
+        'control': '🎚️',
+        'heatmap': '🔥',
+        'cluster': '👥',
+        'vectorgrid': '🧊'
+    };
+    return icons[type] || '🔘';
+}
+
+// レイヤー編集関数
+function editLayer(layer) {
+    showLayerEditor();
+    
+    // レイヤータイプに応じたタブを選択
+    let tabId = 'other';
+    if (['tile', 'canvas', 'svg', 'grid'].includes(layer.type)) {
+        tabId = 'base';
+    } else if (['marker', 'polyline', 'polygon', 'circle', 'circlemarker', 'geojson', 'image', 'video'].includes(layer.type)) {
+        tabId = 'overlay';
+    }
+    
+    switchLayerTab(tabId);
+    
+    // フォームに値を設定
+    document.getElementById(`${tabId}-layer-type`).value = layer.type;
+    
+    if (tabId === 'base' && layer.type === 'tile') {
+        document.getElementById("tile-layer-url").value = layer.layer._url;
+        document.getElementById("tile-layer-attribution").value = layer.layer.options.attribution || '';
+        document.getElementById("tile-layer-options").value = JSON.stringify(
+            Object.fromEntries(
+                Object.entries(layer.layer.options)
+                    .filter(([key]) => !['attribution'].includes(key))
+            ), null, 2
+        );
+    } else if (tabId === 'overlay') {
+        document.getElementById("overlayer-options").value = JSON.stringify(layer.options, null, 2);
+        
+        // 座標を設定
+        if (['polyline', 'polygon', 'circle', 'circlemarker', 'marker'].includes(layer.type)) {
+            overlayCoords = layer.layer.getLatLngs ? layer.layer.getLatLngs() : 
+                          layer.layer.getLatLng ? [layer.layer.getLatLng()] : [];
+            updateOverlayCoordsList();
         }
+    } else if (tabId === 'other') {
+        document.getElementById("other-layer-options").value = JSON.stringify(layer.options, null, 2);
+    }
+    
+    // 既存のレイヤーを削除
+    const index = layers.findIndex(l => l.id === layer.id);
+    if (index !== -1) {
+        layers.splice(index, 1);
+        map.removeLayer(layer.layer);
+    }
+}
+
+// レイヤー削除関数
+function deleteLayer(layer) {
+    if (confirm(`レイヤー「${layer.name}」を削除しますか？`)) {
+        map.removeLayer(layer.layer);
+        layers = layers.filter(l => l.id !== layer.id);
+        saveCurrentMapToStorage();
+        updateLayerTree();
+    }
+}
 
         // プラグインマネージャーを表示
         function showPluginManager() {