hub / github.com/AnmolSaini16/next-maps

github.com/AnmolSaini16/next-maps @main

Chat with this repo

repository ↗ · DeepWiki ↗ · + Follow

62 symbols 164 edges 27 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

🗺️ Modern Map in Next.js with Mapbox

Lightweight, clean and beautifully-designed map with Next.js, Mapbox, shadcn ui, and Tailwind. Customizable and extensible component design.

https://github.com/user-attachments/assets/9caa968c-bfe1-44bf-a1dc-b375070a3e93

Map Application Screenshot 1

Map Application Screenshot 2

Map Application Screenshot 3

Map Application Screenshot 4

⚡ Stack

Next.js (App Router)
Tailwind CSS
shadcn/ui
Mapbox GL JS
Mapbox Searchbox API

🔍 Features

📍 Mapbox GL interactive map
🔎 Mapbox Searchbox API
🎨 Clean UI with shadcn/ui
⚡ Responsive & fast
📱 Mobile-friendly layout

🚀 Getting Started

First, install dependencies and start the development server:

git clone https://github.com/AnmolSaini16/next-maps.git
cd your-repo
npm install
npm run dev

🔐 Environment Variables

NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_access_token
NEXT_PUBLIC_MAPBOX_SESSION_TOKEN=your_uuidv4_session_token

📦 Deployment

Deploy on Vercel in seconds.

📚 Docs

🤝 Contributing

Contributions are welcome! If you’d like to improve this project, feel free to fork it and open a pull request.

☕ Support Me

If you find this project useful, consider supporting me:

Sponsor on github

Extension points exported contracts — how you extend this code

LocationMarkerProps (Interface)

(no doc)

src/components/location-marker.tsx

SearchOptions (Interface)

(no doc)

src/lib/mapbox/api.ts

MapContextType (Interface)

(no doc)

src/context/map-context.ts

SearchResponse (Interface)

(no doc)

src/lib/mapbox/api.ts

RetrieveResponse (Interface)

(no doc)

src/lib/mapbox/api.ts

Core symbols most depended-on inside this repo

src/context/map-context.ts

getSessionToken

called by 2

src/lib/mapbox/api.ts

getIcon

called by 1

src/components/location-popup.tsx

performSearch

called by 1

src/components/map/map-search.tsx

searchLocations

called by 1

src/lib/mapbox/api.ts

retrieveLocation

called by 1

src/lib/mapbox/api.ts

useDebounce

called by 1

src/hooks/useDebounce.ts

Shape

Function 57

Interface 5

Languages

TypeScript100%

Modules by API surface

src/components/ui/dialog.tsx10 symbols

src/components/ui/command.tsx9 symbols

src/lib/mapbox/api.ts6 symbols

src/components/ui/tabs.tsx4 symbols

src/components/ui/popover.tsx4 symbols

src/components/map/map-marker.tsx4 symbols

src/components/map/map-controls.tsx3 symbols

src/lib/mapbox/provider.tsx2 symbols

src/context/map-context.ts2 symbols

src/components/map/map-styles.tsx2 symbols

src/components/map/map-search.tsx2 symbols

src/components/location-popup.tsx2 symbols

For agents

$ claude mcp add next-maps \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact