Skip to content

Commit

Permalink
CoT Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ingalls
ingalls committed Feb 15, 2024
1 parent 16c8c40 commit 9696465
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 60 deletions.
68 changes: 33 additions & 35 deletions api/web/src/components/CloudTAK/CoTView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,45 @@
class='position-absolute end-0 bottom-0 text-white py-2 bg-dark'
style='z-index: 1; width: 400px; top: 56px;'
>
<div class='row g-2'>
<div class='col-12 row border-light border-bottom'>
<div class='col-auto row card-header mx-1 my-2'>
<div class='card-title mx-2' v-text='cot.properties.callsign'></div>
<div class='subheader mx-2'>
<span class='subheader' v-text='cot.properties.type'/>
<span class='subheader ms-auto' v-text='" (" + cot.properties.how || "Unknown" + ")"'/>
</div>
<div class='col-12 border-light border-bottom d-flex'>
<div class='col-auto card-header row mx-1 my-2'>
<div class='card-title mx-2' v-text='cot.properties.callsign'></div>
<div class='subheader mx-2'>
<span class='subheader' v-text='cot.properties.type'/>
<span class='subheader ms-auto' v-text='" (" + cot.properties.how || "Unknown" + ")"'/>
</div>
<div class='col-auto btn-list my-2 ms-auto d-flex align-items-center'>
<IconZoomPan @click='zoomTo' class='cursor-pointer' v-tooltip='"Zoom To"'/>
</div>
<div class='col-auto btn-list my-2 mx-3 ms-auto d-flex align-items-center'>
<IconZoomPan @click='zoomTo' class='cursor-pointer' v-tooltip='"Zoom To"'/>

<IconCode v-if='mode === "default"' @click='mode = "raw"' class='cursor-pointer' v-tooltip='"Raw View"'/>
<IconX v-if='mode === "raw"' @click='mode = "default"' class='cursor-pointer' v-tooltip='"Default View"'/>
</div>
<IconCode v-if='mode === "default"' @click='mode = "raw"' class='cursor-pointer' v-tooltip='"Raw View"'/>
<IconX v-if='mode === "raw"' @click='mode = "default"' class='cursor-pointer' v-tooltip='"Default View"'/>
</div>
</div>

<template v-if='mode === "default"'>
<div v-if='!isNaN(cot.properties.speed)' class='col-12 px-3'>
<Coordinate :coordinates='center'/>
</div>
<div v-if='!isNaN(cot.properties.speed)' class='col-12 px-3'>
<Speed :speed='cot.properties.speed'/>
</div>
<div v-if='!isNaN(cot.properties.course)' class='col-12 px-3'>
<label class='subheader'>Course</label>
<div v-text='cot.properties.course' class='bg-gray-500 rounded mx-2 py-2 px-2'/>
</div>
<div class='col-12 px-3'>
<label class='subheader'>Remarks</label>
<div v-text='cot.properties.remarks || "None"' class='bg-gray-500 rounded mx-2 py-2 px-2'/>
</div>
<template v-if='mode === "default"'>
<div v-if='!isNaN(cot.properties.speed)' class='col-12 px-3'>
<Coordinate :coordinates='center'/>
</div>
<div v-if='!isNaN(cot.properties.speed)' class='col-12 px-3'>
<Speed :speed='cot.properties.speed'/>
</div>
<div v-if='!isNaN(cot.properties.course)' class='col-12 px-3'>
<label class='subheader'>Course</label>
<div v-text='cot.properties.course' class='bg-gray-500 rounded mx-2 py-2 px-2'/>
</div>
<div class='col-12 px-3'>
<label class='subheader'>Remarks</label>
<div v-text='cot.properties.remarks || "None"' class='bg-gray-500 rounded mx-2 py-2 px-2'/>
</div>

<template v-if='isUserDrawn'>
<CoTStyle v-model='feat'/>
</template>
</template>
<template v-else-if='mode === "raw"'>
<pre v-text='cot'/>
<template v-if='isUserDrawn'>
<CoTStyle v-model='feat'/>
</template>
</div>
</template>
<template v-else-if='mode === "raw"'>
<pre v-text='cot'/>
</template>
</div>
</template>

Expand Down
20 changes: 10 additions & 10 deletions api/web/src/components/CloudTAK/FeatView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@
class='position-absolute end-0 bottom-0 text-white py-2 bg-dark'
style='z-index: 1; width: 400px; top: 56px;'
>
<div class='row g-2'>
<div class='col-12 row border-light border-bottom'>
<div class='col-auto row card-header my-2'>
<div class='card-title mx-2' v-text='feat.properties.name'></div>
</div>
<div class='col-auto btn-list my-2 ms-auto d-flex align-items-center mx-2'>
<IconZoomPan @click='zoomTo' class='cursor-pointer' v-tooltip='"Zoom To"'/>
<div class='col-12 border-light border-bottom d-flex'>
<div class='col-auto card-header row mx-1 my-2'>
<div class='card-title mx-2' v-text='feat.properties.name'></div>
</div>
<div class='col-auto btn-list my-2 ms-auto d-flex align-items-center mx-2'>
<IconZoomPan @click='zoomTo' class='cursor-pointer' v-tooltip='"Zoom To"'/>

<IconCode v-if='mode === "default"' @click='mode = "raw"' class='cursor-pointer' v-tooltip='"Raw View"'/>
<IconX v-if='mode === "raw"' @click='mode = "default"' class='cursor-pointer' v-tooltip='"Default View"'/>
</div>
<IconCode v-if='mode === "default"' @click='mode = "raw"' class='cursor-pointer' v-tooltip='"Raw View"'/>
<IconX v-if='mode === "raw"' @click='mode = "default"' class='cursor-pointer' v-tooltip='"Default View"'/>
</div>
</div>

<div class='col-12'>
<template v-if='mode === "default"'>
<Coordinate :coordinates='center'/>
</template>
Expand Down
50 changes: 35 additions & 15 deletions api/web/src/stores/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export const useMapStore = defineStore('cloudtak', {
}
}
},
removeLayerBySource: function(source) {
removeLayerBySource: async function(source) {
const pos = this.getLayerPos(source, 'source');
if (pos === false) return
const layer = this.layers[pos];
Expand All @@ -119,7 +119,7 @@ export const useMapStore = defineStore('cloudtak', {
this.map.removeLayer(l.id);
}

this.map.removeSource(source);
await this.map.removeSource(source);

this.layers.splice(pos, 1)
},
Expand Down Expand Up @@ -245,6 +245,7 @@ export const useMapStore = defineStore('cloudtak', {
{ id: `${layer.id}-poly`, type: 'feat' },
{ id: `${layer.id}-polyline`, type: 'feat' },
{ id: `${layer.id}-line`, type: 'feat' },
{ id: `${layer.id}-icon`, type: 'feat' },
{ id: layer.id, type: 'feat' }
]
}, cotStyles(layer.id, {
Expand Down Expand Up @@ -301,9 +302,11 @@ export const useMapStore = defineStore('cloudtak', {
{ id: 'cots', type: 'cot' },
{ id: 'cots-poly', type: 'cot' },
{ id: 'cots-group', type: 'cot' },
{ id: `cots-icon`, type: 'cot' },
{ id: 'cots-line', type: 'cot' }
]
}, cotStyles('cots', {
group: true,
icons: true,
labels: true
}));
Expand Down Expand Up @@ -372,6 +375,7 @@ export const useMapStore = defineStore('cloudtak', {

function cotStyles(id, opts = {
sourceLayer: undefined,
group: false,
labels: false,
icons: false
}) {
Expand Down Expand Up @@ -413,11 +417,21 @@ function cotStyles(id, opts = {
'line-width': ["*", 2, ["number", ["get", "stroke-width"], 3]],
'line-opacity': ["number", ["get", "stroke-opacity"], 1]
}
},{
id: id,
type: 'circle',
source: id,
filter: ["==", "$type", "Point"],
paint: {
'circle-color': ["string", ["get", "circle-color"], "#00FF00"],
'circle-radius': ["number", ["get", "circle-radius"], 4],
'circle-opacity': ["number", ["get", "circle-opacity"], 1]
}
}]

if (opts.icons) {
styles.push({
id: id,
id: `${id}-icon`,
type: 'symbol',
source: id,
filter: [ 'all', ['==', '$type', 'Point'] ],
Expand All @@ -434,18 +448,6 @@ function cotStyles(id, opts = {
'icon-anchor': 'center',
}
})
} else {
styles.push({
id: id,
type: 'circle',
source: id,
filter: ["==", "$type", "Point"],
paint: {
'circle-color': ["string", ["get", "circle-color"], "#00FF00"],
'circle-radius': ["number", ["get", "circle-radius"], 4],
'circle-opacity': ["number", ["get", "circle-opacity"], 1]
}
});
}

if (opts.labels) {
Expand All @@ -466,6 +468,24 @@ function cotStyles(id, opts = {
});
}

if (opts.group) {
styles.push({
id: 'cots-group',
type: 'circle',
source: 'cots',
filter: [ 'all',
['==', '$type', 'Point'],
['has', 'color']
],
paint: {
'circle-color': ['get', 'color'],
'circle-stroke-color': '#ffffff',
'circle-stroke-width': 2,
'circle-radius': 10
},
})
}

return styles.map((s) => {
if (opts.sourceLayer) s['source-layer'] = opts.sourceLayer;
return s;
Expand Down

0 comments on commit 9696465

Please sign in to comment.