Skip to content

a maplibre-gl controller template for next.js with advanced category markers & clustering features. written in react-typescript and featuring zustand state management, tailwind and lucide-icons

Notifications You must be signed in to change notification settings

richard-unterberg/maplibre-nextjs-ts-starter

Repository files navigation

advanced next.js starter kit for maplibre GL usage with react-typescript

Save some minutes by adapting this modern next.js typescript project to your needs. It comes with a custom maplibre-gl-js layer or jsx rendering output in your common next.js stack. ✌️

The JSX rendering output is a bit slower than the layer rendering output. But it is more flexible and you can use the full power of react. The layer rendering output is unbelievably fast but you can only use the limited way of displaying layers in maplibre-gl-js, which can't really be overlapped.

You will need a maptiler account to use the maplibre-gl-js library. You can get a free account here. A simple mapbox-to-maplibre-gl resolver is already in place in next.config.js.

Replace the MAPTILER_KEY in .env.local.example with your own key and rename the file to .env.local. Dont share your key with anyone.

more infos very soon...

👀 please create PR if you have some ideas to improve this starter.

🎰 Under the hood:

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

About

a maplibre-gl controller template for next.js with advanced category markers & clustering features. written in react-typescript and featuring zustand state management, tailwind and lucide-icons

Topics

Resources

Stars

Watchers

Forks

Languages