Add layer controls to map

Serve map app at /map/, instead of manually enabling
Bump dependencies
2024-06-26 13:18:19 -04:00 · 2024-06-26 13:18:11 -04:00 · 2024-06-26 13:17:57 -04:00
9 changed files with 1067 additions and 785 deletions
--- a/map/index.html
+++ b/map/index.html
@ -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>
--- a/package.json
+++ b/package.json
@ -3,19 +3,20 @@
  "version": "1.0.0",
  "description": "",
  "private": true,
+  "type": "module",
  "dependencies": {
    "aprs-parser": "github:ad1217/npm-aprs-parser#no-dynamic-require",
-    "distinct-colors": "^1.0.4",
-    "ol": "^6.15.1",
+    "distinct-colors": "^3.0.0",
+    "ol": "^9.2.4",
    "parse-duration": "^1.1.0",
-    "vue": "^3.3.4",
-    "vue3-openlayers": "^0.1.75"
+    "vue": "^3.4.30",
+    "vue3-openlayers": "^10.0.1"
  },
  "devDependencies": {
-    "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@rollup/plugin-yaml": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.4.3"
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
+    "@rollup/plugin-yaml": "^4.1.2",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "vite": "^5.3.1"
  },
  "scripts": {
    "start": "pnpm run -r --parallel dev",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/server/package.json
+++ b/server/package.json
@ -4,6 +4,6 @@
    "dev": "node ./src/server.js"
  },
  "dependencies": {
-    "ws": "^8.13.0"
+    "ws": "^8.17.1"
  }
 }
--- a/server/pnpm-lock.yaml
+++ b/server/pnpm-lock.yaml
@ -1,18 +1,21 @@
-lockfileVersion: '6.0'
+lockfileVersion: '9.0'

 settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false

+importers:
+
+  .:
    dependencies:
      ws:
-    specifier: ^8.13.0
-    version: 8.13.0
+        specifier: ^8.17.1
+        version: 8.17.1

 packages:

-  /ws@8.13.0:
-    resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
+  ws@8.17.1:
+    resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==}
    engines: {node: '>=10.0.0'}
    peerDependencies:
      bufferutil: ^4.0.1
@ -22,4 +25,7 @@ packages:
        optional: true
      utf-8-validate:
        optional: true
-    dev: false
+
+snapshots:
+
+  ws@8.17.1: {}
--- a/src/Map.vue
+++ b/src/Map.vue
@ -6,23 +6,26 @@
  >
    <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-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-style>
          <ol-style-stroke color="hsl(200, 90%, 30%)" :width="5">
          </ol-style-stroke>
        </ol-style>
      </ol-vector-layer>
+    </ol-layer-group>

    <!-- Station Paths -->
    <div>
+      <ol-layer-group title="Paths">
        <div v-for="(packets, callsign, idx) in stationPaths" :key="callsign">
          <!--Paths -->
-        <ol-vector-layer render-mode="image">
+          <ol-vector-layer render-mode="image" :title="callsign">
            <ol-source-vector>
              <ol-feature>
                <ol-geom-line-string
@ -36,9 +39,13 @@
              </ol-style-stroke>
            </ol-style>
          </ol-vector-layer>
+        </div>
+      </ol-layer-group>

+      <ol-layer-group title="Points">
+        <div v-for="(packets, callsign, idx) in stationPaths" :key="callsign">
          <!-- Points -->
-        <ol-vector-layer render-mode="image">
+          <ol-vector-layer render-mode="image" :title="callsign">
            <ol-source-vector>
              <ol-feature>
                <ol-geom-multi-point
@ -49,15 +56,17 @@
            </ol-source-vector>
            <ol-style>
              <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>
          </ol-vector-layer>
        </div>
+      </ol-layer-group>
    </div>

    <!-- Digipeater locations -->
-    <ol-vector-layer>
+    <ol-vector-layer title="Digipeater Locations">
      <ol-source-vector>
        <ol-feature v-for="(position, callsign) in digiPos" :key="callsign">
          <ol-geom-point :coordinates="position"> </ol-geom-point>
@ -73,11 +82,13 @@
    </ol-vector-layer>

    <!-- Packet Paths -->
-    <ol-vector-layer>
+    <ol-vector-layer title="Packet Paths" :visible="false">
      <ol-source-vector :features="packetPaths"> </ol-source-vector>
      <!-- TODO: fix style -->
      <!-- <ol-style :overrideStyleFunction="packetPathStyleFunc"> </ol-style> -->
    </ol-vector-layer>
+
+    <ol-layerswitcher-control />
  </ol-map>
 </template>

@ -94,9 +105,9 @@ import LineString from 'ol/geom/LineString';
 import Style from 'ol/style/Style';
 import Stroke from 'ol/style/Stroke';

-import packetLog from '/../IS_packets.txt?raw';
-const routes = Object.values(import.meta.globEager('./gpx/*.gpx')).map(
-  (gpx) => gpx.default
+import packetLog from '../IS_packets.txt?raw';
+const routes = Object.values(
+  import.meta.glob('./gpx/*.gpx', { eager: true, import: 'default' })
 );

 const parser = new APRSParser();
@ -262,55 +273,4 @@ body {
  width: 100vw;
  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>
--- a/src/index.js
+++ b/src/index.js
@ -1,12 +1,7 @@
 import * as Vue from 'vue';

-// import OpenLayersMap from 'vue3-openlayers';
-// import 'vue3-openlayers/dist/vue3-openlayers.css';
-
 import StatusScreen from './StatusScreen.vue';
-// import Map from './Map.vue';

 const app = Vue.createApp(StatusScreen);
-// app.use(OpenLayersMap);

 app.mount('#app');
--- a/src/map.js
+++ b/src/map.js
@ -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');
--- a/vite.config.js
+++ b/vite.config.js
@ -1,3 +1,4 @@
+import { resolve } from 'path';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import yaml from '@rollup/plugin-yaml';
@ -6,4 +7,12 @@ import yaml from '@rollup/plugin-yaml';
 export default defineConfig({
  assetsInclude: ['**/*.gpx'],
  plugins: [vue(), yaml()],
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        map: resolve(__dirname, 'map/index.html'),
+      },
+    },
+  },
 });
Author	SHA1	Message	Date
Adam Goldsmith	a12c95dcf8	Add layer controls to map	2024-06-26 13:18:19 -04:00
Adam Goldsmith	e9c2cd9e95	Serve map app at `/map/`, instead of manually enabling	2024-06-26 13:18:11 -04:00
Adam Goldsmith	1571086844	Bump dependencies	2024-06-26 13:17:57 -04:00