Point Plotter

Point Plotter is a two-page application that allows users to interact with a fullscreen map, add coordinates or points to the map, and calculate the distance between these points.

Features

Core Functionality

• Two Page App: Navigate easily between the two main pages: About and Map.

• Fullscreen Map Leaflet: Enjoy a seamless and fully immersive mapping experience.

• Navigation Button Group: Quickly switch between the About and Map pages using the navigation buttons at the top.

• Map Points List Popup: Access the list of plotted points on the map in a popup on the left.

• Calculated Distance Window: View the calculated distance between points in kilometers, with the option to convert to miles.

• Clear Points: Clear individual points or clear all at once for a fresh start.

• Store History in browsers LocalStorage: Keep track of your past actions for a more personalized experience.

• Enter Coordinates: Input specific coordinates manually.

Optional Features (Not Included yet)

• Undo Last Action: Step back in time with an undo functionality.

• Draw Radius Instead of Line: Visualize distances with a radius instead of a line.

• Render Coordinates to Friendly Names: Convert raw coordinates to more recognizable street, town, or country names.

• Backend with Login: Securely save your favorite coordinates with an optional login feature.

Getting Started

Prerequisites

• Node.js (latest stable version)

• Any modern web browser (Chrome recommended)

Installation

1. Clone the repository:

git clone https://github.com/mlbudda/point-plotter.git

2. Navigate to the project folder and install dependencies:

cd my-app/frontend
npm install

Start the development server:

npm run dev

Usage

• About Page: Learn more about the application and its features.

• Map Page: Interact with the map, plot points, calculate distances, and explore the additional functionalities.