Compare commits
No commits in common. "a12c95dcf8323acb50452d0cf76025115d5a3743" and "21d0c7cca3096167372089d9fe5b500da0a5bd43" have entirely different histories.
a12c95dcf8
...
21d0c7cca3
@ -1,12 +0,0 @@
|
|||||||
<!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,20 +3,19 @@
|
|||||||
"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": "^3.0.0",
|
"distinct-colors": "^1.0.4",
|
||||||
"ol": "^9.2.4",
|
"ol": "^6.15.1",
|
||||||
"parse-duration": "^1.1.0",
|
"parse-duration": "^1.1.0",
|
||||||
"vue": "^3.4.30",
|
"vue": "^3.3.4",
|
||||||
"vue3-openlayers": "^10.0.1"
|
"vue3-openlayers": "^0.1.75"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@modyfi/vite-plugin-yaml": "^1.1.0",
|
"@modyfi/vite-plugin-yaml": "^1.0.4",
|
||||||
"@rollup/plugin-yaml": "^4.1.2",
|
"@rollup/plugin-yaml": "^4.1.1",
|
||||||
"@vitejs/plugin-vue": "^5.0.5",
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
"vite": "^5.3.1"
|
"vite": "^4.4.3"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "pnpm run -r --parallel dev",
|
"start": "pnpm run -r --parallel dev",
|
||||||
|
1616
pnpm-lock.yaml
1616
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.17.1"
|
"ws": "^8.13.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,21 +1,18 @@
|
|||||||
lockfileVersion: '9.0'
|
lockfileVersion: '6.0'
|
||||||
|
|
||||||
settings:
|
settings:
|
||||||
autoInstallPeers: true
|
autoInstallPeers: true
|
||||||
excludeLinksFromLockfile: false
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
importers:
|
dependencies:
|
||||||
|
ws:
|
||||||
.:
|
specifier: ^8.13.0
|
||||||
dependencies:
|
version: 8.13.0
|
||||||
ws:
|
|
||||||
specifier: ^8.17.1
|
|
||||||
version: 8.17.1
|
|
||||||
|
|
||||||
packages:
|
packages:
|
||||||
|
|
||||||
ws@8.17.1:
|
/ws@8.13.0:
|
||||||
resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==}
|
resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
|
||||||
engines: {node: '>=10.0.0'}
|
engines: {node: '>=10.0.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
bufferutil: ^4.0.1
|
bufferutil: ^4.0.1
|
||||||
@ -25,7 +22,4 @@ packages:
|
|||||||
optional: true
|
optional: true
|
||||||
utf-8-validate:
|
utf-8-validate:
|
||||||
optional: true
|
optional: true
|
||||||
|
dev: false
|
||||||
snapshots:
|
|
||||||
|
|
||||||
ws@8.17.1: {}
|
|
||||||
|
154
src/Map.vue
154
src/Map.vue
@ -6,67 +6,58 @@
|
|||||||
>
|
>
|
||||||
<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 title="Base Map">
|
<ol-tile-layer>
|
||||||
<ol-source-osm />
|
<ol-source-osm />
|
||||||
</ol-tile-layer>
|
</ol-tile-layer>
|
||||||
|
|
||||||
<ol-layer-group title="GPX Routes">
|
<ol-vector-layer v-for="gpxURL in routes" :key="gpxURL">
|
||||||
<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
|
:coordinates="packetsToStationPathPoints(packets)"
|
||||||
:coordinates="packetsToStationPathPoints(packets)"
|
>
|
||||||
>
|
</ol-geom-line-string>
|
||||||
</ol-geom-line-string>
|
</ol-feature>
|
||||||
</ol-feature>
|
</ol-source-vector>
|
||||||
</ol-source-vector>
|
<ol-style>
|
||||||
<ol-style>
|
<ol-style-stroke :color="stationColors[idx].hex()" :width="2">
|
||||||
<ol-style-stroke :color="stationColors[idx].hex()" :width="2">
|
</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">
|
<!-- Points -->
|
||||||
<div v-for="(packets, callsign, idx) in stationPaths" :key="callsign">
|
<ol-vector-layer render-mode="image">
|
||||||
<!-- Points -->
|
<ol-source-vector>
|
||||||
<ol-vector-layer render-mode="image" :title="callsign">
|
<ol-feature>
|
||||||
<ol-source-vector>
|
<ol-geom-multi-point
|
||||||
<ol-feature>
|
:coordinates="packetsToStationPathPoints(packets)"
|
||||||
<ol-geom-multi-point
|
>
|
||||||
:coordinates="packetsToStationPathPoints(packets)"
|
</ol-geom-multi-point>
|
||||||
>
|
</ol-feature>
|
||||||
</ol-geom-multi-point>
|
</ol-source-vector>
|
||||||
</ol-feature>
|
<ol-style>
|
||||||
</ol-source-vector>
|
<ol-style-circle :radius="3">
|
||||||
<ol-style>
|
<ol-style-fill :color="stationColors[idx].hex()"> </ol-style-fill>
|
||||||
<ol-style-circle :radius="3">
|
</ol-style-circle>
|
||||||
<ol-style-fill :color="stationColors[idx].hex()">
|
</ol-style>
|
||||||
</ol-style-fill>
|
</ol-vector-layer>
|
||||||
</ol-style-circle>
|
</div>
|
||||||
</ol-style>
|
|
||||||
</ol-vector-layer>
|
|
||||||
</div>
|
|
||||||
</ol-layer-group>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Digipeater locations -->
|
<!-- Digipeater locations -->
|
||||||
<ol-vector-layer title="Digipeater Locations">
|
<ol-vector-layer>
|
||||||
<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>
|
||||||
@ -82,13 +73,11 @@
|
|||||||
</ol-vector-layer>
|
</ol-vector-layer>
|
||||||
|
|
||||||
<!-- Packet Paths -->
|
<!-- Packet Paths -->
|
||||||
<ol-vector-layer title="Packet Paths" :visible="false">
|
<ol-vector-layer>
|
||||||
<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>
|
||||||
|
|
||||||
@ -105,9 +94,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(
|
const routes = Object.values(import.meta.globEager('./gpx/*.gpx')).map(
|
||||||
import.meta.glob('./gpx/*.gpx', { eager: true, import: 'default' })
|
(gpx) => gpx.default
|
||||||
);
|
);
|
||||||
|
|
||||||
const parser = new APRSParser();
|
const parser = new APRSParser();
|
||||||
@ -273,4 +262,55 @@ 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,7 +1,12 @@
|
|||||||
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
11
src/map.js
@ -1,11 +0,0 @@
|
|||||||
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,4 +1,3 @@
|
|||||||
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';
|
||||||
@ -7,12 +6,4 @@ 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