Map Features

This page describes the interactive features of the M-580 map application.

Layer Hierarchy

The map renders layers in a specific order to ensure smaller units are clickable:

Top (front)
├── Office Markers (points)
├── National Forests, Parks, Reservations (polygons)
├── Regional Boundaries (polygons, dashed outline)
Bottom (back)
└── Base Map Tiles

Why This Matters

Regional boundaries (like USFS Southwestern Region) are large polygons that contain many smaller National Forests. By rendering regions on the bottom with transparency, you can still click on the smaller forest units inside them.

Polygon Styling

National Forests & Parks

Fill: Solid color at 50% opacity
Outline: Solid 2px stroke matching fill color
Hover: Increased opacity and thicker outline
Selected: Orange 4px outline highlight

Regional Boundaries

Fill: 25% opacity (more transparent)
Outline: Dashed line pattern
Purpose: Shows administrative boundaries without obscuring contained units

Point Markers

Office locations are displayed as circular markers:

Size: 8px radius
Fill: Agency color (solid)
Outline: White 2px stroke
Tooltip: Unit name appears on hover (at zoom level 6+)

Popups

Clicking any unit displays a popup with:

┌─────────────────────────────────┐
│ Unit Name                       │  (Header - green background)
│ Agency - Type                   │
├─────────────────────────────────┤
│ Address: 123 Main St...         │  (Body)
│ Phone: (555) 123-4567           │
│                                 │
│ [Visit Website]                 │  (Link button)
└─────────────────────────────────┘

Map Controls

Zoom In (+): Increase zoom level
Zoom Out (-): Decrease zoom level

Scale Bar (Bottom Left)

Shows the current map scale in miles/kilometers.

Responsive Behavior

Screen Width	Sidebar	Toggle Button
> 768px	Always visible	Hidden
≤ 768px	Hidden by default	Visible

On mobile:

Sidebar slides in from the left
Map takes full screen width
Legend is more compact