Map / Both / Text with a draggable split

Three views with a draggable divider, remembered between visits, so the map and a long rule can both be read.

What it is

A Map / Both / Text toggle plus a drag handle between the two columns. Dragging resizes; dragging past a minimum snaps to a single column, with an edge tab to bring the other back. The chosen view is saved to localStorage. On mobile the two stack.

Also called: permit view toggle · resize the permit map · text only permit view

See it
Map / Both / Text with a draggable split
New lead 3
Marlin Hoover
$46k
Delia Yoder
$23k
Contacted 3
Sutter Kline
$40k
Ronan Petsch
$64k
Ivy Brubaker
$41k
Estimate 4
Ivy Brubaker
$65k
Gideon Alt
$46k
Marlin Hoover
$69k
Sold 4
Marlin Hoover
$40k
Delia Yoder
$66k
Sutter Kline
$21k
The Map/Both/Text segmented control and the vertical drag handle mid-panel. PermitCheckPanel.tsx `startDrag` and the view toggle. Sample data — no customer information appears here.
How it works
  1. 1The view preference persists in localStorage under permitViewPref
  2. 2A plain click never snaps — real movement of at least 3px is required
  3. 3Minimum widths keep the map above ~280px and the details above ~260px
  4. 4The map is sticky and height-capped so it stays in view while a long rule scrolls past
  5. 5Every view change triggers a Maps resize so tiles repaint into the new box
Why we built it

The sticky, capped map exists because of a real rendering failure: 'a long permit rule (Columbia's runs to a couple of thousand words) stretched the map to 2313px. Google then rendered a map that tall, of which the panel showed the top sliver: a blank grey box with the jurisdiction far below the fold, which read as "the map is broken".' Capping and sticking it is 'how you actually read the two together.'

The problem
  • A long rule broke the map
  • One layout cannot serve both 'where is it' and 'what does it say'
Sound familiar?
What you get
The rule scrolls while the map stays visible
The preferred layout is remembered

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →