typescript next.js starter kit for leaflet-react

An extensible next.js starter kit archived with 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 next(.js) mapping projects.

Table of Contents

1. Features
2. Getting started
   1. Breaking Changes
   2. Clone & Deploy with Github and Vercel
   3. Manual install
3. Start up
4. Coming up (probably)
5. Remove / change linting rules
6. WebGL?
7. No typescript?

🎇 Features

• 🏇 next.js 14 ("pages" routing)
• 😏 typescript + strict lint setup
• 🐛 custom markers
• 📄 custom popups
• 📚 marker categories
• 🫧 marker clustering
• ⚓️ context for map and leaflet instances
• 🏡 custom ui components (locate me, center on markers)

🏎 Getting Started

💣 Breaking Changes introduced > v0.1.1

In Version v0.1.2 I changed the path aliases to be more consistent with the ES standards from @alias to #alias. If pulling the template from v0.1.1 you have to change the import paths in your components and pages.

- import { SomeComponent } from '@components/useMap'
+ import { SomeComponent } from '#components/useMap'

⛴ Clone & Deploy with Github and Vercel

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

⚙️ Manual install

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

🏍️ Start up

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

📊 Upcoming (probably)

• 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
• add some data & experiments with more data

• Feel free to contribute! 🤗

🤯 How to remove those linting rules?

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

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

👽 Web GL based mapping project

leafleft, graphic-based tile rendering or rasterized zoom levels are not smooth enough and you are in for crazy fast WebGL mapping? Here's my maplibre next.js ts starter kit

📝 Don't wanna use typscript at all?

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

Happy coding! ✌️👽