Multilingual Website using CMS and Maps using Maplibre and Maptiler
Tech stack: Next.js (React + App Router), Tailwind CSS, Payload CMS (headless), MapLibre GL JS + MapTiler, Next‑Intl (i18n), Vercel (CI/CD).
A fully bilingual (Arabic/English) destination guide for Al Dirah, the historic heart of Riyadh—blending storytelling, cultural highlights, and an interactive map experience.
🛠️ What I Implemented (Everything from 📦 to 💻)
| Feature | Details |
|---|---|
| Content & CMS | Defined Payload collections for places, events, centers, each with multilingual fields (e.g. name_en, name_ar, description_*). Managed hero text intro, FAQs, center pages—all pulled via Payload's REST API. Payload is a Next.js‑native full‑stack headless CMS (GitHub). |
| Multilingual (i18n) | Used next-intl to route /en/… and /ar/…. All UI strings (e.g. “Places to Visit”) live in JSON translation files. Switching language toggles lang attribute and text direction. |
| Map Component | A dedicated /map page where users can pan/zoom a MapLibre GL map using MapTiler’s vector‑tile host. Map markers represent places; clicking one opens a popup with translated title and image from the CMS. Behind the scenes, it uses maplibre-gl and MapTiler styles (e.g., streets-v2) to render and style vector tiles with glide-and-zoom performance (MapTiler Documentation). |
| Marker Clustering & Popups | Client-side clustering enabled with supercluster for performance at high zoom. The pop-up shows bilingual content and “Learn More →” links that open the CMS-powered place or event page. |
| Search & Filters | A real-time location filter lets users filter events or places by category (e.g. heritage site, market). Loaded via incremental static rendering; queries happen at build-time (getStaticProps) and fallback to client-side fetches. |
| Styling & Accessibility | Mobile-first Tailwind CSS with utility classes. Fully WCAG 2.1 AA compliant: high contrast, accessible color picks, keyboard navigation, aria labels for map controls and markers. |
| Deployment | Hosted on Vercel. Environments: preview for Pull Requests, production on main. Build hooks configured so client-side map updates and CMS changes fetch fresh static pages automatically. |
01 Aug 2025
Keywords
web dev
multilingual
maps
custom maps
