sarlink/mapmaker
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

it works i think

Browse Source
This commit is contained in:
WovenCoast
2025-12-08 21:48:03 +05:00
commit a39e6f6f92
3 changed files with 2194 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1958
app.js Normal file
View File

File diff suppressed because it is too large Load Diff

75
index.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scale Map Maker</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="toolbar">
<div class="tool-section">
<h3>Tools</h3>
<button id="selectTool" class="tool-btn active">Select</button>
<button id="moveTool" class="tool-btn">Move</button>
<button id="deleteTool" class="tool-btn">Delete</button>
<button id="lineTool" class="tool-btn">Draw Line</button>
<button id="nodeTool" class="tool-btn">Add Node</button>
<button id="switchTool" class="tool-btn">Add Switch</button>
<button id="rulerTool" class="tool-btn">Ruler</button>
<button id="sumTool" class="tool-btn">Sum</button>
</div>
<div class="tool-section">
<h3>Line Instructions</h3>
<p style="font-size: 11px; color: #ecf0f1; line-height: 1.4;">
Click to add points.<br>
Right-click to finish.
</p>
</div>
<div class="tool-section">
<h3>Node Color</h3>
<div class="color-palette">
<button class="color-btn active" data-color="#FF0000" style="background: #FF0000;"></button>
<button class="color-btn" data-color="#00FF00" style="background: #00FF00;"></button>
<button class="color-btn" data-color="#0000FF" style="background: #0000FF;"></button>
<button class="color-btn" data-color="#FFFF00" style="background: #FFFF00;"></button>
<button class="color-btn" data-color="#FF00FF" style="background: #FF00FF;"></button>
<button class="color-btn" data-color="#00FFFF" style="background: #00FFFF;"></button>
<button class="color-btn" data-color="#FFA500" style="background: #FFA500;"></button>
<button class="color-btn" data-color="#800080" style="background: #800080;"></button>
</div>
</div>
<div class="tool-section">
<h3>Node Count</h3>
<div id="nodeCount"></div>
</div>
<div class="tool-section">
<h3>Map View</h3>
<button id="satelliteToggle" class="tool-btn">Satellite View</button>
</div>
<div class="tool-section">
<h3>Actions</h3>
<button id="exportBtn" class="tool-btn">Export</button>
<button id="importBtn" class="tool-btn">Import</button>
<button id="clearBtn" class="action-btn">Clear All</button>
</div>
</div>
<div class="map-container">
<div id="map"></div>
<div id="rulerDisplay" class="ruler-display"></div>
<div id="statsDisplay" class="stats-display"></div>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="app.js"></script>
</body>
</html>

161
styles.css Normal file
View File

@@ -0,0 +1,161 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
overflow: hidden;
}
.container {
display: flex;
height: 100vh;
}
.toolbar {
width: 250px;
background: #2c3e50;
color: white;
padding: 20px;
overflow-y: auto;
z-index: 1000;
}
.tool-section {
margin-bottom: 30px;
}
.tool-section h3 {
margin-bottom: 10px;
font-size: 14px;
color: #ecf0f1;
}
.tool-btn, .action-btn {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 5px;
background: #34495e;
color: white;
border: 2px solid transparent;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
}
.tool-btn:hover, .action-btn:hover {
background: #3d566e;
}
.tool-btn.active {
background: #3498db;
border-color: #2980b9;
}
.action-btn {
background: #e74c3c;
}
.action-btn:hover {
background: #c0392b;
}
.color-palette {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.color-btn {
width: 100%;
height: 40px;
border: 3px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.color-btn.active {
border-color: white;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.map-container {
flex: 1;
position: relative;
}
#map {
width: 100%;
height: 100%;
}
.ruler-display {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px 15px;
border-radius: 4px;
font-size: 14px;
display: none;
z-index: 1000;
pointer-events: none;
}
.stats-display {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px 15px;
border-radius: 4px;
font-size: 14px;
z-index: 1000;
pointer-events: none;
}
#nodeCount {
font-size: 12px;
}
.node-count-item {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.node-count-color {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 8px;
border: 2px solid white;
}
.node-count-text {
color: #ecf0f1;
}
.leaflet-popup-content {
margin: 8px;
font-size: 13px;
}
.distance-label {
background: white;
padding: 4px 8px;
border: 2px solid #3498db;
border-radius: 3px;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
}
.node-marker {
z-index: 1000 !important;
}