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

clean up for fresh build, from scratch with more features

Browse Source
This commit is contained in:
Shihaam Abdul Rahman
2025-12-12 03:37:48 +05:00
parent 8ade34f91b
commit d5787d3972
4 changed files with 0 additions and 2532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
README.md
View File

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

2003
app.js
View File

File diff suppressed because it is too large Load Diff

78
index.html
View File

@@ -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
View File

@@ -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;
}
}