This project is a fully functional Next.js application designed to provide polygon creation and management features on an interactive map. It allows users to draw, customize, and manage polygons, calculate their areas, and export/import polygon data. The app integrates React Leaflet for map functionalities and Redux for state management.
- Polygon Drawing: Users can create custom polygons on the map.
- Polygon Customization: User can further update polygon.
- Polygon Color Customization: Change polygon fill and boundary colors using hex codes.
- Marker Placement: A marker is shown at the center of each polygon..
- Area Calculation: Tooltip displays polygon area when hovering over the marker.
- Polygon CRUD functionality: User can perform CRUD(CREATE,READ,UPDATE,DELETE) polygon data from the ui.
- Data Export/Import: Export polygon data (coordinates, colors, labels) as a JSON file and import it back.
- Geolocation: Auto-center map based on user’s geolocation.(Only if user provides browser's window to access users location data otherwise a default location is shown).
- Polygon Validation: Prevent overlapping or intersecting polygons with validation feedback.
- Search & Filter: Filter polygons by polygon IDs.
- Framework: Next.js
- State Management: Redux
- Map Library: React Leaflet
- Styling: SCSS (Sass)
- Language: Javascript
Ensure you have the following installed:
- Node.js (v14 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/kayes360/drawgeo.git cd drawgeo -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open the app in your browser:
http://localhost:3000
- Navigate to the map interface.
- Draw a polygon by clicking on the map.
- Customize the polygon’s fill and boundary colors using hex codes from the right side column.
- Hover over the polygon marker to view its area.
- Use the UI to edit or delete polygons.
- Export polygon data as JSON or import an existing JSON file.
- Redux Toolkit manages polygon data, ensuring efficient state updates for drawing, editing, and deleting polygons.
- React Leaflet provides the interactive map functionalities.
- react-leaflet-draw provides Polygon drawing functionalities.
- Enable Additional Drawing Features: Implement functionality for:
- Markers
- Rectangles
- Polylines
- Circles
- Circle markers (Currently disabled)
- Upgrade State Management: Shift from Redux Toolkit to the latest state management solution for better performance and maintainability.
- Improve UI/UX: Enhance the user interface for better usability and accessibility.
- Optimize Performance: Implement memoization and other optimizations to handle complex maps efficiently.