First commit
This commit is contained in:
commit
53ae3e2998
8 changed files with 1551 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules
|
||||||
|
.env
|
||||||
43
README.md
Normal file
43
README.md
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
# GPS Tracker
|
||||||
|
|
||||||
|
A web interface to render GPS data points stored in a PostgreSQL database on a map.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Clone the repository:
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/yourusername/gps-tracker.git
|
||||||
|
cd gps-tracker
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Install dependencies:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Create a `.env` file with the following content:
|
||||||
|
```env
|
||||||
|
DATABASE_URL=postgres://username:password@localhost:5432/gpstracker
|
||||||
|
PORT=3000
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Create the `gps_data` table in your PostgreSQL database:
|
||||||
|
```sql
|
||||||
|
CREATE TABLE gps_data (
|
||||||
|
id SERIAL PRIMARY KEY,
|
||||||
|
latitude FLOAT NOT NULL,
|
||||||
|
longitude FLOAT NOT NULL,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Start the server:
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
6. Open your browser and navigate to `http://localhost:3000`.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
Add your GPS data points to the PostgreSQL ▋
|
||||||
56
app.js
Normal file
56
app.js
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
const express = require('express');
|
||||||
|
const dotenv = require('dotenv');
|
||||||
|
const { Sequelize, DataTypes } = require('sequelize');
|
||||||
|
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const port = process.env.PORT || 3000;
|
||||||
|
|
||||||
|
// PostgreSQL connection using Sequelize
|
||||||
|
const sequelize = new Sequelize(process.env.DATABASE_URL, {
|
||||||
|
dialect: 'postgres',
|
||||||
|
logging: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// Define GPS model
|
||||||
|
const GpsData = sequelize.define('GpsData', {
|
||||||
|
latitude: {
|
||||||
|
type: DataTypes.FLOAT,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
longitude: {
|
||||||
|
type: DataTypes.FLOAT,
|
||||||
|
allowNull: false
|
||||||
|
},
|
||||||
|
created_at: {
|
||||||
|
type: DataTypes.DATE,
|
||||||
|
defaultValue: DataTypes.NOW
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
tableName: 'location_history',
|
||||||
|
timestamps: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// Middleware
|
||||||
|
app.use(express.static('public'));
|
||||||
|
app.set('view engine', 'ejs');
|
||||||
|
|
||||||
|
// Routes
|
||||||
|
app.get('/', async (req, res) => {
|
||||||
|
res.render('index')
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get('/get', async (req, res) => {
|
||||||
|
const apiResponse = await GpsData.findAll({
|
||||||
|
limit: 1000,
|
||||||
|
offset: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const gpsData = apiResponse.map((p) => p.dataValues);
|
||||||
|
res.json(gpsData);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(port, () => {
|
||||||
|
console.log(`Server is running on port ${port}`);
|
||||||
|
});
|
||||||
1390
package-lock.json
generated
Normal file
1390
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
16
package.json
Normal file
16
package.json
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"name": "gps-tracker",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A web interface to render GPS data points on a map",
|
||||||
|
"main": "app.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "node app.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"dotenv": "^16.0.0",
|
||||||
|
"ejs": "^3.1.6",
|
||||||
|
"express": "^4.17.1",
|
||||||
|
"pg": "^8.7.1",
|
||||||
|
"sequelize": "^6.6.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
public/css/styles.css
Normal file
3
public/css/styles.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
#map {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
26
public/js/main.js
Normal file
26
public/js/main.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
async function getGpsData() {
|
||||||
|
return await fetch('/get')
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const map = L.map('map').setView([0, 0], 2);
|
||||||
|
|
||||||
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
getGpsData().then((response) => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Response status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
response.json().then((gpsData) => {
|
||||||
|
console.log(gpsData);
|
||||||
|
gpsData.forEach(point => {
|
||||||
|
L.marker([point.latitude, point.longitude]).addTo(map)
|
||||||
|
.bindPopup(`Latitude: ${point.latitude}, Longitude: ${point.longitude}`)
|
||||||
|
.openPopup();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
15
views/index.ejs
Normal file
15
views/index.ejs
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>GPS Tracker</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||||
|
<link rel="stylesheet" href="/css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||||
|
<script src="/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue