Skip to content

Commit 483c566

Browse files
BryonLewisBryonLewis
authored
Merge pull request #23 from OpenGeoscience/legend-updates
Legend updates
2 parents bf7256b + d7405c8 commit 483c566

17 files changed

Lines changed: 819 additions & 110 deletions

‎client/src/components/Coloring/ColorSelector.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,17 @@ export default defineComponent({
126126
&& layer.default_style.layers[props.layerType] !== true
127127
) {
128128
(layer.default_style.layers[props.layerType] as VectorLayerDisplayConfig).color = '#888888';
129+
(layer.default_style.layers[props.layerType] as VectorLayerDisplayConfig).legend = false;
130+
}
131+
}
132+
} else {
133+
const { layer } = getVectorLayerDisplayConfig(props.layerId, props.layerType);
134+
if (layer?.default_style?.layers && layer.default_style.layers[props.layerType]) {
135+
if (
136+
layer.default_style.layers[props.layerType] !== false
137+
&& layer.default_style.layers[props.layerType] !== true
138+
) {
139+
(layer.default_style.layers[props.layerType] as VectorLayerDisplayConfig).legend = true;
129140
}
130141
}
131142
}

‎client/src/components/DataSelection/Datasets.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,6 @@ export default defineComponent({
107107
return {
108108
datasets: filteredDatasets,
109109
layersByDataset: MapStore.mapLayersByDataset,
110-
selectedLayers: MapStore.selectedMapLayers,
111110
toggleLayerSelection,
112111
loadDataset,
113112
updateNetCDFLayer,

‎client/src/components/DataSelection/NetCDFDataConfigurator.vue‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,9 @@ export default defineComponent({
9191
const data = getVariableInformation(variable);
9292
if (data) {
9393
if (data.geospatial === 'longitude360') {
94+
if (data.attributes.units === 'degrees_east') {
95+
return [-1 * convert360Longitude(data.max), -1 * convert360Longitude(data.min)];
96+
}
9497
return [convert360Longitude(data.min), convert360Longitude(data.max)];
9598
}
9699
return [data.min, data.max];
@@ -106,7 +109,11 @@ export default defineComponent({
106109
const dataX = getVariableInformation(newLayerX.value);
107110
let xRange = [dataX.min, dataX.max];
108111
if (dataX.geospatial === 'longitude360') {
109-
xRange = [convert360Longitude(dataX.min), convert360Longitude(dataX.max)];
112+
if (dataX.attributes.units === 'degrees_east') {
113+
xRange = [-1 * convert360Longitude(dataX.max), -1 * convert360Longitude(dataX.min)];
114+
} else {
115+
xRange = [convert360Longitude(dataX.min), convert360Longitude(dataX.max)];
116+
}
110117
}
111118
const dataY = getVariableInformation(newLayerY.value);
112119
const yRange = [dataY.min, dataY.max];
@@ -142,7 +149,11 @@ export default defineComponent({
142149
const dataX = getVariableInformation(newLayerX.value);
143150
let xRange = [dataX.min, dataX.max];
144151
if (dataX.geospatial === 'longitude360') {
145-
xRange = [convert360Longitude(dataX.min), convert360Longitude(dataX.max)];
152+
if (dataX.attributes.units === 'degrees_east') {
153+
xRange = [-1 * convert360Longitude(dataX.max), -1 * convert360Longitude(dataX.min)];
154+
} else {
155+
xRange = [convert360Longitude(dataX.min), convert360Longitude(dataX.max)];
156+
}
146157
}
147158
const dataY = getVariableInformation(newLayerY.value);
148159
@@ -168,7 +179,11 @@ export default defineComponent({
168179
xLayerRange.value = [data.min, data.max];
169180
xLayerRangeStep.value = (data.max - data.min) / (data.steps || 1);
170181
if (data.geospatial === 'longitude360') {
171-
xLayerRange.value = [convert360Longitude(data.min), convert360Longitude(data.max)];
182+
if (data.attributes.units === 'degrees_east') {
183+
xLayerRange.value = [-1 * convert360Longitude(data.max), -1 * convert360Longitude(data.min)];
184+
} else {
185+
xLayerRange.value = [convert360Longitude(data.min), convert360Longitude(data.max)];
186+
}
172187
xLayerRangeStep.value = (xLayerRange.value[1] - xLayerRange.value[0]) / (data.steps || 1);
173188
}
174189
});

‎client/src/components/LayerTypeConfig.vue‎

Lines changed: 125 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,12 @@ export default defineComponent({
5454
return enabled;
5555
});
5656
57-
type LayerActionItems = 'enabled' | 'selectable' | 'hoverable' | 'opacity' | 'zoomMinMax' | 'selectColor' | 'defaultSize' | 'color' | 'text' | 'heatmapControls';
57+
type LayerActionItems = 'enabled' | 'selectable' | 'hoverable' | 'opacity' | 'zoomMinMax' | 'selectColor' | 'defaultSize' | 'legend' | 'color' | 'text' | 'heatmapControls';
5858
const layerActionItemsMap: Record<LayerActionItems, AnnotationTypes[]> = {
5959
enabled: ['line', 'fill', 'circle', 'fill-extrusion', 'text', 'heatmap'],
6060
selectable: ['line', 'fill', 'circle', 'fill-extrusion'],
6161
hoverable: ['line', 'fill', 'circle', 'fill-extrusion'],
62+
legend: ['line', 'fill', 'circle', 'fill-extrusion', 'heatmap'],
6263
opacity: ['line', 'fill', 'circle', 'fill-extrusion', 'text', 'heatmap'],
6364
zoomMinMax: ['line', 'fill', 'circle', 'fill-extrusion', 'text', 'heatmap'],
6465
selectColor: ['line', 'fill', 'circle', 'fill-extrusion'],
@@ -70,7 +71,7 @@ export default defineComponent({
7071
7172
const actionItemVisible = computed(() => {
7273
const enabledItems = new Set<LayerActionItems>();
73-
const itemList: LayerActionItems[] = ['enabled', 'selectable', 'hoverable', 'opacity', 'zoomMinMax', 'selectColor', 'defaultSize', 'color', 'text', 'heatmapControls'];
74+
const itemList: LayerActionItems[] = ['enabled', 'selectable', 'hoverable', 'legend', 'opacity', 'zoomMinMax', 'selectColor', 'defaultSize', 'color', 'text', 'heatmapControls'];
7475
itemList.forEach((key) => {
7576
if (layerActionItemsMap[key].includes(props.layerType)) {
7677
enabledItems.add(key);
@@ -98,6 +99,9 @@ export default defineComponent({
9899
if (field === 'hoverable') {
99100
displayConfig.hoverable = val;
100101
}
102+
if (field === 'legend') {
103+
displayConfig.legend = val;
104+
}
101105
if (field === 'opacity') {
102106
if (val) {
103107
displayConfig.opacity = 0.75;
@@ -232,13 +236,48 @@ export default defineComponent({
232236
const foundColorIndex = found.default_style.savedColors.findIndex((item) => item.name === name);
233237
if (foundColorIndex !== -1) {
234238
currentLayerType.value.color = found.default_style.savedColors[foundColorIndex].color;
239+
if (typeof (currentLayerType.value.color) !== 'string' && currentLayerType.value.color?.type) {
240+
updateLayerTypeField('legend', true);
241+
} else {
242+
updateLayerTypeField('legend', true);
243+
}
235244
updateLayer(found);
236245
}
237246
colorSaveChooser.value = false;
238247
colorDisplayDialog.value = true;
239248
}
240249
}
241250
};
251+
252+
// Static color setting:
253+
const getLayerConfigColor = () => {
254+
const found = MapStore.selectedVectorMapLayers.value.find((item: VectorMapLayer) => item.id === props.layerId);
255+
if (found?.default_style?.layers) {
256+
const layerTypeVal = found?.default_style?.layers[props.layerType];
257+
if (layerTypeVal !== false && layerTypeVal !== true) {
258+
if (layerTypeVal.color === undefined) {
259+
layerTypeVal.color = '#00FF00';
260+
}
261+
return layerTypeVal.color;
262+
}
263+
}
264+
return '#00FF00';
265+
};
266+
const baseColorConfig = computed(() => getLayerConfigColor());
267+
268+
const updateStaticColor = (color: string) => {
269+
const { layer } = getVectorLayerDisplayConfig(props.layerId, props.layerType);
270+
if (layer?.default_style?.layers && layer.default_style.layers[props.layerType]) {
271+
if (
272+
layer.default_style.layers[props.layerType] !== false
273+
&& layer.default_style.layers[props.layerType] !== true
274+
) {
275+
(layer.default_style.layers[props.layerType] as VectorLayerDisplayConfig).color = color;
276+
updateLayer(layer);
277+
}
278+
}
279+
};
280+
242281
return {
243282
currentLayerType,
244283
colorPickerVisible,
@@ -259,6 +298,8 @@ export default defineComponent({
259298
updateOpacity,
260299
updateZoom,
261300
actionItemVisible,
301+
baseColorConfig,
302+
updateStaticColor,
262303
};
263304
},
264305
});
@@ -294,6 +335,43 @@ export default defineComponent({
294335
<span class="pl-2">Enabled</span>
295336
</v-col>
296337
</v-row>
338+
<v-row
339+
v-if="actionItemVisible.has('opacity')"
340+
dense
341+
align="center"
342+
justify="center"
343+
>
344+
<v-col cols="2">
345+
<v-tooltip text="Opacity">
346+
<template #activator="{ props }">
347+
<v-icon
348+
class="pl-3"
349+
v-bind="props"
350+
>
351+
mdi-square-opacity
352+
</v-icon>
353+
</template>
354+
</v-tooltip>
355+
</v-col>
356+
<v-col :cols="!valueDisplayCheckbox('opacity') ? '' : 3">
357+
<v-icon @click="updateLayerTypeField('opacity', !valueDisplayCheckbox('opacity'))">
358+
{{
359+
valueDisplayCheckbox('opacity') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
360+
</v-icon>
361+
<span v-if="!valueDisplayCheckbox('opacity')" class="pl-2">Opacity</span>
362+
<span v-else class="pl-2" style="font-size:0.85em">{{ currentLayerType.opacity.toFixed(2) }}</span>
363+
</v-col>
364+
<v-col v-if="valueDisplayCheckbox('opacity') && currentLayerType && currentLayerType.opacity !== undefined">
365+
<v-slider
366+
density="compact"
367+
class="opacity-slider"
368+
min="0"
369+
max="1.0"
370+
:model-value="currentLayerType.opacity"
371+
@update:model-value="updateOpacity($event)"
372+
/>
373+
</v-col>
374+
</v-row>
297375
<v-row
298376
v-if="actionItemVisible.has('selectable')"
299377
dense
@@ -345,7 +423,7 @@ export default defineComponent({
345423
</template>
346424
</v-tooltip>
347425
</v-col>
348-
<v-col cols="8">
426+
<v-col>
349427
<v-icon @click="updateLayerTypeField('selectColor', !valueDisplayCheckbox('selectColor'))">
350428
{{
351429
valueDisplayCheckbox('selectColor') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
@@ -401,79 +479,68 @@ export default defineComponent({
401479
</v-col>
402480
</v-row>
403481
<v-row
404-
v-if="actionItemVisible.has('opacity')"
482+
v-if="actionItemVisible.has('zoomMinMax')"
405483
dense
406484
align="center"
407485
justify="center"
408486
>
409487
<v-col cols="2">
410-
<v-tooltip text="Opacity">
488+
<v-tooltip text="Zoom Min and Zoom max for displaying Feature Type">
411489
<template #activator="{ props }">
412490
<v-icon
413491
class="pl-3"
414492
v-bind="props"
415493
>
416-
mdi-square-opacity
494+
mdi-magnify
417495
</v-icon>
418496
</template>
419497
</v-tooltip>
420498
</v-col>
421-
<v-col :cols="!valueDisplayCheckbox('opacity') ? '' : 3">
422-
<v-icon @click="updateLayerTypeField('opacity', !valueDisplayCheckbox('opacity'))">
499+
<v-col>
500+
<v-icon @click="updateLayerTypeField('zoom', !valueDisplayCheckbox('zoom'))">
423501
{{
424-
valueDisplayCheckbox('opacity') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
502+
valueDisplayCheckbox('zoom') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
425503
</v-icon>
426-
<span v-if="!valueDisplayCheckbox('opacity')" class="pl-2">Opacity</span>
427-
<span v-else class="pl-2" style="font-size:0.85em">{{ currentLayerType.opacity.toFixed(2) }}</span>
504+
<span class="pl-2">Zoom Min/Max</span>
428505
</v-col>
429-
<v-col v-if="valueDisplayCheckbox('opacity') && currentLayerType && currentLayerType.opacity !== undefined">
430-
<v-slider
506+
<v-col v-if="valueDisplayCheckbox('zoom') && currentLayerType && currentLayerType.zoom !== undefined">
507+
<v-range-slider
431508
density="compact"
432-
class="opacity-slider"
509+
step="1"
510+
height="1"
511+
thumb-size="5"
512+
thumb-label="always"
433513
min="0"
434-
max="1.0"
435-
:model-value="currentLayerType.opacity"
436-
@update:model-value="updateOpacity($event)"
514+
max="24"
515+
:model-value="[currentLayerType.zoom.min || 0, currentLayerType.zoom.max || 24]"
516+
@update:model-value="updateZoom($event)"
437517
/>
438518
</v-col>
439519
</v-row>
440520
<v-row
441-
v-if="actionItemVisible.has('zoomMinMax')"
521+
v-if="actionItemVisible.has('legend')"
442522
dense
443523
align="center"
444524
justify="center"
445525
>
446526
<v-col cols="2">
447-
<v-tooltip text="Zoom Min and Zoom max for displaying Feature Type">
527+
<v-tooltip text="Display Legend">
448528
<template #activator="{ props }">
449529
<v-icon
450530
class="pl-3"
451531
v-bind="props"
452532
>
453-
mdi-magnify
533+
mdi-map-legend
454534
</v-icon>
455535
</template>
456536
</v-tooltip>
457537
</v-col>
458538
<v-col>
459-
<v-icon @click="updateLayerTypeField('zoom', !valueDisplayCheckbox('zoom'))">
539+
<v-icon @click="updateLayerTypeField('legend', !valueDisplayCheckbox('legend'))">
460540
{{
461-
valueDisplayCheckbox('zoom') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
541+
valueDisplayCheckbox('legend') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
462542
</v-icon>
463-
<span class="pl-2">Zoom Min/Max</span>
464-
</v-col>
465-
<v-col v-if="valueDisplayCheckbox('zoom') && currentLayerType && currentLayerType.zoom !== undefined">
466-
<v-range-slider
467-
density="compact"
468-
step="1"
469-
height="1"
470-
thumb-size="5"
471-
thumb-label="always"
472-
min="0"
473-
max="24"
474-
:model-value="[currentLayerType.zoom.min || 0, currentLayerType.zoom.max || 24]"
475-
@update:model-value="updateZoom($event)"
476-
/>
543+
<span class="pl-2">Legend</span>
477544
</v-col>
478545
</v-row>
479546
<v-row
@@ -508,7 +575,28 @@ export default defineComponent({
508575
</v-tooltip>
509576
</v-col>
510577
<v-col cols="6">
511-
<span style="font-size: 0.75em"> {{ getColorType() }}</span>
578+
<v-row dense>
579+
<span style="font-size: 0.75em"> {{ getColorType() }}</span>
580+
<span v-if="getColorType() === 'Static Color'" class="ml-2">
581+
<v-menu
582+
:close-on-content-click="false"
583+
offset-y
584+
>
585+
<template #activator="{ props }">
586+
<div
587+
class="color-square"
588+
:style="{ backgroundColor: baseColorConfig }"
589+
v-bind="props"
590+
/>
591+
</template>
592+
<v-color-picker
593+
mode="hex"
594+
:model-value="baseColorConfig"
595+
@update:model-value="updateStaticColor($event)"
596+
/>
597+
</v-menu>
598+
</span>
599+
</v-row>
512600
</v-col>
513601
<v-col>
514602
<v-tooltip text="Edit Color Display">

0 commit comments

Comments
 (0)
⚡