Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/richard-unterberg/leaflet-nextjs-ts-starter
Create interactive maps with this starter boilerplate for next.js and the leaflet-maps-react plugin. Written in typescript, visually enhanced by tailwind and lucide-react icons. ✨
https://github.com/richard-unterberg/leaflet-nextjs-ts-starter
eslint-config leaflet-react leafletjs lucide-icon nextjs react tailwindcss typescript
Last synced: 33 minutes ago
JSON representation
Create interactive maps with this starter boilerplate for next.js and the leaflet-maps-react plugin. Written in typescript, visually enhanced by tailwind and lucide-react icons. ✨
- Host: GitHub
- URL: https://github.com/richard-unterberg/leaflet-nextjs-ts-starter
- Owner: richard-unterberg
- License: mit
- Created: 2023-03-02T12:44:55.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-25T19:55:00.000Z (about 2 months ago)
- Last Synced: 2025-02-09T02:34:07.823Z (10 days ago)
- Topics: eslint-config, leaflet-react, leafletjs, lucide-icon, nextjs, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://next-leaflet-starter-typescript.vercel.app/map
- Size: 361 KB
- Stars: 63
- Watchers: 1
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
typescript next.js starter kit for leaflet-react
===============An extensible [next.js](https://nextjs.org/) starter kit archived with the [leaflet-react](https://react-leaflet.js.org/) map plugin. Template visually enhanced by [tailwind](https://tailwindcss.com/) and [lucide icons](https://lucide.dev/). ✨
Setup with [typescript](https://www.typescriptlang.org/) 👐.Packed with useful components and hooks for using the map and create UI elements for next(.js) mapping projects.
### Table of Contents
1. [Features](#features)
2. [Getting started](#getting-started)
1. [Breaking Changes](#breaking-changes)
2. [Clone & Deploy with Github and Vercel](#clone-deploy)
3. [Manual install](#manual-install)
3. [Start up](#start-up)
4. [Coming up (probably)](#coming-up)
6. [Remove / change linting rules](#disable-lint)
7. [WebGL?](#web-gl)
7. [No typescript?](#no-ts)- 🏇 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](https://github.com/Flo301))
- 🏡 custom ui components (locate me, center on markers)#### 💣 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.
```diff
- 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.
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frichard-unterberg%2Fnext-leaflet-starter-typescript)
Later: Check out your repo locally and run ```npm install``` or ```yarn``` in root
Follow Instructions for [Starting Up](#start-up)
```bash
git clone https://github.com/richard-unterberg/next-leaflet-starter-typescript
# then
npm install
# or
yarn
```According the official [Next.js Docs](https://nextjs.org/docs/getting-started):
Run the development server:
```bash
npm run dev
# or
yarn dev
```Building with type checking and linting
```bash
npm run build
# or
yarn build
```Start build locally
```bash
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!** 🤗
### 🤯 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](https://github.com/richard-unterberg/maplibre-nextjs-ts-starter)
### 📝 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-starterHappy coding! ✌️👽