adam/aprsNotifyJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add layer controls to map

Browse Source
This commit is contained in:
Adam Goldsmith 2024-06-26 13:16:19 -04:00
parent e9c2cd9e95
commit a12c95dcf8
1 changed files with 54 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/Map.vue
View File

@ -6,58 +6,67 @@
> >
<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-source-vector :url="gpxURL" :format="new GPX()"> </ol-source-vector> <ol-vector-layer v-for="gpxURL in routes" :key="gpxURL" :title="gpxURL">
<ol-style> <ol-source-vector :url="gpxURL" :format="new GPX()"> </ol-source-vector>
<ol-style-stroke color="hsl(200, 90%, 30%)" :width="5"> <ol-style>
</ol-style-stroke> <ol-style-stroke color="hsl(200, 90%, 30%)" :width="5">
</ol-style> </ol-style-stroke>
</ol-vector-layer> </ol-style>
</ol-vector-layer>
</ol-layer-group>
<!-- Station Paths --> <!-- Station Paths -->
<div> <div>
<div v-for="(packets, callsign, idx) in stationPaths" :key="callsign"> <ol-layer-group title="Paths">
<!--Paths --> <div v-for="(packets, callsign, idx) in stationPaths" :key="callsign">
<ol-vector-layer render-mode="image"> <!--Paths -->
<ol-source-vector> <ol-vector-layer render-mode="image" :title="callsign">
<ol-feature> <ol-source-vector>
<ol-geom-line-string <ol-feature>
:coordinates="packetsToStationPathPoints(packets)" <ol-geom-line-string
> :coordinates="packetsToStationPathPoints(packets)"
</ol-geom-line-string> >
</ol-feature> </ol-geom-line-string>
</ol-source-vector> </ol-feature>
<ol-style> </ol-source-vector>
<ol-style-stroke :color="stationColors[idx].hex()" :width="2"> <ol-style>
</ol-style-stroke> <ol-style-stroke :color="stationColors[idx].hex()" :width="2">
</ol-style> </ol-style-stroke>
</ol-vector-layer> </ol-style>
</ol-vector-layer>
</div>
</ol-layer-group>
<!-- Points --> <ol-layer-group title="Points">
<ol-vector-layer render-mode="image"> <div v-for="(packets, callsign, idx) in stationPaths" :key="callsign">
<ol-source-vector> <!-- Points -->
<ol-feature> <ol-vector-layer render-mode="image" :title="callsign">
<ol-geom-multi-point <ol-source-vector>
:coordinates="packetsToStationPathPoints(packets)" <ol-feature>
> <ol-geom-multi-point
</ol-geom-multi-point> :coordinates="packetsToStationPathPoints(packets)"
</ol-feature> >
</ol-source-vector> </ol-geom-multi-point>
<ol-style> </ol-feature>
<ol-style-circle :radius="3"> </ol-source-vector>
<ol-style-fill :color="stationColors[idx].hex()"> </ol-style-fill> <ol-style>
</ol-style-circle> <ol-style-circle :radius="3">
</ol-style> <ol-style-fill :color="stationColors[idx].hex()">
</ol-vector-layer> </ol-style-fill>
</div> </ol-style-circle>
</ol-style>
</ol-vector-layer>
</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>
@ -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>