frist.dev

← Portfolio

Demo 01 · For tourism & destination marketing

Discoverable destinations.

All 63 designated US National Parks plotted as a working demo. Click a pin for the callout. Pan, zoom, and the count in the corner tracks pins in view. Same frame, swapped data: your properties, your trails, your wineries, your venues.

National Parks

Click any pin for details. Drag to pan. Scroll to zoom. The counter tracks pins inside the current viewport.

63 parks

If you run a

Tourism board · hospitality group · attraction network

You're responsible for getting visitors to discover and explore distinct destinations across your territory, and your current "things to do" page is a wall of text plus a generic Google Maps embed.

The problem we solve

Visitors don't read. They scan. They want to see your region the way they'd plan a national-park trip, visually, with their own curiosity routing the journey. A list-page hides everything that isn't on screen. A brand-controlled interactive map shows the whole network at once and invites them in.

What we'd build for you

  1. Schema your destinations: name, location, hours, photos, the narrative copy that already exists in your CMS.
  2. Drop them into a MapLibre frame styled to your brand (this demo is the default; your version is yours).
  3. Wire callouts to your existing content templates. Link out to detail pages, booking, photos, directions.
  4. Hand off the code. No Mapbox bill, no platform fees, no vendor lock-in.

Stakes

Without it: visitors land on a text page and leave. Everything beyond the first scroll is invisible. Lesser-known properties stay lesser-known.

With it: discovery becomes part of the brand. The map is how visitors meet your region.

Talk through a destination map →

How it's built

  • Tiles: OpenStreetMap raster (Carto Voyager). Free, attribution-required, no API key. Drop-in swappable for Mapbox vector tiles, MapTiler, or Stadia.
  • Data layer: GeoJSON FeatureCollection with 63 features. Each carries name, state(s), year established, area (acres), and a short description.
  • Pins: MapLibre native circle layer styled with halo + accent color. Zero per-pin DOM cost; thousands of pins remain smooth.
  • Callouts: Vanilla maplibregl.Popup wired to the layer's click handler. The popup template is plain HTML, so client-side branding maps onto a single CSS file.
  • Viewport count: Re-queried on map idle via map.queryRenderedFeatures() against the parks layer.