LinkedIn City Map – Connection Visualizer
Category
Web Design
Tech Stack
Next.js, TypeScript, MapLibre GL, GeoJSON, Data Visualization, Framer Motion, Tailwind CSS, LinkedIn, Geospatial
Featured
No
Live URL
N/A
Overview
LinkedIn City Map is a geospatial visualization tool built with Next.js 16 and MapLibre GL. It displays LinkedIn connections as interactive glowing markers on a dark map, grouped by city. Users can filter connections by search, job category, or city using a sidebar panel. Clicking a city marker opens a drill-down panel showing all profiles in that city with their titles and LinkedIn links. The map draws animated arc lines from the user's current location (via browser geolocation) to each city. India's GeoJSON border is rendered as a highlighted overlay. The UI follows a Tokyo Night dark color palette with neon blue accents, gradient background effects, and smooth Framer Motion animations. Data is loaded from a structured dummy dataset covering 20+ cities across India and globally.