typescript next.js starter kit for leaflet-react

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

Table of Contents

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?

🎇 Features

• 🏇 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)

🏎 Getting Started

⛴ 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

🔑 Environment Setup

After installation, you need to configure your environment variables:

1. Copy the example environment file:

cp .env.example .env

2. Edit .env and add your API keys:

   • NEXT_PUBLIC_GOOGLE_CLOUD_API_KEY: Required for address search autocomplete
     • Get your key from Google Cloud Console
     • Enable the following APIs:
       • Maps JavaScript API
       • Places API
   • NEXT_PUBLIC_GEOCODING_API_KEY: For geocoding features
     • Get your key from OpenCage or your preferred geocoding service
   • NEXT_PUBLIC_PASSWORD: Set a password for application access control

3. Save the .env file

Note: Never commit your .env file to version control. It contains sensitive API keys.

🏍️ 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! 🤗

📦 All them dependencies

"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.

🤯 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 so I can't be anymore without them.

📝 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! ✌️👽