| | <!DOCTYPE html> |
| | <html lang="ja"> |
| |
|
| | <head> |
| | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| | <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap" rel="stylesheet"> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| | <title>HACKER MAP EDITOR</title> |
| | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <style> |
| | :root { |
| | --hacker-primary: #00ffff; |
| | --hacker-secondary: #0088ff; |
| | --hacker-bg: #001a33; |
| | --hacker-text: #e0e0e0; |
| | --hacker-accent: #ff00ff; |
| | --hacker-border: #0066ff; |
| | } |
| | |
| | body { |
| | font-family: 'Source Code Pro', monospace; |
| | background-color: var(--hacker-bg); |
| | color: var(--hacker-text); |
| | background-image: radial-gradient(circle at 10% 20%, rgba(0, 180, 255, 0.05) 0%, rgba(0, 50, 100, 0.1) 90%); |
| | min-height: 100vh; |
| | overflow-x: hidden; |
| | } |
| | |
| | #save-map-modal { |
| | display: none; |
| | position: fixed; |
| | 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: 2001; |
| | width: 80%; |
| | max-width: 500px; |
| | } |
| | |
| | #save-map-modal h3 { |
| | color: var(--hacker-primary); |
| | margin-bottom: 1rem; |
| | text-align: center; |
| | } |
| | |
| | #save-map-name { |
| | 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; |
| | } |
| | .hacker-header { |
| | background: linear-gradient(90deg, rgba(0, 40, 80, 0.8) 0%, rgba(0, 80, 160, 0.6) 100%); |
| | border-bottom: 1px solid var(--hacker-border); |
| | box-shadow: 0 0 15px rgba(0, 200, 255, 0.3); |
| | padding: 1rem; |
| | margin-bottom: 1rem; |
| | position: relative; |
| | overflow: hidden; |
| | } |
| | |
| | .hacker-header::before { |
| | content: ""; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | background: linear-gradient(90deg, |
| | transparent 0%, |
| | rgba(0, 255, 255, 0.1) 50%, |
| | transparent 100%); |
| | animation: scanline 5s linear infinite; |
| | } |
| | |
| | @keyframes scanline { |
| | 0% { transform: translateX(-100%); } |
| | 100% { transform: translateX(100%); } |
| | } |
| | |
| | #map { |
| | height: 600px; |
| | width: 100%; |
| | border: 2px solid var(--hacker-border); |
| | box-shadow: 0 0 20px rgba(0, 200, 255, 0.4); |
| | filter: hue-rotate(0deg) saturate(1.2); |
| | transition: all 0.3s ease; |
| | } |
| | |
| | #map:hover { |
| | box-shadow: 0 0 30px rgba(0, 200, 255, 0.6); |
| | } |
| | |
| | #marker-editor { |
| | display: none; |
| | position: absolute; |
| | top: 10px; |
| | left: 10px; |
| | background: rgba(0, 20, 40, 0.95); |
| | padding: 1.5rem; |
| | border-radius: 0; |
| | border: 2px solid var(--hacker-border); |
| | box-shadow: 0 0 20px rgba(0, 200, 255, 0.5); |
| | z-index: 1000; |
| | cursor: move; |
| | font-family: 'Source Code Pro', monospace; |
| | color: var(--hacker-text); |
| | width: 350px; |
| | max-height: 80vh; |
| | overflow-y: auto; |
| | } |
| | |
| | #marker-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; |
| | } |
| | |
| | #marker-editor label { |
| | color: var(--hacker-secondary); |
| | display: block; |
| | margin-bottom: 0.5rem; |
| | font-size: 0.9rem; |
| | } |
| | |
| | #marker-editor input, |
| | #marker-editor textarea { |
| | background: rgba(0, 10, 20, 0.9); |
| | border: 1px solid var(--hacker-border); |
| | color: var(--hacker-primary); |
| | padding: 0.5rem; |
| | margin-bottom: 1rem; |
| | width: 100%; |
| | font-family: 'Source Code Pro', monospace; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | #marker-editor input:focus, |
| | #marker-editor textarea:focus { |
| | outline: none; |
| | border-color: var(--hacker-primary); |
| | box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); |
| | } |
| | |
| | #marker-editor button { |
| | background: linear-gradient(180deg, rgba(0, 100, 200, 0.8) 0%, rgba(0, 50, 150, 0.8) 100%); |
| | color: white; |
| | border: 1px solid var(--hacker-border); |
| | padding: 0.75rem 1.5rem; |
| | margin: 0.5rem 0; |
| | cursor: pointer; |
| | font-family: 'Source Code Pro', monospace; |
| | font-weight: 700; |
| | text-transform: uppercase; |
| | letter-spacing: 1px; |
| | transition: all 0.3s ease; |
| | width: 100%; |
| | } |
| | |
| | #marker-editor button:hover { |
| | background: linear-gradient(180deg, rgba(0, 150, 255, 0.8) 0%, rgba(0, 80, 180, 0.8) 100%); |
| | box-shadow: 0 0 15px rgba(0, 200, 255, 0.6); |
| | transform: translateY(-2px); |
| | } |
| | |
| | #marker-editor button#delete-marker { |
| | background: linear-gradient(180deg, rgba(200, 0, 0, 0.8) 0%, rgba(150, 0, 0, 0.8) 100%); |
| | } |
| | |
| | #marker-editor button#delete-marker:hover { |
| | background: linear-gradient(180deg, rgba(255, 50, 50, 0.8) 0%, rgba(200, 0, 0, 0.8) 100%); |
| | } |
| | |
| | #icon-preview { |
| | display: none; |
| | margin: 1rem 0; |
| | border: 1px solid var(--hacker-border); |
| | max-width: 100%; |
| | box-shadow: 0 0 10px rgba(0, 200, 255, 0.3); |
| | } |
| | |
| | #icon-settings { |
| | display: none; |
| | margin-top: 1rem; |
| | border-top: 1px dashed var(--hacker-border); |
| | padding-top: 1rem; |
| | } |
| | |
| | #icon-settings label { |
| | color: var(--hacker-secondary); |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | input[type=range] { |
| | -webkit-appearance: none; |
| | width: 100%; |
| | height: 5px; |
| | background: rgba(0, 50, 100, 0.5); |
| | border-radius: 5px; |
| | margin: 1rem 0; |
| | } |
| | |
| | input[type=range]::-webkit-slider-thumb { |
| | -webkit-appearance: none; |
| | width: 15px; |
| | height: 15px; |
| | background: var(--hacker-primary); |
| | border-radius: 50%; |
| | cursor: pointer; |
| | box-shadow: 0 0 5px var(--hacker-primary); |
| | } |
| | |
| | input[type=number] { |
| | width: 60px; |
| | margin-left: 1rem; |
| | } |
| | |
| | .hacker-btn { |
| | background: linear-gradient(180deg, rgba(0, 100, 200, 0.8) 0%, rgba(0, 50, 150, 0.8) 100%); |
| | color: white; |
| | border: 1px solid var(--hacker-border); |
| | padding: 0.75rem 1.5rem; |
| | margin: 0.5rem; |
| | cursor: pointer; |
| | font-family: 'Source Code Pro', monospace; |
| | font-weight: 700; |
| | text-transform: uppercase; |
| | letter-spacing: 1px; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .hacker-btn:hover { |
| | background: linear-gradient(180deg, rgba(0, 150, 255, 0.8) 0%, rgba(0, 80, 180, 0.8) 100%); |
| | box-shadow: 0 0 15px rgba(0, 200, 255, 0.6); |
| | transform: translateY(-2px); |
| | } |
| | |
| | .hacker-btn.danger { |
| | background: linear-gradient(180deg, rgba(200, 0, 0, 0.8) 0%, rgba(150, 0, 0, 0.8) 100%); |
| | } |
| | |
| | .hacker-btn.danger:hover { |
| | background: linear-gradient(180deg, rgba(255, 50, 50, 0.8) 0%, rgba(200, 0, 0, 0.8) 100%); |
| | } |
| | |
| | .hacker-btn.secondary { |
| | background: linear-gradient(180deg, rgba(100, 0, 200, 0.8) 0%, rgba(50, 0, 150, 0.8) 100%); |
| | } |
| | |
| | .hacker-btn.secondary:hover { |
| | background: linear-gradient(180deg, rgba(150, 0, 255, 0.8) 0%, rgba(80, 0, 180, 0.8) 100%); |
| | } |
| | |
| | .hacker-container { |
| | background: rgba(0, 10, 20, 0.8); |
| | border: 1px solid var(--hacker-border); |
| | padding: 1.5rem; |
| | margin: 1rem 0; |
| | box-shadow: 0 0 15px rgba(0, 100, 200, 0.3); |
| | } |
| | |
| | .hacker-title { |
| | color: var(--hacker-primary); |
| | text-shadow: 0 0 5px var(--hacker-primary); |
| | font-weight: 700; |
| | margin-bottom: 1rem; |
| | border-bottom: 1px solid var(--hacker-border); |
| | padding-bottom: 0.5rem; |
| | } |
| | |
| | #output-html { |
| | background: rgba(0, 5, 10, 0.9); |
| | border: 1px solid var(--hacker-border); |
| | padding: 1rem; |
| | font-family: 'Source Code Pro', monospace; |
| | color: var(--hacker-primary); |
| | white-space: pre-wrap; |
| | word-break: break-all; |
| | max-height: 300px; |
| | overflow-y: auto; |
| | margin: 1rem 0; |
| | box-shadow: inset 0 0 10px rgba(0, 50, 100, 0.5); |
| | } |
| | |
| | #loading { |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | background-color: rgba(0, 10, 20, 0.9); |
| | display: flex; |
| | flex-direction: column; |
| | align-items: center; |
| | justify-content: center; |
| | font-size: 1.5rem; |
| | z-index: 9999; |
| | color: var(--hacker-primary); |
| | text-shadow: 0 0 5px var(--hacker-primary); |
| | } |
| | |
| | .loader { |
| | width: 100px; |
| | aspect-ratio: 1; |
| | padding: 10px; |
| | box-sizing: border-box; |
| | display: grid; |
| | filter: blur(5px) contrast(10) hue-rotate(180deg); |
| | mix-blend-mode: lighten; |
| | } |
| | |
| | .loader:before, |
| | .loader:after { |
| | content: ""; |
| | grid-area: 1/1; |
| | width: 40px; |
| | height: 40px; |
| | background: var(--hacker-primary); |
| | animation: l7 2s infinite; |
| | box-shadow: 0 0 5px var(--hacker-primary); |
| | } |
| | |
| | .loader:after { |
| | animation-delay: -1s; |
| | } |
| | |
| | @keyframes l7 { |
| | 0% { transform: translate(0, 0); } |
| | 25% { transform: translate(100%, 0); } |
| | 50% { transform: translate(100%, 100%); } |
| | 75% { transform: translate(0, 100%); } |
| | 100% { transform: translate(0, 0); } |
| | } |
| | |
| | .terminal-line { |
| | position: relative; |
| | padding-left: 1.5rem; |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | .terminal-line::before { |
| | content: ">"; |
| | position: absolute; |
| | left: 0; |
| | color: var(--hacker-accent); |
| | text-shadow: 0 0 5px var(--hacker-accent); |
| | } |
| | |
| | .blink { |
| | animation: blink 1s step-end infinite; |
| | } |
| | |
| | @keyframes blink { |
| | from, to { opacity: 1; } |
| | 50% { opacity: 0; } |
| | } |
| | |
| | .glow-text { |
| | text-shadow: 0 0 5px currentColor; |
| | } |
| | |
| | .glow-box { |
| | box-shadow: 0 0 10px currentColor; |
| | } |
| | |
| | .hacker-divider { |
| | height: 1px; |
| | background: linear-gradient(90deg, transparent 0%, var(--hacker-border) 50%, transparent 100%); |
| | margin: 1rem 0; |
| | } |
| | |
| | body::-webkit-scrollbar { |
| | width: 8px; |
| | background-color: rgba(0, 50, 100, 0.3); |
| | } |
| | |
| | body::-webkit-scrollbar-thumb { |
| | background: var(--hacker-primary); |
| | border-radius: 4px; |
| | box-shadow: inset 0 0 5px rgba(0, 200, 255, 0.5); |
| | } |
| | |
| | |
| | #layer-editor { |
| | display: none; |
| | position: fixed; |
| | top: 50%; |
| | left: 50%; |
| | transform: translate(-50%, -50%); |
| | background: rgba(0, 20, 40, 0.97); |
| | border: 2px solid var(--hacker-border); |
| | box-shadow: 0 0 30px rgba(0, 200, 255, 0.5); |
| | z-index: 2000; |
| | width: 90%; |
| | max-width: 600px; |
| | max-height: 90vh; |
| | overflow-y: auto; |
| | padding: 1.5rem; |
| | font-size: 0.95rem; |
| | } |
| | |
| | #layer-editor h3 { |
| | color: var(--hacker-primary); |
| | text-shadow: 0 0 5px var(--hacker-primary); |
| | border-bottom: 2px solid var(--hacker-border); |
| | padding-bottom: 0.5rem; |
| | margin-bottom: 1.5rem; |
| | font-weight: 700; |
| | } |
| | |
| | .layer-tabs { |
| | display: flex; |
| | margin-bottom: 1.5rem; |
| | border-bottom: 2px solid var(--hacker-border); |
| | } |
| | |
| | .layer-tab { |
| | padding: 0.5rem 1.2rem; |
| | cursor: pointer; |
| | border: 2px solid transparent; |
| | margin-right: 0.5rem; |
| | border-radius: 4px 4px 0 0; |
| | transition: all 0.2s ease; |
| | background: rgba(0, 50, 100, 0.3); |
| | font-size: 0.9rem; |
| | } |
| | |
| | .layer-tab:hover { |
| | background: rgba(0, 100, 200, 0.3); |
| | } |
| | |
| | .layer-tab.active { |
| | background: rgba(0, 100, 200, 0.6); |
| | border-color: var(--hacker-border); |
| | border-bottom-color: rgba(0, 20, 40, 0.97); |
| | margin-bottom: -2px; |
| | } |
| | |
| | .layer-tab-content { |
| | padding: 1rem 0; |
| | display: none; |
| | } |
| | |
| | .layer-tab-content.active { |
| | display: block; |
| | } |
| | |
| | .layer-form-group { |
| | margin-bottom: 1.2rem; |
| | } |
| | |
| | .layer-form-group label { |
| | display: block; |
| | margin-bottom: 0.5rem; |
| | color: var(--hacker-secondary); |
| | font-weight: bold; |
| | font-size: 0.9rem; |
| | } |
| | |
| | .layer-form-group input, |
| | .layer-form-group textarea, |
| | .layer-form-group select { |
| | width: 100%; |
| | padding: 0.6rem; |
| | background: rgba(0, 10, 20, 0.9); |
| | border: 1px solid var(--hacker-border); |
| | color: var(--hacker-text); |
| | font-family: 'Source Code Pro', monospace; |
| | transition: all 0.3s ease; |
| | font-size: 0.9rem; |
| | } |
| | |
| | .layer-form-group textarea { |
| | min-height: 100px; |
| | resize: vertical; |
| | } |
| | |
| | .layer-form-group input:focus, |
| | .layer-form-group textarea:focus, |
| | .layer-form-group select:focus { |
| | outline: none; |
| | border-color: var(--hacker-primary); |
| | box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); |
| | } |
| | |
| | .layer-form-actions { |
| | margin-top: 1.5rem; |
| | display: flex; |
| | gap: 0.8rem; |
| | } |
| | |
| | .layer-form-actions button { |
| | flex: 1; |
| | padding: 0.75rem; |
| | font-size: 0.9rem; |
| | } |
| | |
| | |
| | #layer-tree { |
| | display: none; |
| | position: absolute; |
| | top: 10px; |
| | left: 10px; |
| | background: rgba(0, 20, 40, 0.95); |
| | border: 2px solid var(--hacker-border); |
| | box-shadow: 0 0 20px rgba(0, 200, 255, 0.4); |
| | z-index: 1000; |
| | width: 300px; |
| | max-height: 80vh; |
| | overflow-y: auto; |
| | padding: 1rem; |
| | font-size: 0.9rem; |
| | } |
| | |
| | #layer-tree h3 { |
| | color: var(--hacker-primary); |
| | margin-bottom: 1rem; |
| | font-size: 1.1rem; |
| | border-bottom: 1px solid var(--hacker-border); |
| | padding-bottom: 0.5rem; |
| | } |
| | |
| | .layer-tree-item { |
| | padding: 0.5rem; |
| | cursor: pointer; |
| | display: flex; |
| | align-items: center; |
| | transition: all 0.2s ease; |
| | border-bottom: 1px solid rgba(0, 66, 133, 0.3); |
| | } |
| | |
| | .layer-tree-item:hover { |
| | background: rgba(0, 50, 100, 0.3); |
| | } |
| | |
| | .layer-tree-item.selected { |
| | background: rgba(0, 100, 200, 0.3); |
| | color: var(--hacker-primary); |
| | } |
| | |
| | .layer-tree-toggle { |
| | margin-right: 0.5rem; |
| | width: 1em; |
| | display: inline-block; |
| | text-align: center; |
| | } |
| | |
| | .layer-count { |
| | margin-left: auto; |
| | font-size: 0.8em; |
| | color: var(--hacker-secondary); |
| | opacity: 0.7; |
| | } |
| | |
| | .layer-tree-icon { |
| | margin-right: 0.8rem; |
| | font-size: 1.1em; |
| | width: 1.2em; |
| | text-align: center; |
| | } |
| | |
| | .layer-name { |
| | flex-grow: 1; |
| | overflow: hidden; |
| | text-overflow: ellipsis; |
| | white-space: nowrap; |
| | } |
| | |
| | .layer-tree-buttons { |
| | margin-left: auto; |
| | display: flex; |
| | gap: 0.3rem; |
| | } |
| | |
| | .layer-tree-btn { |
| | background: none; |
| | border: none; |
| | color: var(--hacker-text); |
| | cursor: pointer; |
| | padding: 0.2rem; |
| | font-size: 0.9em; |
| | opacity: 0.7; |
| | transition: all 0.2s ease; |
| | } |
| | |
| | .layer-tree-btn:hover { |
| | color: var(--hacker-primary); |
| | opacity: 1; |
| | transform: scale(1.1); |
| | } |
| | |
| | .layer-tree-item-group { |
| | margin-left: 1.5rem; |
| | display: none; |
| | border-left: 1px dashed var(--hacker-border); |
| | padding-left: 0.8rem; |
| | } |
| | |
| | .layer-tree-item-group.expanded { |
| | display: block; |
| | } |
| | |
| | |
| | #gallery-container { |
| | display: none; |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | background-color: rgba(0, 10, 20, 0.95); |
| | z-index: 2000; |
| | overflow-y: auto; |
| | padding: 2rem; |
| | } |
| | |
| | .gallery-map-item { |
| | background: rgba(0, 20, 40, 0.8); |
| | border: 1px solid var(--hacker-border); |
| | padding: 1rem; |
| | margin-bottom: 1rem; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .gallery-map-item:hover { |
| | background: rgba(0, 40, 80, 0.8); |
| | box-shadow: 0 0 15px rgba(0, 200, 255, 0.4); |
| | } |
| | |
| | .gallery-map-title { |
| | 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 { |
| | height: 150px; |
| | background-color: rgba(0, 30, 60, 0.5); |
| | margin-bottom: 0.5rem; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | color: var(--hacker-secondary); |
| | font-size: 0.9rem; |
| | white-space: pre-wrap; |
| | line-height: 1.4; |
| | overflow: hidden; |
| | } |
| | |
| | .gallery-map-actions { |
| | display: flex; |
| | gap: 0.5rem; |
| | } |
| | |
| | .gallery-btn { |
| | flex: 1; |
| | padding: 0.5rem; |
| | font-size: 0.8rem; |
| | } |
| | |
| | |
| | #plugin-manager { |
| | display: none; |
| | position: fixed; |
| | top: 50%; |
| | left: 50%; |
| | transform: translate(-50%, -50%); |
| | background: rgba(0, 20, 40, 0.95); |
| | border: 2px solid var(--hacker-border); |
| | padding: 2rem; |
| | z-index: 2002; |
| | width: 90%; |
| | max-width: 600px; |
| | max-height: 90vh; |
| | overflow-y: auto; |
| | } |
| | |
| | #plugin-manager h3 { |
| | color: var(--hacker-primary); |
| | margin-bottom: 1.5rem; |
| | text-align: center; |
| | border-bottom: 1px solid var(--hacker-border); |
| | padding-bottom: 0.5rem; |
| | } |
| | |
| | #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.75rem; |
| | font-family: 'Source Code Pro', monospace; |
| | } |
| | |
| | #plugin-list { |
| | max-height: 300px; |
| | overflow-y: auto; |
| | margin: 1.5rem 0; |
| | padding: 0.5rem; |
| | background: rgba(0, 10, 20, 0.5); |
| | border: 1px solid var(--hacker-border); |
| | } |
| | |
| | .plugin-item { |
| | padding: 0.8rem; |
| | margin-bottom: 0.8rem; |
| | 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.8rem; |
| | } |
| | |
| | .plugin-item-actions button { |
| | flex: 1; |
| | padding: 0.4rem; |
| | font-size: 0.8rem; |
| | } |
| | |
| | |
| | @media (max-width: 768px) { |
| | #layer-editor, #plugin-manager { |
| | width: 95%; |
| | padding: 1rem; |
| | } |
| | |
| | .layer-tabs { |
| | flex-wrap: wrap; |
| | } |
| | |
| | .layer-tab { |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | #layer-tree { |
| | width: 250px; |
| | } |
| | |
| | .hacker-btn { |
| | padding: 0.5rem 1rem; |
| | font-size: 0.8rem; |
| | margin: 0.3rem; |
| | } |
| | } |
| | </style> |
| | </head> |
| |
|
| | <body> |
| | <div id="loading"> |
| | <div class="loader"></div> |
| | <div class="terminal-line glow-text">INITIALIZING MAP SYSTEM<span class="blink">_</span></div> |
| | <div class="terminal-line glow-text">LOADING ASSETS...</div> |
| | <div class="terminal-line glow-text">CONNECTING TO DATABASE...</div> |
| | </div> |
| |
|
| | <div class="hacker-header"> |
| | <h1 class="text-3xl font-bold text-center glow-text" style="color: var(--hacker-primary);">MAP EDITOR <span class="text-sm"></span></h1> |
| | <p class="text-center text-sm mt-2 glow-text" style="color: var(--hacker-secondary);">FOR SCHOOL</p> |
| | </div> |
| |
|
| | <div class="container mx-auto px-4"> |
| | <div class="flex flex-wrap mb-4"> |
| | <button id="edit-next-marker" class="hacker-btn secondary disabled"> |
| | <span class="glow-text">次のマーカーを編集</span> |
| | </button> |
| | <button id="save-map-btn" class="hacker-btn secondary"> |
| | <span class="glow-text">マップを保存</span> |
| | </button> |
| | <button id="load-map-btn" class="hacker-btn secondary"> |
| | <span class="glow-text">マップを読み込み</span> |
| | </button> |
| | <button id="replace-current-map-btn" class="hacker-btn secondary" style="display: none;"> |
| | <span class="glow-text"><span id="replace-map-name"></span>を置き換えて保存</span> |
| | </button> |
| | <button id="replace-other-map-btn" class="hacker-btn secondary"> |
| | <span class="glow-text">他のマップを置き換えて保存</span> |
| | </button> |
| | <button onclick="if(confirm('現在のマップのすべてのデータが消去されます。いいですか？')){clearCurrentMap()}" class="hacker-btn danger"> |
| | <span class="glow-text">現在のマップをリセット</span> |
| | </button> |
| | <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"> |
| | <div class="terminal-line glow-text">マップエディター:</div> |
| | <div id="map"></div> |
| | </div> |
| |
|
| | |
| | <div id="marker-editor"> |
| | <h3>MARKER EDITOR</h3> |
| | <div class="terminal-line">緯度:</div> |
| | <input type="text" id="marker-lat" placeholder="35.681236"> |
| | <div class="hacker-divider"></div> |
| | <div class="terminal-line">経度:</div> |
| | <input type="text" id="marker-lng" placeholder="139.767125"> |
| | <div class="hacker-divider"></div> |
| | <div class="terminal-line">アイコンのソース:</div> |
| | <div id="icon-upload-input" style="display: block; margin-bottom: 20px;"> |
| | <label for="marker-icon-upload">UPLOAD ICON:</label> |
| | <input type="file" id="marker-icon-upload" accept="image/*"> |
| | </div> |
| | <div class="hacker-divider"></div> |
| | <div id="icon-url-input" style="display: block; margin-bottom: 20px;"> |
| | <label for="marker-icon-url">アイコンのURL:</label> |
| | <input type="text" id="marker-icon-url" value="https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png"> |
| | <button id="load-icon-url" class="hacker-btn secondary mt-2">LOAD IMAGE</button> |
| | </div> |
| | <img id="icon-preview" src="" alt="ICON PREVIEW"> |
| | <div id="icon-settings"> |
| | <div class="terminal-line">アイコンの幅:</div> |
| | <input type="range" id="icon-width" min="10" max="100" value="25"> |
| | <input type="number" id="icon-width-input" min="10" max="100" value="25"> |
| | <span id="icon-width-value" style="color: var(--hacker-primary);">25</span>px |
| |
|
| | <div class="terminal-line">アイコンの高さ:</div> |
| | <input type="range" id="icon-height" min="10" max="100" value="41"> |
| | <input type="number" id="icon-height-input" min="10" max="100" value="41"> |
| | <span id="icon-height-value" style="color: var(--hacker-primary);">41</span>px |
| | </div> |
| | <div class="hacker-divider"></div> |
| | <div class="terminal-line">ポップアップHTML:</div> |
| | <textarea id="marker-popup" placeholder="<b>LOCATION NAME</b><br>Additional info here"></textarea> |
| | <div class="terminal-line">ツールチップHTML:</div> |
| | <textarea id="marker-tooltip" placeholder="Hover text here"></textarea> |
| | <div class="hacker-divider"></div> |
| | <button id="save-marker" class="hacker-btn"> |
| | <span class="glow-text">保存</span> |
| | </button> |
| | <button id="delete-marker" class="hacker-btn danger"> |
| | <span class="glow-text">削除</span> |
| | </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> |
| | </button> |
| | <button id="copyButton" class="hacker-btn secondary"> |
| | <span class="glow-text">COPY</span> |
| | </button> |
| | <div class="terminal-line glow-text">埋め込みコード:</div> |
| | <div id="output-html"></div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="save-map-modal"> |
| | <h3>マップを保存</h3> |
| | <span>すでにあるマップの名前を入力すると、そのマップを置き換えます。</span> |
| | <input type="text" id="save-map-name" placeholder="マップ名を入力"> |
| | <button id="confirm-save-map" class="hacker-btn"> |
| | <span class="glow-text">保存</span> |
| | </button> |
| | <button id="cancel-save-map" class="hacker-btn danger"> |
| | <span class="glow-text">キャンセル</span> |
| | </button> |
| | </div> |
| |
|
| | |
| | <div id="gallery-container"> |
| | <div class="container mx-auto"> |
| | <h2 class="hacker-title text-center">保存されたマップ</h2> |
| | <div id="gallery-map-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div> |
| | <div class="text-center mt-4"> |
| | <button id="close-gallery" class="hacker-btn danger"> |
| | <span class="glow-text">閉じる</span> |
| | </button> |
| | </div> |
| | </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> |
| | <script> |
| | // グローバル変数 |
| | let map; |
| | let editingMarker = null; |
| | let hoveredMarker = null; |
| | let nextMarkerEdit = false; |
| | let markers = []; |
| | let currentMapName = ''; |
| | let layers = []; |
| | let plugins = []; |
| | let layerControls = {}; |
| | let currentEditingLayer = null; |
| | let overlayCoords = []; |
| | |
| | // 初期化処理 |
| | window.onload = function() { |
| | const loading = document.getElementById('loading'); |
| | loading.style.opacity = '0'; |
| | setTimeout(() => { |
| | 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; |
| | } |
| | |
| | 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(); |
| | } |
| | }); |
| | |
| | // マーカーが変更されたらボタンの状態を更新 |
| | 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"); |
| | } |
| | }); |
| | } |
| | |
| | // レイヤー編集時のクリック処理 |
| | 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); |
| | } |
| | } |
| | } |
| | } |
| | |
| | // オーバーレイ座標リストを更新 |
| | 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() { |
| | // マーカー編集関連 |
| | document.getElementById("save-marker").addEventListener("click", saveMarker); |
| | document.getElementById("delete-marker").addEventListener("click", deleteMarker); |
| | document.addEventListener("keydown", function(e) { |
| | if (e.key === "e" && hoveredMarker) { |
| | openEditor(hoveredMarker); |
| | } |
| | }); |
| | |
| | // アイコン設定関連 |
| | document.getElementById("marker-icon-upload").addEventListener("change", handleIconUpload); |
| | document.getElementById("load-icon-url").addEventListener("click", loadIconFromUrl); |
| | document.getElementById("icon-width").addEventListener("input", syncWidth); |
| | document.getElementById("icon-width-input").addEventListener("input", syncWidth); |
| | document.getElementById("icon-height").addEventListener("input", syncHeight); |
| | document.getElementById("icon-height-input").addEventListener("input", syncHeight); |
| | |
| | // マーカー編集モード関連 |
| | document.getElementById("edit-next-marker").addEventListener("click", toggleEditNextMarkerMode); |
| | |
| | // マップ保存/読み込み関連 |
| | document.getElementById("save-map-btn").addEventListener("click", showSaveMapModal); |
| | document.getElementById("load-map-btn").addEventListener("click", showGallery); |
| | document.getElementById("confirm-save-map").addEventListener("click", saveCurrentMapWithName); |
| | document.getElementById("cancel-save-map").addEventListener("click", hideSaveMapModal); |
| | document.getElementById("close-gallery").addEventListener("click", hideGallery); |
| | |
| | // マーカーエディタのドラッグ移動 |
| | setupEditorDrag(); |
| | |
| | // 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() { |
| | 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) { |
| | // タブを非アクティブ化 |
| | 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; |
| | 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() { |
| | 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が不正です:\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; |
| | } |
| | } |
| | |
| | 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(); |
| | alert(`レイヤー「${layerName}」を追加しました`); |
| | } |
| | } |
| | |
| | // オーバーレイレイヤーを追加 |
| | 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 hideLayerEditor() { |
| | document.getElementById("layer-editor").style.display = "none"; |
| | if (currentEditingLayer) { |
| | map.removeLayer(currentEditingLayer); |
| | currentEditingLayer = null; |
| | overlayCoords = []; |
| | } |
| | } |
| | |
| | // オーバーレイレイヤー追加をキャンセル |
| | 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 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 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'); |
| | }); |
| | |
| | layerTreeContent.appendChild(header); |
| | |
| | // レイヤーグループ |
| | const group = document.createElement('div'); |
| | group.id = groupId; |
| | group.className = 'layer-tree-item-group'; |
| | |
| | typeLayers.forEach(layer => { |
| | const layerItem = document.createElement('div'); |
| | layerItem.className = 'layer-tree-item'; |
| | |
| | // レイヤーアイコン |
| | const icon = document.createElement('span'); |
| | icon.className = 'layer-tree-icon'; |
| | icon.innerHTML = getLayerIcon(layer.type); |
| | layerItem.appendChild(icon); |
| | |
| | // レイヤー名 |
| | 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); |
| | }); |
| | |
| | const deleteBtn = document.createElement('button'); |
| | deleteBtn.className = 'layer-tree-btn delete-btn'; |
| | deleteBtn.title = '削除'; |
| | deleteBtn.innerHTML = '🗑️'; |
| | deleteBtn.addEventListener('click', (e) => { |
| | e.stopPropagation(); |
| | deleteLayer(layer); |
| | }); |
| | |
| | btnGroup.appendChild(editBtn); |
| | btnGroup.appendChild(deleteBtn); |
| | layerItem.appendChild(btnGroup); |
| | |
| | layerItem.addEventListener('click', function(e) { |
| | if (e.target.closest('.layer-tree-btn')) return; |
| | |
| | // レイヤーを選択状態にする |
| | 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()); |
| | } |
| | }); |
| | |
| | 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() { |
| | 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)); |
| | } |
| | |
| | // マーカー編集モードのトグル |
| | function toggleEditNextMarkerMode() { |
| | if (nextMarkerEdit) { |
| | // 編集モードをキャンセル |
| | nextMarkerEdit = false; |
| | document.getElementById("edit-next-marker").textContent = "次のマーカーを編集"; |
| | document.getElementById("edit-next-marker").classList.remove("danger"); |
| | document.getElementById("edit-next-marker").classList.add("secondary"); |
| | alert("編集モードをキャンセルしました。"); |
| | } else { |
| | // 編集モードを開始 |
| | nextMarkerEdit = true; |
| | document.getElementById("edit-next-marker").textContent = "編集をキャンセル"; |
| | document.getElementById("edit-next-marker").classList.remove("secondary"); |
| | document.getElementById("edit-next-marker").classList.add("danger"); |
| | alert("クリックして次のマーカーを編集します。"); |
| | } |
| | } |
| | |
| | // マーカーが存在するかどうかでボタンの状態を更新 |
| | function updateEditNextMarkerButton() { |
| | const hasMarkers = mapHasMarkers(); |
| | const editBtn = document.getElementById("edit-next-marker"); |
| | |
| | if (hasMarkers) { |
| | editBtn.classList.remove("disabled"); |
| | } else { |
| | editBtn.classList.add("disabled"); |
| | // マーカーがない場合、編集モードをキャンセル |
| | if (nextMarkerEdit) { |
| | nextMarkerEdit = false; |
| | editBtn.textContent = "次のマーカーを編集"; |
| | editBtn.classList.remove("danger"); |
| | editBtn.classList.add("secondary"); |
| | } |
| | } |
| | } |
| | |
| | // マップにマーカーが存在するかチェック |
| | function mapHasMarkers() { |
| | let hasMarkers = false; |
| | map.eachLayer((layer) => { |
| | if (layer instanceof L.Marker) { |
| | hasMarkers = true; |
| | } |
| | }); |
| | return hasMarkers; |
| | } |
| | |
| | // マーカーエディタを開く |
| | function openEditor(marker) { |
| | const latlng = marker.getLatLng(); |
| | document.getElementById("marker-lat").value = latlng.lat; |
| | document.getElementById("marker-lng").value = latlng.lng; |
| | document.getElementById("marker-popup").value = marker.getPopup() ? marker.getPopup().getContent() : ""; |
| | document.getElementById("marker-tooltip").value = marker.getTooltip() ? marker.getTooltip().getContent() : ""; |
| | document.getElementById("marker-editor").style.display = "block"; |
| | editingMarker = marker; |
| | |
| | const icon = marker.options.icon; |
| | if (icon && icon.options) { |
| | if (icon.options.iconUrl) { |
| | document.getElementById("marker-icon-url").value = icon.options.iconUrl; |
| | document.getElementById("icon-preview").src = icon.options.iconUrl; |
| | document.getElementById("icon-preview").style.display = 'block'; |
| | document.getElementById("icon-settings").style.display = "block"; |
| | } |
| | document.getElementById("icon-width").value = icon.options.iconSize[0]; |
| | document.getElementById("icon-height").value = icon.options.iconSize[1]; |
| | document.getElementById("icon-width-value").textContent = icon.options.iconSize[0]; |
| | document.getElementById("icon-height-value").textContent = icon.options.iconSize[1]; |
| | } |
| | |
| | updatePreviewSize(); |
| | } |
| | |
| | // マーカーを保存 |
| | function saveMarker() { |
| | if (editingMarker) { |
| | const lat = parseFloat(document.getElementById("marker-lat").value); |
| | const lng = parseFloat(document.getElementById("marker-lng").value); |
| | const popupContent = document.getElementById("marker-popup").value; |
| | const tooltipContent = document.getElementById("marker-tooltip").value; |
| | const iconUrl = document.getElementById("icon-preview").src; |
| | |
| | applyIconAndSaveMarker(lat, lng, popupContent, tooltipContent, iconUrl); |
| | saveCurrentMapToStorage(); |
| | } |
| | } |
| | |
| | // アイコンを適用してマーカーを保存 |
| | function applyIconAndSaveMarker(lat, lng, popupContent, tooltipContent, iconUrl) { |
| | const iconWidth = parseInt(document.getElementById("icon-width").value); |
| | const iconHeight = parseInt(document.getElementById("icon-height").value); |
| | |
| | editingMarker.setLatLng([lat, lng]); |
| | if (iconUrl) { |
| | const icon = L.icon({ |
| | iconUrl: iconUrl, |
| | iconSize: [iconWidth, iconHeight], |
| | iconAnchor: [iconWidth / 2, iconHeight], |
| | popupAnchor: [0, -iconHeight], |
| | tooltipAnchor: [iconWidth / 2, -iconHeight / 2] |
| | }); |
| | editingMarker.setIcon(icon); |
| | } |
| | |
| | editingMarker.bindPopup(popupContent); |
| | editingMarker.bindTooltip(tooltipContent); |
| | |
| | document.getElementById("marker-editor").style.display = "none"; |
| | editingMarker = null; |
| | } |
| | |
| | // マーカーを削除 |
| | function deleteMarker() { |
| | if (confirm("削除していいですか？")) { |
| | map.removeLayer(editingMarker); |
| | document.getElementById("marker-editor").style.display = "none"; |
| | editingMarker = null; |
| | saveCurrentMapToStorage(); |
| | updateEditNextMarkerButton(); |
| | } |
| | } |
| | |
| | // アイコンをアップロード |
| | function handleIconUpload() { |
| | const file = this.files[0]; |
| | const preview = document.getElementById("icon-preview"); |
| | if (file) { |
| | resizeImage(file, parseInt(document.getElementById("icon-width").value), parseInt(document.getElementById("icon-height").value), function(imageDataUrl) { |
| | preview.src = imageDataUrl; |
| | preview.style.display = "block"; |
| | document.getElementById("icon-settings").style.display = "block"; |
| | updatePreviewSize(); |
| | }); |
| | } else { |
| | preview.style.display = "none"; |
| | document.getElementById("icon-settings").style.display = "none"; |
| | } |
| | } |
| | |
| | // URLからアイコンを読み込み |
| | function loadIconFromUrl() { |
| | const url = document.getElementById("marker-icon-url").value; |
| | const preview = document.getElementById("icon-preview"); |
| | if (url) { |
| | preview.src = url; |
| | preview.onload = function() { |
| | preview.style.display = "block"; |
| | document.getElementById("icon-settings").style.display = "block"; |
| | updatePreviewSize(); |
| | }; |
| | preview.onerror = function() { |
| | alert("IMAGE LOAD FAILED. CHECK URL."); |
| | preview.style.display = "none"; |
| | document.getElementById("icon-settings").style.display = "none"; |
| | }; |
| | } else { |
| | preview.style.display = "none"; |
| | document.getElementById("icon-settings").style.display = "none"; |
| | } |
| | } |
| | |
| | // 画像をリサイズ |
| | function resizeImage(file, width, height, callback) { |
| | const reader = new FileReader(); |
| | reader.onload = function(e) { |
| | const img = new Image(); |
| | img.onload = function() { |
| | const canvas = document.createElement("canvas"); |
| | canvas.width = width; |
| | canvas.height = height; |
| | canvas.getContext("2d").drawImage(img, 0, 0, width, height); |
| | callback(canvas.toDataURL()); |
| | }; |
| | img.src = e.target.result; |
| | }; |
| | reader.readAsDataURL(file); |
| | } |
| | |
| | // 幅の同期 |
| | function syncWidth(event) { |
| | let value = event.target.value; |
| | document.getElementById("icon-width").value = value; |
| | document.getElementById("icon-width-input").value = value; |
| | updatePreviewSize(); |
| | } |
| | |
| | // 高さの同期 |
| | function syncHeight(event) { |
| | let value = event.target.value; |
| | document.getElementById("icon-height").value = value; |
| | document.getElementById("icon-height-input").value = value; |
| | updatePreviewSize(); |
| | } |
| | |
| | // プレビューサイズを更新 |
| | function updatePreviewSize() { |
| | var width = document.getElementById("icon-width").value; |
| | var height = document.getElementById("icon-height").value; |
| | var preview = document.getElementById("icon-preview"); |
| | preview.style.width = width + "px"; |
| | preview.style.height = height + "px"; |
| | document.getElementById("icon-width-value").textContent = width; |
| | document.getElementById("icon-height-value").textContent = height; |
| | if (editingMarker) { |
| | var iconUrl = preview.src; |
| | var icon = L.icon({ |
| | iconUrl: iconUrl, |
| | iconSize: [width, height], |
| | iconAnchor: [width / 2, height], |
| | popupAnchor: [0, -height], |
| | tooltipAnchor: [width / 2, -height / 2] |
| | }); |
| | editingMarker.setIcon(icon); |
| | saveCurrentMapToStorage(); |
| | } |
| | } |
| | |
| | // マーカーエディタのドラッグ移動を設定 |
| | function setupEditorDrag() { |
| | const editor = document.getElementById("marker-editor"); |
| | let isDragging = false; |
| | let offsetX, offsetY; |
| | |
| | editor.addEventListener("mousedown", function(e) { |
| | if (!e.target.closest("input, textarea, button")) { |
| | isDragging = true; |
| | offsetX = e.clientX - editor.getBoundingClientRect().left; |
| | offsetY = e.clientY - editor.getBoundingClientRect().top; |
| | } |
| | }); |
| | |
| | document.addEventListener("mousemove", function(e) { |
| | if (isDragging) { |
| | editor.style.left = (e.clientX - offsetX) + "px"; |
| | editor.style.top = (e.clientY - offsetY) + "px"; |
| | } |
| | }); |
| | |
| | document.addEventListener("mouseup", function() { |
| | isDragging = false; |
| | }); |
| | } |
| | |
| | // 現在のマップを保存 |
| | function saveCurrentMapToStorage() { |
| | const mapData = { |
| | center: map.getCenter(), |
| | zoom: map.getZoom(), |
| | markers: [], |
| | layers: [], |
| | plugins: plugins |
| | }; |
| | |
| | // マーカーを収集 |
| | map.eachLayer((layer) => { |
| | if (layer instanceof L.Marker) { |
| | const marker = layer; |
| | const icon = marker.options.icon; |
| | const { lat, lng } = marker.getLatLng(); |
| | mapData.markers.push({ |
| | lat: lat, |
| | lng: lng, |
| | iconUrl: icon.options.iconUrl, |
| | iconSize: icon.options.iconSize, |
| | popupContent: marker.getPopup() ? marker.getPopup().getContent() : '', |
| | tooltipContent: marker.getTooltip() ? marker.getTooltip().getContent() : '', |
| | }); |
| | } |
| | }); |
| | |
| | // レイヤーを収集 |
| | 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')) || {}; |
| | savedMaps[currentMapName] = mapData; |
| | localStorage.setItem('savedMaps', JSON.stringify(savedMaps)); |
| | } |
| | } |
| | |
| | // マップ保存モーダルを表示 |
| | function showSaveMapModal() { |
| | document.getElementById("save-map-modal").style.display = "block"; |
| | } |
| | |
| | // マップ保存モーダルを非表示 |
| | function hideSaveMapModal() { |
| | document.getElementById("save-map-modal").style.display = "none"; |
| | } |
| | |
| | // マップ名を付けて保存 |
| | function saveCurrentMapWithName() { |
| | const mapName = document.getElementById("save-map-name").value.trim(); |
| | if (!mapName) { |
| | alert("マップ名を入力してください"); |
| | return; |
| | } |
| | |
| | const mapData = { |
| | center: map.getCenter(), |
| | zoom: map.getZoom(), |
| | markers: [], |
| | layers: [], |
| | plugins: plugins |
| | }; |
| | |
| | // マーカーを収集 |
| | map.eachLayer((layer) => { |
| | if (layer instanceof L.Marker) { |
| | const marker = layer; |
| | const icon = marker.options.icon; |
| | const { lat, lng } = marker.getLatLng(); |
| | mapData.markers.push({ |
| | lat: lat, |
| | lng: lng, |
| | iconUrl: icon.options.iconUrl, |
| | iconSize: icon.options.iconSize, |
| | popupContent: marker.getPopup() ? marker.getPopup().getContent() : '', |
| | tooltipContent: marker.getTooltip() ? marker.getTooltip().getContent() : '', |
| | }); |
| | } |
| | }); |
| | |
| | // レイヤーを収集 |
| | 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)); |
| | |
| | currentMapName = mapName; |
| | document.getElementById("save-map-name").value = ""; |
| | hideSaveMapModal(); |
| | alert(`マップ「${mapName}」を保存しました`); |
| | } |
| | |
| | // マップギャラリーを表示 |
| | function showGallery() { |
| | const gallery = document.getElementById("gallery-container"); |
| | const mapList = document.getElementById("gallery-map-list"); |
| | mapList.innerHTML = ""; |
| | |
| | const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {}; |
| | |
| | if (Object.keys(savedMaps).length === 0) { |
| | mapList.innerHTML = '<div class="text-center py-4">保存されたマップはありません</div>'; |
| | } else { |
| | for (const [name, data] of Object.entries(savedMaps)) { |
| | const mapItem = document.createElement("div"); |
| | mapItem.className = "gallery-map-item"; |
| | |
| | // マップ名を編集可能にする |
| | 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); |
| | } |
| | |
| | // イベントリスナーを追加 |
| | document.querySelectorAll('.load-map-btn').forEach(btn => { |
| | btn.addEventListener('click', function() { |
| | loadMapFromGallery(this.dataset.name); |
| | }); |
| | }); |
| | |
| | document.querySelectorAll('.delete-map-btn').forEach(btn => { |
| | btn.addEventListener('click', function() { |
| | if (confirm(`マップ「${this.dataset.name}」を削除しますか？`)) { |
| | deleteMapFromGallery(this.dataset.name); |
| | } |
| | }); |
| | }); |
| | } |
| | |
| | gallery.style.display = "block"; |
| | } |
| | |
| | // マップ名を編集 |
| | function 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], |
| | }); |
| | |
| | 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) { |
| | const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {}; |
| | delete savedMaps[mapName]; |
| | localStorage.setItem('savedMaps', JSON.stringify(savedMaps)); |
| | |
| | if (currentMapName === mapName) { |
| | currentMapName = ''; |
| | } |
| | |
| | showGallery(); // ギャラリーを更新 |
| | } |
| | |
| | // 現在のマップをクリア |
| | function clearCurrentMap() { |
| | map.eachLayer(layer => { |
| | if (!(layer instanceof L.TileLayer)) { |
| | map.removeLayer(layer); |
| | } |
| | }); |
| | |
| | // レイヤーコントロールを削除 |
| | Object.values(layerControls).forEach(control => { |
| | map.removeControl(control); |
| | }); |
| | |
| | layerControls = {}; |
| | layers = []; |
| | currentMapName = ''; |
| | updateEditNextMarkerButton(); |
| | updateLayerTree(); |
| | } |
| | |
| | // HTMLを生成 |
| | function generateMapHTML() { |
| | const markers = []; |
| | map.eachLayer((layer) => { |
| | if (layer instanceof L.Marker) { |
| | const marker = layer; |
| | const icon = marker.options.icon; |
| | const iconUrl = icon.options.iconUrl; |
| | const iconSize = icon.options.iconSize; |
| | const latlng = marker.getLatLng(); |
| | const popupContent = marker.getPopup() ? marker.getPopup().getContent() : ""; |
| | const tooltipContent = marker.getTooltip() ? marker.getTooltip().getContent() : ""; |
| | markers.push({ |
| | lat: latlng.lat, |
| | lng: latlng.lng, |
| | iconUrl: iconUrl, |
| | iconWidth: iconSize[0], |
| | iconHeight: iconSize[1], |
| | popupContent: popupContent, |
| | tooltipContent: tooltipContent |
| | }); |
| | } |
| | }); |
| | |
| | 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}); |
| | L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| | 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}', |
| | iconSize: [${marker.iconWidth}, ${marker.iconHeight}], |
| | iconAnchor: [${marker.iconWidth} / 2, ${marker.iconHeight}], |
| | popupAnchor: [0, -${marker.iconHeight}], |
| | tooltipAnchor: [${marker.iconWidth} / 2, -${marker.iconHeight} / 2] |
| | }); |
| | |
| | var marker = L.marker([${marker.lat}, ${marker.lng}], { |
| | icon: icon, |
| | zIndexOffset: 1000 |
| | }).addTo(map); |
| | |
| | ${marker.popupContent ? `marker.bindPopup('${marker.popupContent.replace(/'/g, "\\'").replace(/<\/script>/g, "<\\/script>")}');` : ""} |
| | ${marker.tooltipContent ? `marker.bindTooltip('${marker.tooltipContent.replace(/'/g, "\\'").replace(/<\/script>/g, "<\\/script>")}');` : ""} |
| | `).join("\n")} |
| | <\/script> |
| | `; |
| | |
| | html = html.replace(/iconUrl: 'marker-icon\.png'/g, `iconUrl: '${location.origin}/marker-icon.png'`); |
| | document.getElementById("output-html").value = html; |
| | const input = document.getElementById('output-html').value; |
| | const output = document.getElementById('output-html'); |
| | output.innerHTML = hljs.highlight('html', input).value; |
| | output.classList.add('hljs'); |
| | } |
| | |
| | // HTMLをクリップボードにコピー |
| | function copyHTMLToClipboard() { |
| | const textToCopy = document.getElementById("output-html").innerText; |
| | navigator.clipboard.writeText(textToCopy).then(() => { |
| | alert("コピーしました。"); |
| | }).catch(err => { |
| | console.error('コピーに失敗しました：', err); |
| | }); |
| | } |
| | </script> |
| | </body> |
| | </html> |
