https://github.com/naufaldi/nextjs-leaflet

Setup NextJS with leaflet
https://github.com/naufaldi/nextjs-leaflet

Last synced: 2 months ago
JSON representation

Setup NextJS with leaflet

• Host: GitHub
• URL: https://github.com/naufaldi/nextjs-leaflet
• Owner: naufaldi
• License: mit
• Created: 2023-12-14T11:47:41.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-26T16:29:16.000Z (4 months ago)
• Last Synced: 2024-10-18T22:58:28.268Z (3 months ago)
• Language: TypeScript
• Size: 411 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NextJS Leaflet Project

## Introduction

This project demonstrates integrating Leaflet with NextJS for creating interactive maps. It serves as a practical example for the tutorial series on [blog.cerita-faldi.xyz](https://blog.cerita-faldi.xyz).

## Technologies Used

- **NextJS**: A React framework for server-side rendering and static web applications.

- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.

- **Leaflet**: An open-source JavaScript library for interactive maps.

- **GeoJSON**: A format for encoding various geographic data structures.

- **Geoman**: Tools for creating and editing geometry layers in Leaflet.

## Features

- **Interactive Maps**: Dynamic map interaction within a NextJS application.

- **GeoJSON Integration**: Handling geographical data using GeoJSON.

- **Customizable Map Markers**: Adding and customizing map markers.

- **Geoman Tools**: Advanced map editing and geometry layer manipulation.

- **Responsive Design**: Tailwind CSS ensures a responsive and modern UI.

## Usage

1. **Map Navigation**: Interact with the map to explore locations.

2. **Markers**: Click on the map to add markers and view coordinates.

3. **Editing Layers**: Utilize Geoman tools for map editing.

4. **GeoJSON Data**: Visualize geographical data with GeoJSON.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.