Compare commits
3 Commits
21d0c7cca3
...
a12c95dcf8
Author | SHA1 | Date | |
---|---|---|---|
a12c95dcf8 | |||
e9c2cd9e95 | |||
1571086844 |
12
map/index.html
Normal file
12
map/index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>APRS Map</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/map.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
17
package.json
17
package.json
@ -3,19 +3,20 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"aprs-parser": "github:ad1217/npm-aprs-parser#no-dynamic-require",
|
"aprs-parser": "github:ad1217/npm-aprs-parser#no-dynamic-require",
|
||||||
"distinct-colors": "^1.0.4",
|
"distinct-colors": "^3.0.0",
|
||||||
"ol": "^6.15.1",
|
"ol": "^9.2.4",
|
||||||
"parse-duration": "^1.1.0",
|
"parse-duration": "^1.1.0",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.4.30",
|
||||||
"vue3-openlayers": "^0.1.75"
|
"vue3-openlayers": "^10.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@modyfi/vite-plugin-yaml": "^1.0.4",
|
"@modyfi/vite-plugin-yaml": "^1.1.0",
|
||||||
"@rollup/plugin-yaml": "^4.1.1",
|
"@rollup/plugin-yaml": "^4.1.2",
|
||||||
"@vitejs/plugin-vue": "^4.2.3",
|
"@vitejs/plugin-vue": "^5.0.5",
|
||||||
"vite": "^4.4.3"
|
"vite": "^5.3.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "pnpm run -r --parallel dev",
|
"start": "pnpm run -r --parallel dev",
|
||||||
|
1592
pnpm-lock.yaml
1592
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -4,6 +4,6 @@
|
|||||||
"dev": "node ./src/server.js"
|
"dev": "node ./src/server.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"ws": "^8.13.0"
|
"ws": "^8.17.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,18 +1,21 @@
|
|||||||
lockfileVersion: '6.0'
|
lockfileVersion: '9.0'
|
||||||
|
|
||||||
settings:
|
settings:
|
||||||
autoInstallPeers: true
|
autoInstallPeers: true
|
||||||
excludeLinksFromLockfile: false
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
|
importers:
|
||||||
|
|
||||||
|
.:
|
||||||
dependencies:
|
dependencies:
|
||||||
ws:
|
ws:
|
||||||
specifier: ^8.13.0
|
specifier: ^8.17.1
|
||||||
version: 8.13.0
|
version: 8.17.1
|
||||||
|
|
||||||
packages:
|
packages:
|
||||||
|
|
||||||
/ws@8.13.0:
|
ws@8.17.1:
|
||||||
resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
|
resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==}
|
||||||
engines: {node: '>=10.0.0'}
|
engines: {node: '>=10.0.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
bufferutil: ^4.0.1
|
bufferutil: ^4.0.1
|
||||||
@ -22,4 +25,7 @@ packages:
|
|||||||
optional: true
|
optional: true
|
||||||
utf-8-validate:
|
utf-8-validate:
|
||||||
optional: true
|
optional: true
|
||||||
dev: false
|
|
||||||
|
snapshots:
|
||||||
|
|
||||||
|
ws@8.17.1: {}
|
||||||
|
82
src/Map.vue
82
src/Map.vue
@ -6,23 +6,26 @@
|
|||||||
>
|
>
|
||||||
<ol-view :zoom="10" :center="[-72.15, 43.9]" projection="EPSG:4326" />
|
<ol-view :zoom="10" :center="[-72.15, 43.9]" projection="EPSG:4326" />
|
||||||
|
|
||||||
<ol-tile-layer>
|
<ol-tile-layer title="Base Map">
|
||||||
<ol-source-osm />
|
<ol-source-osm />
|
||||||
</ol-tile-layer>
|
</ol-tile-layer>
|
||||||
|
|
||||||
<ol-vector-layer v-for="gpxURL in routes" :key="gpxURL">
|
<ol-layer-group title="GPX Routes">
|
||||||
|
<ol-vector-layer v-for="gpxURL in routes" :key="gpxURL" :title="gpxURL">
|
||||||
<ol-source-vector :url="gpxURL" :format="new GPX()"> </ol-source-vector>
|
<ol-source-vector :url="gpxURL" :format="new GPX()"> </ol-source-vector>
|
||||||
<ol-style>
|
<ol-style>
|
||||||
<ol-style-stroke color="hsl(200, 90%, 30%)" :width="5">
|
<ol-style-stroke color="hsl(200, 90%, 30%)" :width="5">
|
||||||
</ol-style-stroke>
|
</ol-style-stroke>
|
||||||
</ol-style>
|
</ol-style>
|
||||||
</ol-vector-layer>
|
</ol-vector-layer>
|
||||||
|
</ol-layer-group>
|
||||||
|
|
||||||
<!-- Station Paths -->
|
<!-- Station Paths -->
|
||||||
<div>
|
<div>
|
||||||
|
<ol-layer-group title="Paths">
|
||||||
<div v-for="(packets, callsign, idx) in stationPaths" :key="callsign">
|
<div v-for="(packets, callsign, idx) in stationPaths" :key="callsign">
|
||||||
<!--Paths -->
|
<!--Paths -->
|
||||||
<ol-vector-layer render-mode="image">
|
<ol-vector-layer render-mode="image" :title="callsign">
|
||||||
<ol-source-vector>
|
<ol-source-vector>
|
||||||
<ol-feature>
|
<ol-feature>
|
||||||
<ol-geom-line-string
|
<ol-geom-line-string
|
||||||
@ -36,9 +39,13 @@
|
|||||||
</ol-style-stroke>
|
</ol-style-stroke>
|
||||||
</ol-style>
|
</ol-style>
|
||||||
</ol-vector-layer>
|
</ol-vector-layer>
|
||||||
|
</div>
|
||||||
|
</ol-layer-group>
|
||||||
|
|
||||||
|
<ol-layer-group title="Points">
|
||||||
|
<div v-for="(packets, callsign, idx) in stationPaths" :key="callsign">
|
||||||
<!-- Points -->
|
<!-- Points -->
|
||||||
<ol-vector-layer render-mode="image">
|
<ol-vector-layer render-mode="image" :title="callsign">
|
||||||
<ol-source-vector>
|
<ol-source-vector>
|
||||||
<ol-feature>
|
<ol-feature>
|
||||||
<ol-geom-multi-point
|
<ol-geom-multi-point
|
||||||
@ -49,15 +56,17 @@
|
|||||||
</ol-source-vector>
|
</ol-source-vector>
|
||||||
<ol-style>
|
<ol-style>
|
||||||
<ol-style-circle :radius="3">
|
<ol-style-circle :radius="3">
|
||||||
<ol-style-fill :color="stationColors[idx].hex()"> </ol-style-fill>
|
<ol-style-fill :color="stationColors[idx].hex()">
|
||||||
|
</ol-style-fill>
|
||||||
</ol-style-circle>
|
</ol-style-circle>
|
||||||
</ol-style>
|
</ol-style>
|
||||||
</ol-vector-layer>
|
</ol-vector-layer>
|
||||||
</div>
|
</div>
|
||||||
|
</ol-layer-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Digipeater locations -->
|
<!-- Digipeater locations -->
|
||||||
<ol-vector-layer>
|
<ol-vector-layer title="Digipeater Locations">
|
||||||
<ol-source-vector>
|
<ol-source-vector>
|
||||||
<ol-feature v-for="(position, callsign) in digiPos" :key="callsign">
|
<ol-feature v-for="(position, callsign) in digiPos" :key="callsign">
|
||||||
<ol-geom-point :coordinates="position"> </ol-geom-point>
|
<ol-geom-point :coordinates="position"> </ol-geom-point>
|
||||||
@ -73,11 +82,13 @@
|
|||||||
</ol-vector-layer>
|
</ol-vector-layer>
|
||||||
|
|
||||||
<!-- Packet Paths -->
|
<!-- Packet Paths -->
|
||||||
<ol-vector-layer>
|
<ol-vector-layer title="Packet Paths" :visible="false">
|
||||||
<ol-source-vector :features="packetPaths"> </ol-source-vector>
|
<ol-source-vector :features="packetPaths"> </ol-source-vector>
|
||||||
<!-- TODO: fix style -->
|
<!-- TODO: fix style -->
|
||||||
<!-- <ol-style :overrideStyleFunction="packetPathStyleFunc"> </ol-style> -->
|
<!-- <ol-style :overrideStyleFunction="packetPathStyleFunc"> </ol-style> -->
|
||||||
</ol-vector-layer>
|
</ol-vector-layer>
|
||||||
|
|
||||||
|
<ol-layerswitcher-control />
|
||||||
</ol-map>
|
</ol-map>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -94,9 +105,9 @@ import LineString from 'ol/geom/LineString';
|
|||||||
import Style from 'ol/style/Style';
|
import Style from 'ol/style/Style';
|
||||||
import Stroke from 'ol/style/Stroke';
|
import Stroke from 'ol/style/Stroke';
|
||||||
|
|
||||||
import packetLog from '/../IS_packets.txt?raw';
|
import packetLog from '../IS_packets.txt?raw';
|
||||||
const routes = Object.values(import.meta.globEager('./gpx/*.gpx')).map(
|
const routes = Object.values(
|
||||||
(gpx) => gpx.default
|
import.meta.glob('./gpx/*.gpx', { eager: true, import: 'default' })
|
||||||
);
|
);
|
||||||
|
|
||||||
const parser = new APRSParser();
|
const parser = new APRSParser();
|
||||||
@ -262,55 +273,4 @@ body {
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ol-control.layer-toggles {
|
|
||||||
top: 0.5em;
|
|
||||||
right: 0.5em;
|
|
||||||
background-color: rgba(70, 115, 164, 0.7);
|
|
||||||
color: #eee;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-height: calc(100vh - 1em);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layer-toggles > div {
|
|
||||||
margin: 0.5em;
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ol-control.layer-toggles:hover {
|
|
||||||
background-color: rgba(0, 60, 136, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.layer-toggles > div > label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand + span::before {
|
|
||||||
content: '\25B6';
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand:checked + span::before {
|
|
||||||
content: '\25BC';
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand ~ .collapsible-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand:checked ~ .collapsible-content {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapsible-content {
|
|
||||||
margin-left: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapsible-content > label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,12 +1,7 @@
|
|||||||
import * as Vue from 'vue';
|
import * as Vue from 'vue';
|
||||||
|
|
||||||
// import OpenLayersMap from 'vue3-openlayers';
|
|
||||||
// import 'vue3-openlayers/dist/vue3-openlayers.css';
|
|
||||||
|
|
||||||
import StatusScreen from './StatusScreen.vue';
|
import StatusScreen from './StatusScreen.vue';
|
||||||
// import Map from './Map.vue';
|
|
||||||
|
|
||||||
const app = Vue.createApp(StatusScreen);
|
const app = Vue.createApp(StatusScreen);
|
||||||
// app.use(OpenLayersMap);
|
|
||||||
|
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
11
src/map.js
Normal file
11
src/map.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import * as Vue from 'vue';
|
||||||
|
|
||||||
|
import OpenLayersMap from 'vue3-openlayers';
|
||||||
|
import 'vue3-openlayers/dist/vue3-openlayers.css';
|
||||||
|
|
||||||
|
import Map from './Map.vue';
|
||||||
|
|
||||||
|
const app = Vue.createApp(Map);
|
||||||
|
app.use(OpenLayersMap);
|
||||||
|
|
||||||
|
app.mount('#app');
|
@ -1,3 +1,4 @@
|
|||||||
|
import { resolve } from 'path';
|
||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from 'vite';
|
||||||
import vue from '@vitejs/plugin-vue';
|
import vue from '@vitejs/plugin-vue';
|
||||||
import yaml from '@rollup/plugin-yaml';
|
import yaml from '@rollup/plugin-yaml';
|
||||||
@ -6,4 +7,12 @@ import yaml from '@rollup/plugin-yaml';
|
|||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
assetsInclude: ['**/*.gpx'],
|
assetsInclude: ['**/*.gpx'],
|
||||||
plugins: [vue(), yaml()],
|
plugins: [vue(), yaml()],
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: resolve(__dirname, 'index.html'),
|
||||||
|
map: resolve(__dirname, 'map/index.html'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user