12 · Territory: a service-area map maker that draws like a county atlas plate

Territory is a free, in-browser tool where a local business paints the counties it serves, drops a pin on the shop, picks one of six looks and downloads an SVG, a PNG or a paste-in embed snippet. What makes people stop is the hero: Connecticut draws itself county by county outward from the pin, then the rings, title and legend bloom in. Then they find the same machine is sitting right below, ready to use.

Inspiration

The job comes from mapcn, a MapLibre-based map component kit with markers, routes, arcs, GeoJSON layers and clusters. Territory rebuilds that job without a tile provider. There is no map key, no tile server and no map company to pay. In its place it draws real US Census county boundaries (via the us-atlas package) as plain SVG, projected with d3-geo and stitched together with topojson-client. The six token-complete looks borrow the thinking behind Refero Styles and CSS Peeper: a look is a full bundle of colours, fonts, fills and frame, not just a palette swap. The framing of each map as a numbered print plate echoes the earlier galleries in this set.

Added on top: a two-tier service area (main and by appointment), paint-drag county selection, a neighbors button, mile-true rings, a compass rose and scale bar that stay correct in every state, and exports that carry their own fonts.

Visual direction

References

Why these choices

A service-area graphic gets printed on flyers and van wraps as often as it gets pasted on a site, so it is drawn as a flat atlas plate in SVG rather than as a live map. One Plate class drives the hero, the maker and every export, so what you see is what you download. The per-state conic projection keeps shapes right in Maine and in Texas alike.

Trade-offs, from the code. Exports inline Google Fonts woff2 files as base64, which makes the SVG about 350 KB but lets it render even as an image tag. The embed snippet is lighter and links to Google Fonts instead. The page needs an 842 KB atlas from a CDN before anything draws, and the page shows a loading note and a plain failure message if the fetch fails. The tool keeps its last map in localStorage (the builder did not mention this) and in a share link hash. Counties are focusable and toggle on Enter or Space. There is honesty to keep in mind on privacy: the page itself calls Google Fonts and jsDelivr, so "no tracking" describes the maps it makes, not the page that makes them.

Who this kind of site is for

The finished maps are for trades and home services, delivery and catering, mobile vets and clinics, and anyone whose site currently says "and surrounding areas". That phrase tells a customer nothing. A shaded county map with a pin on the shop answers "do you come to me?" in one look.

The tool suits anyone who builds sites for Connecticut local businesses. You can open Territory with the client on the phone, paint their counties, mark the shop, choose a look that matches their brand, and export an SVG for the Services page and a PNG for the van or flyer. The by-appointment tier handles the honest edge cases ("we'll come to Windham County, call first"). A business owner could also use it alone, since it needs no account.

Wrong call: businesses that serve by town or ZIP, not county (a plumber covering four towns will see a county map overstate their reach), national companies, and anyone who needs turn-by-turn drive-time areas. Counties are coarse. Pitch angle: offer it as a free extra with any local-business build ("your own service-area map, ready for the site and your flyer"), and keep the live tool as a leave-behind that shows you do real work.

How to make it

Stack and key techniques

The prompt

Build "Territory", a free service-area map maker for local businesses, as ONE self-contained HTML file with no build step. Libraries allowed from jsDelivr: topojson-client 3.1.0 (UMD) and d3-geo 3.1.1 (ES module), and the us-atlas 3.0.1 counties-10m.json fetched at load. No map tiles, no API keys.

Concept: someone says where they work with a map, not a list of town names. The demo is "Thames River Electric", an invented electrician in Norwich, CT: New London County is the main service area, four more counties (Middlesex, Tolland, Windham, Washington RI) are "by appointment", with a 25-mile ring around the shop pin.

Look of the page: cream paper #f1e8d3 with a 48px grid and a faint paper-fibre noise overlay, ink #241f17, rust #b5422b, teal #1f6f6b, gold #c9961e. Fraunces (titles, optical size 144), Archivo Narrow (labels), IBM Plex Mono (coordinates). Print-plate framing: thin ink rules, hard offset shadows, numbered sections.

Hero: a plate of Connecticut and its border counties that draws county by county outward from the pin (Web Animations API), then the pin, rings, labels, title, scale bar, compass rose and legend bloom in. Include a Replay button. Respect prefers-reduced-motion.

Maker: toolbar with state search (all states), brushes (main area, by appointment, erase, pin, pan), Add neighbors (topojson.neighbors), Undo (Ctrl+Z, 60 steps), Clear, zoom in/out/fit, and add-county-by-name. Click toggles a county, drag paints a run, shift-click removes, counties are keyboard focusable. Pins have a name, a glyph (pin, home, star, wrench, truck, leaf), a home flag and a ring radius slider in miles drawn with geoCircle. Use a per-state geoConicConformal projection, a scale bar with nice numbers from projected distance, and a compass rose rotated to the local meridian. Zoom with an eased log-zoom fly between states.

Six complete looks, each with its own fonts, fills and frame: Ink on paper (hatch and stipple, double frame), Blueprint (navy, Barlow Condensed), Dark glass (glow fill, Space Grotesk), Pastel (Outfit), Engraving (crosshatch, Playfair Display, Old Standard TT), Bold flat (Anton, thick frame). Editable title, subtitle and two legend labels.

One Plate class must drive the hero, the maker and the exports. Exports: SVG with Google Fonts woff2 inlined as base64 so it works as an img, PNG at 1x and 3x, an embed snippet (scoped CSS, unique id prefix, no script), a share link (base64url in the URL hash), and JSON save and load. Remember the last map in localStorage inside try/catch.

Constraints: show a loading note while the 0.8 MB atlas loads and a clear message if it fails. Responsive down to phone width with no horizontal scroll, toolbar fields stack on phones, visible focus styles, US spelling.

Verification loop: screenshot desktop and mobile at five scroll stops, check the console for errors, then script a proof that tests click, shift-click, paint-drag, undo, neighbors, pin drop, ring slider, state change, all six looks, and that the SVG and embed exports render. Fix every failure and repeat until clean.

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares Fable 5.1, Opus 5.5 and Sonnet 5.5 on one-shot frontend work, so everything below is extrapolated from the spec table, Anthropic's tiering and earlier-generation reviews.

Feature Opus 5.5 (likely outcome) Sonnet 5.5 (likely outcome)
Real county data with per-state conic projection Does fine; d3-geo and topojson are well documented Probably fine, though it might use one US-wide projection and distort small states
Rings in true miles, rose rotation, scale bar Likely fine, with a small chance of a radians-versus-miles slip Attempts it with likely bugs: a ring in pixels, or a scale bar that is wrong away from the demo state
Paint-drag, shift-remove, undo, neighbors Does fine Likely fine on the core; the weak spot is undo not restoring pins, focus or zoom
Six token-complete looks Does fine, with slightly more generic palettes Likely simplifies: fewer fonts or fill types, with some looks reduced to colour swaps
Exports that carry fonts and render as an img Attempts it with likely bugs: fonts missing in the PNG or SVG-as-image Likely simplifies away the base64 font inlining and links to Google Fonts, so exports break offline
Embed snippet with scoped CSS and unique ids Likely fine Attempts it with likely bugs: pattern id clashes when two embeds share a page
Hero choreography ordered by distance from the pin Likely fine, slightly fewer staged touches Likely simplifies to one fade or a simultaneous draw
Shared pipeline (one Plate class for all outputs) Likely holds together More likely to drift late in the file, so hero and exports differ from the maker

Overall, as a judgment call: Opus 5.5 would likely keep roughly 80 to 90 percent of the impact in one pass, with the gap mostly in the export edge cases. Sonnet 5.5 would likely keep roughly 60 to 75 percent, losing the most in export fidelity and the consistency of the looks. The functional tool is a long, many-part file, so coherence matters more here than visual flair. A screenshot loop plus a scripted proof of the exports (like the 27-check proof the builder ran) would close most of the gap for either model, and splitting the build into the Plate class first and exports second would help Sonnet most.

← Previous reportNext report →