208 lines
6.5 KiB
Markdown
208 lines
6.5 KiB
Markdown
# 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
|