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: about 1 month 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 (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-18T11:22:56.000Z (about 2 months ago)
- Last Synced: 2024-09-29T01:20:25.868Z (about 1 month 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: 233 KB
- Stars: 52
- Watchers: 1
- Forks: 8
- 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)
- 🏇 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)
#### 💣 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
+ 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](https://github.com/richard-unterberg/maplibre-nextjs-ts-starter)
### 📝 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! ✌️👽