tyrel/shipwrecks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Tyrel Souza 2023-08-18 01:13:11 -04:00
commit 9c02008072
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
20 changed files with 2935 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md Normal file
View File

@ -0,0 +1,3 @@
Load Sample Dataset `sample_shipwrecks` https://github.com/neelabalan/mongodb-sample-dataset

14
js/shipwrecks/.eslintrc.cjs Normal file
View File

@ -0,0 +1,14 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
}
}

28
js/shipwrecks/.gitignore vendored Normal file
View File

@ -0,0 +1,28 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

8
js/shipwrecks/.prettierrc.json Normal file
View File

@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}

35
js/shipwrecks/README.md Normal file
View File

@ -0,0 +1,35 @@
# shipwrecks
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

14
js/shipwrecks/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2639
js/shipwrecks/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
js/shipwrecks/package.json Normal file
View File

@ -0,0 +1,27 @@
{
"name": "shipwrecks",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"axios": "^1.4.0",
"mapbox-gl": "^2.15.0",
"vue": "^3.3.4",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.2",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/eslint-config-prettier": "^8.0.0",
"eslint": "^8.45.0",
"eslint-plugin-vue": "^9.15.1",
"prettier": "^3.0.0",
"vite": "^4.4.6"
}
}

BIN
js/shipwrecks/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

12
js/shipwrecks/src/App.vue Normal file
View File

@ -0,0 +1,12 @@
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<RouterLink to="/">Home</RouterLink>
<RouterView />
</template>
<style scoped>
</style>

0
js/shipwrecks/src/assets/base.css Normal file
View File

1
js/shipwrecks/src/assets/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

0
js/shipwrecks/src/assets/main.css Normal file
View File

75
js/shipwrecks/src/components/Map.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="map-container">
<div ref="map" class="map"></div>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl';
import axios from 'axios';
const ACCESS = 'pk.eyJ1IjoidHlyZWxzb3V6YSIsImEiOiJjbGxnMWJuYmcwczZwM3JxaGxhemJrb3hvIn0.89kO6J8e--lyQSm_lWaBLw';
export default {
data() {
return {
map: null,
shipwrecks: [],
};
},
mounted() {
this.fetchShipwrecks();
},
methods: {
async fetchShipwrecks() {
try {
const response = await axios.get('http://localhost:5000/api/shipwrecks');
this.shipwrecks = response.data;
this.drawMapWithMarkers();
} catch (error) {
console.error('Error fetching shipwrecks:', error);
}
},
drawMapWithMarkers() {
mapboxgl.accessToken = ACCESS;
this.map = new mapboxgl.Map({
container: this.$refs.map,
style: 'mapbox://styles/mapbox/streets-v11',
center: [-78.968,35.916],
zoom: 7
});
this.map.on('load', () => {
new mapboxgl.Marker().setLngLat([-78.968,35.916]).addTo(this.map)
this.shipwrecks.forEach(shipwreck => {
const coordinates = shipwreck.coordinates;
if (coordinates && coordinates.length === 2) {
new mapboxgl.Marker().setLngLat({ lng: coordinates[0], lat: coordinates[1] }).addTo(this.map);
}
});
});
}
},
beforeDestroy() {
if (this.map) {
this.map.remove();
}
}
};
</script>
<style>
.map-container {
position: relative;
height: 400px;
}
.map {
width: 100%;
height: 100vh;
}
</style>

10
js/shipwrecks/src/main.js Normal file
View File

@ -0,0 +1,10 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

15
js/shipwrecks/src/router/index.js Normal file
View File

@ -0,0 +1,15 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
}
]
})
export default router

14
js/shipwrecks/src/views/HomeView.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<h1>Shipwrecks Coordinates</h1>
<MapboxMap />
</template>
<script>
import MapboxMap from '../components/Map.vue';
export default {
components: {
MapboxMap
}
};
</script>

16
js/shipwrecks/vite.config.js Normal file
View File

@ -0,0 +1,16 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})

21
py/main.py Normal file
View File

@ -0,0 +1,21 @@
from flask import Flask, jsonify
from flask_cors import CORS
from pymongo import MongoClient
app = Flask(__name__)
cors = CORS(app)
# MongoDB connection URL
client = MongoClient('mongodb://192.168.1.20:49153/')
db = client['sample_geospatial'] # Replace with your database name
@app.route('/api/shipwrecks', methods=['GET'])
def get_shipwrecks():
try:
shipwrecks = list(db['near_durham'].find({}, {'_id': 0, 'coordinates': 1}))
return jsonify(shipwrecks)
except Exception as e:
return jsonify(error=str(e)), 500
if __name__ == '__main__':
app.run(debug=True)

3
py/requirements.txt Normal file
View File

@ -0,0 +1,3 @@
flask
flask_cors
pymongo