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

• 🏇 mighty next.js 14 leaflet-react setup
• 😏 typescript + strict lint setup
• 🔗 next.js ready route nav module
• 🌤 modular demo content
• 🐛 custom marker icons
• 📄 custom marker popups
• 📚 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)

🏎 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
  • 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! 🤗

🤯 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 heavily inspired by this one: https://github.com/colbyfayock/next-leaflet-starter

Happy coding! ✌️👽