An extensible next.js starter kit for the leaflet-react map plugin. Template visually enhanced by tailwind and lucide icons. ✨ Setup with typescript 👐.

Packed with useful components and hooks for using the map and create UI elements for your next(.js) big mapping project.

Wanna instead use the crazy fast Maplibre GL JS?: Here's my maplibre next.js ts starter kit

1. Features
2. Getting started
   1. Clone & Deploy with Github and Vercel
   2. Manual install
3. Start up
4. Coming up (probably)
5. Dependencies
6. Removing linting rules
7. No typescript?

• 🏇 mighty next.js 13 leaflet-react no-ssr setup
• 😏 typescript + strict lint setup
• 🔗 next.js ready route nav module
• 🌤 modular demo content
• 🐛 custom marker icons
• 📚 marker categories
• 🫧 marker cluster by category with matching icon+color and notification bubble with marker count
• ⚓️ custom hooks for getting marker data and map context (thx Flo301)
• 🏡 custom ui components (locate me, center on markers)

Create new Github repo with vercel and deploy it within minutes. Could not be easier as hitting some buttons. Shipping of private repos is possible.

Later: Check out your repo locally and run npm install or yarn in root

Follow Instructions for Starting Up

git clone https://github.com/richard-unterberg/next-leaflet-starter-typescript
# then
npm install
# or
yarn

According the official Next.js Docs:

Run the development server:

npm run dev
# or
yarn dev

Building with type checking and linting

npm run build
# or
yarn build

Start build locally

npm run start
# or
yarn start

• redesign zoom in / zoom out
• atom components for map ui
• fix error when setting new coordinates in hot reload "Map container is already initialized."
• breakpoint hook synced with tailwind breakpoint which is usable in js
• multiple map instances per page
  • not possible atm since we read the map instance directly from window object 🤫
• add axios for fetching data
  • move simulated "endpoint" (Places) to public folder and convert to JSON

• Feel free to contribute! 🤗

"next": "^13.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1",
"@react-leaflet/core": "^2.1.0",
"leaflet": "^1.9.3",
"leaflet.markercluster": "^1.5.3",
"react-resize-detector": "^8.0.4",
"tailwindcss": "^3.2.6"
"lucide-react": "^0.121.0",

See package.json for more details and devDependencies.

You can adjust the settings mainly in eslint.json and tsconfig.json.

I've been using them a lot on my dayjob so I can't be anymore without them.

See this nice javascript implementation - This repo is heavily inspired by this one: https://github.com/colbyfayock/next-leaflet-starter

Happy coding! ✌️👽