# 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