Locals Index

Summary

The map read like the contents page of a magazine. The banner is an editorial split — "Locals, by speciality" in a huge Instrument Serif with two photos — and folds away with an underlined link. The left column is the index: 01 Photographer … 14 AI Creator with dotted leaders and the number of people of each in view; pointing at an entry dims every other speciality on the map. People are photo stamps with their speciality number on the satellite (Google Hybrid) map; a strip along the bottom names the people in view. A chosen person opens as a spread over the index: a large photo with the speciality caption, the name in serif, an italic bio, facts and actions.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: the DEPO "Locals" page (https://dev0.dphub.net/locals —
people near you, filtered by speciality) turned into a map.

Function (shared map engine on Leaflet 1.9.4, vanilla JS):
- The real DEPO site header and footer; under the header the page banner; the map starts right
  under the banner and fills the rest of the screen.
- The banner can be switched off on the page (a button on it, a "show banner" button on the map,
  or ?banner=0 / ?banner=1); the choice is remembered; the banner folds away smoothly and the
  map resizes.
- Speciality is the main filter: the 14 specialities of the DEPO database (Photographer, Model,
  Makeup Artist, Hair Stylist, Wardrobe Stylist, Fashion Designer, Retoucher, Creative Director,
  Publication, Agency, PR manager, Producer, Film Director, AI Creator), each with a colour and
  a two-letter code; counts of each speciality in the current view, updated as the map moves;
  clusters whose ring shows the mix of specialities; several specialities at once.
- People in view (best rated first) and a card for a chosen person: photo, speciality, city,
  bio, rating, shoots, languages, "View profile" and "Message".
- Base maps from OpenStreetMap and Google, switchable, no API keys; city picker and "near me";
  filter and base map kept in the URL.
- 160 realistic locals in 20 cities; 360–1920 px without horizontal scroll, visible focus.

Design for this page: a magazine contents page. Warm paper, Instrument Serif and Inter Tight, 2
px rules. An editorial banner ("Locals, by speciality") with two photos; a left index column
listing the specialities 01–14 with dotted leaders and counts — pointing at an entry dims every
other speciality on the map; people as square photo stamps with their speciality number on a
Google hybrid map; a strip of names along the bottom; a chosen person opens as a spread over the
index.

How the map works

The four map demos (demo25–demo28) share one engine, js/locals-map.js on Leaflet 1.9.4, the data file js/people.js and the structural stylesheet css/locals-map.css (each demo keeps its own copy); each demo is its own markup, renderers and look.

• Banner first, then the map: the page is the real DEPO header, the banner, then a map stage of 100dvh − header that starts right under the banner, then the footer. The banner can be switched off on every demo — the button on the banner, the "Show banner" button on the map once it is off, or ?banner=0 / ?banner=1 in the address; the choice is remembered per demo (localStorage depo-banner-<slug>) and the banner collapses with a height transition, after which the map resizes.
• Speciality: the 14 specialities of the DEPO database (speciality table on dev0: Photographer, Model, Makeup Artist, Hair Stylist, Wardrobe Stylist, Fashion Designer, Retoucher, Creative Director, Publication, Agency, PR manager, Producer, Film Director, AI Creator), each with a colour and a two-letter code. The filter shows how many people of each speciality are in the current view and updates as the map moves; close markers merge into a cluster whose ring is split by speciality share (a conic-gradient). Shift-click (or the demo's multi mode) keeps several specialities. The address keeps the filter and the base map (?speciality=model,photographer&provider=osm).
• Base maps, no API keys: OpenStreetMap (standard, Humanitarian, OpenTopoMap) and Google (Maps, Satellite, Hybrid, Terrain) tiles drawn by Leaflet; "Light" and "Night" versions are the same tiles re-coloured by a CSS filter. CARTO basemaps were tried first and dropped: since 2026 they answer "API key required".
• People: 160 invented locals in 20 cities (the seven named DEPO first-page people among them), with rating, shoots, languages and a short bio; avatars are 160 px crops in img/avatars/, the card shows the full photo. The list / carousel shows the people in view, best rated first. "Near me" asks the browser for the location.

Look

• Type: Instrument Serif (titles, index entries, names, facts) and Inter Tight (labels, buttons).
• Palette: paper #f2eee6 / #e8e2d6, ink #191714, muted #6e675c, rust #b0361f for hover and focus; speciality colours on numbers, stamp tags and the spread caption.
• Layout: header · banner (title column + two photos, a 2px rule under it) · stage: 380 px index column (head, entries, city + banner link) and the map (base-map switch top left, zoom top right, name strip at the bottom) · footer. On phones the map comes first and the spread is a bottom sheet.
• Motion: entries slide and turn italic on hover, stamps tilt and grow, other specialities fade to grey while an entry is pointed at.

Built with

Borrowed

• Leaflet 1.9.4 (BSD-2-Clause), the same file the site uses (front/public/js/lib/leaflet-1.9.4.js, front/public/css/lib/leaflet-1.9.4.css).
• The page banner idea and the 8:3 proportion from front/templates/partials/page_banner.php; the speciality list from the dev0 database; the header and footer markup and the site CSS (site.css, site-chrome.css, header.css, fonts, the burger from site.js) as copied for demo20.
• Map tiles: © OpenStreetMap contributors (and HOT / OSM France, OpenTopoMap where chosen), © Google — shown in the map's attribution.

Config

None — static page. The tiles come straight from tile.openstreetmap.org, tile.openstreetmap.fr, tile.opentopomap.org and mt0–3.google.com in the visitor's browser.

Notes

• Google tiles are Google's public tile servers used without the Maps JavaScript API: fine for a design demo, but a production page needs the API with a key (and its own markers / clustering), or a licensed tile provider. OpenStreetMap's own tile server is meant for light use only.