Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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)

###  🎇 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](https://github.com/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.

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

[![Deploy with Vercel](https://vercel.com/button)](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)

####  ⚙️ Manual install

```bash

git clone https://github.com/richard-unterberg/next-leaflet-starter-typescript

# then

npm install

# or

yarn

```

###  🏍️ Start up

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

```

###  📊 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](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-starter

Happy coding! ✌️👽