LOCAMARK: Your Personal Map, Your Marked Memories

LOCAMARK

Your Personal Map, Your Shared Memories!
View Demo · Report Bug · Request Feature

Table of Contents

1. ℹ About The Project
   • 🛠 Built With
2. 🖼️ Screenshots & Videos
3. ➡ Getting Started
   • Prerequisites
   • Installation
4. 🖱 Usage
5. 🗺 Roadmap
6. © License
7. 💌 Contact

ℹ About The Project

LocaMark is a personalized mapping tool designed to help users mark, save, and organize various locations, areas, or lines on a digital map. The main goal of the program is to allow users to capture and preserve important places, routes, or regions they encounter, whether during travels or daily life. By marking favorite locations or drawing lines to represent routes or boundaries, LocaMark provides an intuitive platform for users to keep a visual record of meaningful spots and experiences. Its user-friendly interface ensures easy navigation, enabling users to revisit and manage their saved locations whenever needed.

(back to top)

🛠 Built With

This section should list any major frameworks/libraries used to bootstrap your project. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.

• 
• 
• 
• 
• 
• 
• 

(back to top)

🖼️ Screenshots & Videos

➡ Getting Started

To get a local copy up and running, follow these steps:

Prerequisites

• Node.js (v20.x or higher)
• .NET 8.0 SDK
• PostgreSQL installed and running

Installation

1. Clone the repo:

   git clone https://github.com/erayates/locamark.git
   cd locamark

2. Install frontend dependencies:

   cd app
   npm install

3. Install backend dependencies:

   dotnet restore

4. Set up the database:
   • Create a PostgreSQL database named locamark.
   • Run the migration to set up the tables:

   cd backend
   dotnet ef database update

5. Run the app:
   • Start the backend server:

   cd backend
   dotnet run

   • Start the frontend app:

   cd backend
   npm run dev

(back to top)

🖱 Usage

LocaMark is designed to offer a smooth and intuitive experience for managing your marked locations. Below are some key examples of how you can use the app:

1. Login and Register Process

• Register: New users can create an account by registering with basic information such as email and password.
• Login: After registering, users can log in to access their personal map and saved locations.
• Once logged in, users will be directed to the map interface where they can begin marking locations.

2. Adding New Locations, Areas, or Lines

• Users can mark new points, areas, or lines on the map by clicking on the map and filling out the required details.
• Each location can be given a name, description, and saved for later reference.
• A confirmation panel will appear before finalizing the marker, giving you the option to confirm or cancel the action.

3. Viewing All Marked Geometries

• The application displays all your saved geometries (points, areas, and lines) in a table below the map.
• Actions on the table:
  • Show: Clicking "Show" for any geometry will close the table and zoom into the specific geometry on the map, opening a popup to display details such as name and description.
  • Update: You have two options for updating geometries:
    • Manual Update: Click the update button to manually change the details of the marker.
    • Drag & Drop: Easily drag markers on the map to new positions and confirm changes via an alert.
  • Delete: Remove any marker or geometry from the map by clicking "Delete."

4. Drag & Drop Feature

• Geometries can be easily repositioned by dragging and dropping them to a new location on the map.
• After dropping, an alert will appear asking for confirmation before saving the new position. Once confirmed, the geometry is updated in the database, and the page is refreshed.

5. Go Back to Center (Zoom to Turkey)

• The app includes a feature to quickly zoom back to the center of Turkey, making it easy to reset the map view and focus on the main area of interest.

6. Custom Map Controls

• Navigation: LocaMark comes with custom controllers for map navigation:
  • Zoom In/Out: Buttons to zoom the map in or out.
  • Rotate Left/Right: Rotate the map view for better orientation.
• Dark Mode: Toggle between light and dark modes for a customized user experience, especially useful for night-time viewing.

7. Logout

• A Logout button is located at the top of the page, allowing users to easily sign out of their account.

For more examples and detailed information, please refer to the Documentation (Not prepared yet!).

(back to top)

🗺 Roadmap

• Role Based Authentication and Authorization
• Admin Dashboard
• Responsive views for all pages

See the open issues for a full list of proposed features (and known issues).

(back to top)

© License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

💌 Contact

Eray Ates - @Twitter - @LinkedIn - [email protected]

Project Link: https://github.com/erayates/locamark

(back to top)