|
|
<!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> |
