clean up for fresh build, from scratch with more features
This commit is contained in:
207
README.md
207
README.md
@@ -1,207 +0,0 @@
|
|||||||
# Scale Map Maker
|
|
||||||
|
|
||||||
A web-based interactive mapping tool for creating and managing network diagrams with lines, nodes, and switches on a real map.
|
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
Simply open `index.html` in your web browser. The application runs entirely in the browser and saves your work to localStorage automatically.
|
|
||||||
|
|
||||||
## Map Navigation
|
|
||||||
|
|
||||||
### Basic Movement
|
|
||||||
- **Left Click + Drag**: Pan the map (default)
|
|
||||||
- **Middle Mouse Button + Drag**: Pan the map
|
|
||||||
- **Right Click + Drag** (in Select mode): Pan the map
|
|
||||||
- **Mouse Wheel**: Zoom in/out
|
|
||||||
- **Escape Key**: Refresh the page
|
|
||||||
|
|
||||||
### Map View
|
|
||||||
- Toggle between **Street View** and **Satellite View** using the "Satellite View" button in the toolbar
|
|
||||||
- Your current map position and zoom level are automatically saved
|
|
||||||
|
|
||||||
## Tools
|
|
||||||
|
|
||||||
### Select Tool
|
|
||||||
**Default tool** - Use this to view and interact with objects.
|
|
||||||
|
|
||||||
- **Left Click on Node/Switch**: Opens a popup showing information
|
|
||||||
- **Right Click**: Pan the map
|
|
||||||
- Objects can be selected to view their properties
|
|
||||||
|
|
||||||
### Move Tool
|
|
||||||
Move objects around the map.
|
|
||||||
|
|
||||||
- **Left Click on Node/Switch**: Start dragging to move it
|
|
||||||
- **Right Click on Node/Switch**: Alternative way to move it
|
|
||||||
- All connected lines update automatically when you move nodes or switches
|
|
||||||
- Release mouse to finish moving
|
|
||||||
|
|
||||||
### Delete Tool
|
|
||||||
Remove objects from the map.
|
|
||||||
|
|
||||||
- **Left Click on Node**: Delete the node (and all connected lines)
|
|
||||||
- **Left Click on Switch**: Delete the switch (and all connected lines)
|
|
||||||
- **Left Click on Line Endpoint**: Delete that point (or entire line if only 2 points)
|
|
||||||
- All deletions require confirmation
|
|
||||||
|
|
||||||
### Draw Line Tool
|
|
||||||
Create lines between points on the map.
|
|
||||||
|
|
||||||
- **Left Click**: Add a point to the current line
|
|
||||||
- **Right Click**: Finish drawing the line
|
|
||||||
- **Click on Node/Switch**: Line snaps to and connects with that object
|
|
||||||
- **Click on Line Endpoint**: Continue drawing from that line
|
|
||||||
- Lines automatically finish when clicking on nodes/switches
|
|
||||||
- Lines that end near nodes/switches (within 20 pixels) automatically snap to them
|
|
||||||
|
|
||||||
**Line Features:**
|
|
||||||
- Distance is calculated and displayed for each segment
|
|
||||||
- Total line distance shown at the midpoint
|
|
||||||
- Lines can have multiple points/segments
|
|
||||||
- Line endpoints can be moved in Move mode
|
|
||||||
- Right-click on endpoint to delete that point or the entire line
|
|
||||||
|
|
||||||
### Add Node Tool
|
|
||||||
Add colored nodes to the map.
|
|
||||||
|
|
||||||
- **Left Click**: Place a node at that location
|
|
||||||
- Nodes are connection points for lines
|
|
||||||
- Select node color from the color palette before placing
|
|
||||||
- Node count is tracked by color in the sidebar
|
|
||||||
|
|
||||||
**Node Colors Available:**
|
|
||||||
- Red, Green, Blue, Yellow, Magenta, Cyan, Orange, Purple
|
|
||||||
|
|
||||||
### Add Switch Tool
|
|
||||||
Add network switches to the map.
|
|
||||||
|
|
||||||
- **Left Click**: Place a switch at that location
|
|
||||||
- Default: 8 ports per switch
|
|
||||||
- Switches can connect to lines (limited by port count)
|
|
||||||
- Port count can be edited after creation
|
|
||||||
|
|
||||||
**Switch Features:**
|
|
||||||
- Click on switch to view popup with port information
|
|
||||||
- Edit port count using the input field (cannot reduce below used ports)
|
|
||||||
- Switches show used/total ports (e.g., "2/8")
|
|
||||||
- Lines automatically attach to available ports
|
|
||||||
|
|
||||||
### Ruler Tool
|
|
||||||
Measure distances on the map.
|
|
||||||
|
|
||||||
- **Left Click**: Add measurement points
|
|
||||||
- **Right Click**: Finish and reset measurement
|
|
||||||
- Distance shown in meters and kilometers in the top-right corner
|
|
||||||
- Useful for planning line routes
|
|
||||||
|
|
||||||
### Sum Tool
|
|
||||||
Calculate total distance of selected line segments.
|
|
||||||
|
|
||||||
- Click on individual line segments to select/deselect them
|
|
||||||
- Selected segments are highlighted
|
|
||||||
- Total distance shown in top-right corner
|
|
||||||
- Shows segment count and total distance in meters and kilometers
|
|
||||||
- Switching to another tool clears the selection
|
|
||||||
|
|
||||||
## Map Statistics
|
|
||||||
|
|
||||||
The **Total Stats** display (top-right corner) always shows:
|
|
||||||
- Number of lines
|
|
||||||
- Number of switches
|
|
||||||
- Total length of all lines (meters and kilometers)
|
|
||||||
|
|
||||||
Updates automatically as you add/remove objects.
|
|
||||||
|
|
||||||
## Node Count
|
|
||||||
|
|
||||||
The **Node Count** section in the sidebar shows:
|
|
||||||
- Count of nodes by color
|
|
||||||
- Color indicator for each type
|
|
||||||
- Updates automatically
|
|
||||||
|
|
||||||
## Data Management
|
|
||||||
|
|
||||||
### Auto-Save
|
|
||||||
- All changes are automatically saved to browser localStorage
|
|
||||||
- Data persists between sessions
|
|
||||||
- Saves on: object creation/deletion, movement, map pan/zoom
|
|
||||||
|
|
||||||
### Export
|
|
||||||
1. Click the **Export** button
|
|
||||||
2. Your data is encoded to a base64 string
|
|
||||||
3. String is copied to clipboard automatically
|
|
||||||
4. A prompt also shows the string for manual copying
|
|
||||||
5. Save this string to transfer your map to another browser/computer
|
|
||||||
|
|
||||||
### Import
|
|
||||||
1. Click the **Import** button
|
|
||||||
2. Paste the export code when prompted
|
|
||||||
3. Page reloads with the imported data
|
|
||||||
4. All existing data is replaced
|
|
||||||
|
|
||||||
### Clear All
|
|
||||||
- Click **Clear All** to delete everything
|
|
||||||
- Requires confirmation
|
|
||||||
- Cannot be undone (unless you have an export)
|
|
||||||
|
|
||||||
## Tips and Tricks
|
|
||||||
|
|
||||||
1. **Quick Refresh**: Press Escape to quickly reload the page
|
|
||||||
2. **Precise Connections**: Lines automatically snap to nearby nodes/switches when finishing
|
|
||||||
3. **Line Continuation**: Click on line endpoints to extend existing lines
|
|
||||||
4. **Port Management**: Switches prevent connections beyond port capacity
|
|
||||||
5. **Multi-Point Lines**: Create complex routes by clicking multiple points before finishing
|
|
||||||
6. **Batch Selection**: Use Sum tool to analyze multiple line segments at once
|
|
||||||
7. **Color Coding**: Use different node colors to categorize different types of connections
|
|
||||||
8. **Map Views**: Switch to satellite view for better geographic context
|
|
||||||
|
|
||||||
## Keyboard Shortcuts
|
|
||||||
|
|
||||||
- **Escape**: Refresh the page
|
|
||||||
|
|
||||||
## Popup Interactions
|
|
||||||
|
|
||||||
When a popup is open (node/switch info):
|
|
||||||
- Click inside popup to interact without triggering map actions
|
|
||||||
- Close popup by clicking the X or clicking elsewhere on the map
|
|
||||||
- Popups prevent accidental map clicks
|
|
||||||
|
|
||||||
## Technical Details
|
|
||||||
|
|
||||||
- Built with Leaflet.js for mapping
|
|
||||||
- Uses OpenStreetMap for street view
|
|
||||||
- Uses Google Maps for satellite view
|
|
||||||
- Max zoom level: 25
|
|
||||||
- Data stored in browser localStorage
|
|
||||||
- No server required - runs entirely client-side
|
|
||||||
|
|
||||||
## Browser Compatibility
|
|
||||||
|
|
||||||
Works best in modern browsers:
|
|
||||||
- Chrome/Edge (recommended)
|
|
||||||
- Firefox
|
|
||||||
- Safari
|
|
||||||
|
|
||||||
Requires:
|
|
||||||
- JavaScript enabled
|
|
||||||
- localStorage support
|
|
||||||
- Modern CSS support
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Map not loading?**
|
|
||||||
- Check internet connection (map tiles load from remote servers)
|
|
||||||
- Try refreshing the page
|
|
||||||
|
|
||||||
**Data not saving?**
|
|
||||||
- Ensure localStorage is enabled in browser settings
|
|
||||||
- Check if browser is in private/incognito mode (localStorage may not persist)
|
|
||||||
|
|
||||||
**Import not working?**
|
|
||||||
- Ensure you copied the complete export string
|
|
||||||
- Check for extra spaces or characters
|
|
||||||
- Export string should be a long base64 encoded string
|
|
||||||
|
|
||||||
**Objects disappearing?**
|
|
||||||
- Press Escape to refresh and reload from localStorage
|
|
||||||
- Try exporting data before making changes as a backup
|
|
||||||
78
index.html
78
index.html
@@ -1,78 +0,0 @@
|
|||||||
<!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">
|
|
||||||
<button id="sidebarToggle" class="sidebar-toggle">☰</button>
|
|
||||||
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
|
||||||
<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="sumDisplay" class="sum-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>
|
|
||||||
244
styles.css
244
styles.css
@@ -1,244 +0,0 @@
|
|||||||
* {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sum-display {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 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;
|
|
||||||
display: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar toggle button */
|
|
||||||
.sidebar-toggle {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 15px;
|
|
||||||
left: 15px;
|
|
||||||
z-index: 2000;
|
|
||||||
background: #2c3e50;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 12px;
|
|
||||||
font-size: 18px;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-toggle:hover {
|
|
||||||
background: #34495e;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile styles */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.sidebar-toggle {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
position: fixed;
|
|
||||||
left: -250px;
|
|
||||||
top: 0;
|
|
||||||
height: 100vh;
|
|
||||||
transition: left 0.3s ease;
|
|
||||||
z-index: 1500;
|
|
||||||
box-shadow: 2px 0 10px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar.open {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide toggle button when sidebar is open */
|
|
||||||
.sidebar-toggle.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sum display is fine at top on mobile now that toggle is at bottom */
|
|
||||||
|
|
||||||
/* Overlay when sidebar is open */
|
|
||||||
.sidebar-overlay {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0,0,0,0.5);
|
|
||||||
z-index: 1400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-overlay.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user