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
- Features
- Getting started
- Start up
- Coming up (probably)
- Dependencies
- Removing linting rules
- 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! โ๏ธ๐ฝ