Skip to content

Commit 7902bc3

Browse files
spectrachromespectrachrome
committed
feat: add example selection; remove rest of tailwind
1 parent 1150f35 commit 7902bc3

File tree

10 files changed

+209
-80
lines changed

10 files changed

+209
-80
lines changed

‎src/components/toolbar/examples.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
[
2+
{
3+
"name": "Inline GeoJSON",
4+
"uri": "data:,%7B%22type%22%3A%22FeatureCollection%22%2C%22crs%22%3A%7B%22type%22%3A%22name%22%2C%22properties%22%3A%7B%22name%22%3A%22EPSG%3A4326%22%7D%7D%2C%22features%22%3A%5B%7B%22type%22%3A%22Feature%22%2C%22geometry%22%3A%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B4.3401109%2C50.8792741%5D%7D%2C%22properties%22%3A%7B%22rel%22%3A%22item%22%2C%22href%22%3A%22.%2Fshopping_center_activity%2F2020%2FBrussels.json%22%2C%22type%22%3A%22application%2Fgeo%2Bjson%22%2C%22id%22%3A%22BE4%22%2C%22latlng%22%3A%2250.8792741%2C4.3401109%22%2C%22country%22%3A%22BE%22%2C%22city%22%3A%22Brussels%22%2C%22collection_id%22%3A%22shopping_center_activity%22%2C%22geoDBID%22%3A%22E11%22%2C%22themes%22%3A%5B%22economy%22%5D%7D%7D%2C%7B%22type%22%3A%22Feature%22%2C%22geometry%22%3A%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B23.69534%2C37.975333%5D%7D%2C%22properties%22%3A%7B%22rel%22%3A%22item%22%2C%22href%22%3A%22.%2Fshopping_center_activity%2F2020%2FAthens.json%22%2C%22type%22%3A%22application%2Fgeo%2Bjson%22%2C%22id%22%3A%22GR3%22%2C%22latlng%22%3A%2237.975333%2C23.69534%22%2C%22country%22%3A%22GR%22%2C%22city%22%3A%22Athens%22%2C%22collection_id%22%3A%22shopping_center_activity%22%2C%22geoDBID%22%3A%22E11%22%2C%22themes%22%3A%5B%22economy%22%5D%7D%7D%2C%7B%22type%22%3A%22Feature%22%2C%22geometry%22%3A%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B12.573303%2C41.897678%5D%7D%2C%22properties%22%3A%7B%22rel%22%3A%22item%22%2C%22href%22%3A%22.%2Fshopping_center_activity%2F2020%2FRome.json%22%2C%22type%22%3A%22application%2Fgeo%2Bjson%22%2C%22id%22%3A%22IT4%22%2C%22latlng%22%3A%2241.897678%2C12.573303%22%2C%22country%22%3A%22IT%22%2C%22city%22%3A%22Rome%22%2C%22collection_id%22%3A%22shopping_center_activity%22%2C%22geoDBID%22%3A%22E11%22%2C%22themes%22%3A%5B%22economy%22%5D%7D%7D%2C%7B%22type%22%3A%22Feature%22%2C%22geometry%22%3A%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B9.12225%2C45.43371%5D%7D%2C%22properties%22%3A%7B%22rel%22%3A%22item%22%2C%22href%22%3A%22.%2Fshopping_center_activity%2F2020%2FMilan.json%22%2C%22type%22%3A%22application%2Fgeo%2Bjson%22%2C%22id%22%3A%22IT5%22%2C%22latlng%22%3A%2245.43371%2C9.12225%22%2C%22country%22%3A%22IT%22%2C%22city%22%3A%22Milan%22%2C%22collection_id%22%3A%22shopping_center_activity%22%2C%22geoDBID%22%3A%22E11%22%2C%22themes%22%3A%5B%22economy%22%5D%7D%7D%2C%7B%22type%22%3A%22Feature%22%2C%22geometry%22%3A%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B21.0139%2C52.1756%5D%7D%2C%22properties%22%3A%7B%22rel%22%3A%22item%22%2C%22href%22%3A%22.%2Fshopping_center_activity%2F2020%2FWarsaw.json%22%2C%22type%22%3A%22application%2Fgeo%2Bjson%22%2C%22id%22%3A%22PL4%22%2C%22latlng%22%3A%2252.1756%2C21.0139%22%2C%22country%22%3A%22PL%22%2C%22city%22%3A%22Warsaw%22%2C%22collection_id%22%3A%22shopping_center_activity%22%2C%22geoDBID%22%3A%22E11%22%2C%22themes%22%3A%5B%22economy%22%5D%7D%7D%2C%7B%22type%22%3A%22Feature%22%2C%22geometry%22%3A%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B26.084603%2C44.510178%5D%7D%2C%22properties%22%3A%7B%22rel%22%3A%22item%22%2C%22href%22%3A%22.%2Fshopping_center_activity%2F2017%2FBucharest.json%22%2C%22type%22%3A%22application%2Fgeo%2Bjson%22%2C%22id%22%3A%22RO3%22%2C%22latlng%22%3A%2244.510178%2C%2026.084603%22%2C%22country%22%3A%22RO%22%2C%22city%22%3A%22Bucharest%22%2C%22collection_id%22%3A%22shopping_center_activity%22%2C%22geoDBID%22%3A%22E11%22%2C%22themes%22%3A%5B%22economy%22%5D%7D%7D%5D%7D",
5+
"style": {"stroke-color":"red","radius":5,"fill":"red"}
6+
},
7+
{
8+
"name": "Crop Circles COG",
9+
"uri": "https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif",
10+
"style": {"color":["case",[">",["band",1],0],["array",["*",["band",1],0.4],["*",["band",2],1],["*",["band",3],1],1],["color",0,0,0,0]]}
11+
},
12+
{
13+
"name": "Polar Ice FGB",
14+
"uri": "https://obs.eu-nl.otc.t-systems.com/gtif-data-cerulean1/output-polaris/202501200900_SouthEast_RIC-processed.fgb",
15+
"style": {"legend":[{"title":"Total concentration colour code standard","range":["#367a4a","#3e9655","#66bc76","#fcfb01","#e36c09","#bc0106","#fcfb01"],"domain":["RIO > 20",">= 10 RIO < 20",">= 0 RIO < 10",">= -10 RIO < 0",">= -20 RIO < -10","RIO < -20","<= -10 RIO < 0"],"scaleType":"categorical","markType":"circle","boundTo":{"key":"type_of_visualisation","value":"polaris"}},{"title":"WMO Concentration","range":["#8cff9f","#ffff00","#ff7d07","#ff0000"],"domain":["1 - 3","4 - 6","7 - 9","10"],"scaleType":"categorical","markType":"circle","boundTo":{"key":"type_of_visualisation","value":"WMO Concentration"}},{"title":"WMO Stage of Development","range":["#0064ff","#00000000","#ffffff","#ffccff","#ff64ff","#00000000","#9933cc","#ff66ff","#ffff00","#99cc00","#00cc00","#006600","#cc6633","#ff6600","#cc0000","#660000","#ffffff"],"domain":["Ice Free","Brash Ice","No stage of development","New Ice","Nilas Ice Rind (<10 cm)","Young Ice (10 to 30 cm)","Grey Ice","Grey-White Ice","First Year Ice (>30 cm) or Brash Ice","Thin First Year Ice (30 to 70 cm)","Medium First Year Ice (70 to 120 cm)","Thick First Year Ice (>120 cm)","Old Ice","Second-Year Ice","Multi-Year Ice","Glacier Ice (Icebergs)","Unknown/Undetermined"],"scaleType":"categorical","markType":"circle","boundTo":{"key":"type_of_visualisation","value":"WMO Stage of Development"}}],"jsonform":{"type":"object","title":"Data configuration","properties":{"type_of_visualisation":{"title":"Type of Visualisation","type":"string","enum":["polaris","WMO Concentration","WMO Stage of Development","AIRSS Ice Numeral Go/No Go"],"options":{"enum_titles":["POLARIS","WMO Concentration","WMO Stage of Development","AIRSS Ice Numeral Go/No Go"]},"default":"polaris"},"ship_class":{"title":"Ship Class","type":"string","enum":["pc_1","pc_2","pc_3","pc_4","pc_5","pc_6","pc_7","pc_ias","pc_ia","pc_ib","pc_ic","pc_nis"],"options":{"enum_titles":["PC1","PC2","PC3","PC4","PC5","PC6","PC7","PC IA Super","PC IA","PC IB","PC IC","PC NIS"]},"default":"pc_nis"},"type_of_ice":{"title":"Type of Ice (decayed/standard)","type":"string","enum":["standard","decayed"],"default":"standard"},"combined_prop":{"type":"string","template":"{{vis}}_{{ice}}_{{ship}}_rio","options":{"hidden":true},"watch":{"vis":"type_of_visualisation","ice":"type_of_ice","ship":"ship_class"}}}},"variables":{"ship_class":"nis","type_of_ice":"standard","type_of_visualisation":"polaris","combined_prop":"polaris_standard_pc_nis_rio"},"tooltip":[{"id":"wmo_concentration","title":"WMO Concentration"},{"id":"wmo_stage_of_development","title":"Stage of development"},{"id":"{{combined_prop}}","title":"Total concentration ({{ship_class}} ice: {{type_of_ice}})"}],"fill-color":["case",["==",["var","type_of_visualisation"],"WMO Concentration"],["match",["get","wmo_concentration"],"Ice Free",[0,100,255,1],"Open Water (< 1/10 ice)",[150,200,255,1],"Bergy Water",[150,200,255,1],"1/10",[140,255,159,1],"2/10",[140,255,159,1],"3/10",[140,255,159,1],"4/10",[255,255,0,1],"5/10",[255,255,0,1],"6/10",[255,255,0,1],"7/10",[255,125,7,1],"8/10",[255,125,7,1],"9/10",[255,0,0,1],"10/10",[255,0,0,1],"9/10 to 10/10 ice, 9+/10",[255,0,0,1],"Unknown/Undetermined",[255,255,255,1],[255,255,255,1]],["==",["var","type_of_visualisation"],"WMO Stage of Development"],["match",["get","wmo_stage_of_development"],"Ice Free",[0,100,255,1],"Brash Ice",[0,0,0,0],"No stage of development",[255,255,255,1],"New Ice",[255,204,255,1],"Nilas Ice Rind (<10 cm)",[255,100,255,1],"Young Ice (10 to 30 cm)",[0,0,0,0],"Grey Ice",[153,51,204,1],"Grey-White Ice",[255,102,255,1],"First Year Ice (>30 cm) or Brash Ice",[255,255,0,1],"Thin First Year Ice (30 to 70 cm)",[153,204,0,1],"Medium First Year Ice (70 to 120 cm)",[0,204,0,1],"Thick First Year Ice (>120 cm)",[0,102,0,1],"Old Ice",[204,102,51,1],"Second-Year Ice",[255,102,0,1],"Multi-Year Ice",[204,0,0,1],"Glacier Ice (Icebergs)",[102,0,0,1],"Unknown/Undetermined",[255,255,255,1],[0,0,0,0]],["==",["var","type_of_visualisation"],"polaris"],["case",["==",["get","polygon_type"],"Ice Free"],[0,100,255],["==",["get",["var","combined_prop"]],"RIO > 20: Normal Operation"],[54,122,74,1],["==",["get",["var","combined_prop"]],">= 10 RIO < 20: Normal Operation"],[62,150,85,1],["==",["get",["var","combined_prop"]],">= 0 RIO < 10: Normal Operation"],[102,188,118,1],["==",["get",["var","combined_prop"]],">= -10 RIO < 0: Operation subject to special consideration"],[252,251,1,1],["==",["get",["var","combined_prop"]],">= -20 RIO < -10: Operation subject to special consideration"],[227,108,9,1],["==",["get",["var","combined_prop"]],"RIO < -20: Operation subject to special consideration"],[188,1,6,1],["==",["get",["var","combined_prop"]],"<= -10 RIO < 0: Elevated operational risk"],[252,251,1,1],[0,0,0,1]],[0,0,0,0]],"stroke-color":"black","stroke-width":1}
16+
}
17+
]

‎src/components/toolbar/toolbar.css

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
@import "tailwindcss";
1+
@import url("@eox/ui/style.css");
22

33
.style-editor-toolbar {
4-
--toolbar-height: 48px;
4+
--app-padding: 16px;
5+
--toolbar-height: 40px;
56
--toolbar-border-radius: 12px;
67
}
78

9+
.style-editor-toolbar .flex {
10+
display: flex;
11+
}
12+
813
#logo {
914
height: var(--toolbar-height);
1015
width: var(--toolbar-height);
@@ -19,9 +24,9 @@
1924

2025
.style-editor-toolbar {
2126
position: fixed;
22-
top: 20px;
23-
left: 20px;
24-
right: 20px;
27+
top: var(--app-padding);
28+
left: var(--app-padding);
29+
right: var(--app-padding);
2530
height: var(--toolbar-height);
2631
border-radius: var(--toolbar-border-radius);
2732
}
@@ -32,7 +37,7 @@
3237
width: calc(100% - 100px);
3338
background: white;
3439
border: none;
35-
height: 48px;
40+
height: var(--toolbar-height);
3641
color: #333;
3742
border-radius: 12px 0 0 12px;
3843
font-size: 14px;

‎src/components/toolbar/toolbar.js

Lines changed: 83 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,34 @@
1-
import { LitElement, html, css, unsafeCSS } from "lit";
1+
import { LitElement, html, css, unsafeCSS } from "lit"
2+
23
import staticStyle from "./toolbar.css?inline"
4+
import examples from "./examples.json?inline"
5+
6+
import eoxUiStyle from "@eox/ui/style.css?inline"
37

48
export class StyleEditorToolbar extends LitElement {
59
constructor() {
610
super()
711
this._isInitialized = false
12+
this._isFormatDropdownVisible = false
813
}
914

1015
firstUpdated() {
1116
if (!this._isInitialized) {
1217
this._inputValue = this.url
1318
this._isInitialized = true
1419
}
20+
/*
21+
this.renderRoot
22+
.querySelector("#toolbar-format-dropdown")
23+
.addEventListener("blur", (_e) => {
24+
this._isFormatDropdownVisible = false
25+
this.requestUpdate()
26+
})
27+
28+
this.renderRoot
29+
.querySelector("#toolbar-format-dropdown")
30+
.focus()
31+
*/
1532
}
1633

1734
static properties = {
@@ -31,17 +48,43 @@ export class StyleEditorToolbar extends LitElement {
3148
_isInitialized: {
3249
state: true,
3350
},
51+
_isFormatDropdownVisible: {
52+
state: true,
53+
},
54+
_selectedFormat: {
55+
state: true,
56+
},
3457
};
3558

3659
static get styles() {
3760
return [unsafeCSS(staticStyle )];
3861
}
3962

63+
_onSelectExample(evt) {
64+
const foundExample = examples
65+
.find((example) => example.name === evt.target.value)
66+
67+
if (foundExample) {
68+
this._inputValue = foundExample.uri
69+
const event = new CustomEvent('submit', {
70+
detail: {
71+
uri: this._inputValue,
72+
style: foundExample.style,
73+
},
74+
bubbles: true,
75+
composed: true,
76+
});
77+
this.dispatchEvent(event);
78+
}
79+
}
80+
4081
_triggerFileLoad(_e) {
4182
console.log("triggerFileLoad")
4283
console.log(this._inputValue)
4384
const event = new CustomEvent('submit', {
44-
detail: this._inputValue,
85+
detail: {
86+
uri: this._inputValue,
87+
},
4588
bubbles: true,
4689
composed: true,
4790
});
@@ -55,25 +98,58 @@ export class StyleEditorToolbar extends LitElement {
5598

5699
render() {
57100
return html`
101+
<style>
102+
${eoxUiStyle}
103+
104+
.examples-container {
105+
position: absolute;
106+
width: 100vw;
107+
height: 100vh;
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
}
112+
113+
.examples-container > * {
114+
max-width: 1000px;
115+
}
116+
</style>
58117
<div class="style-editor-toolbar">
59118
<div class="flex">
60119
<div id="logo">
61120
<img src="/eodash-style-editor/EOX_Eye.svg" width="32" />
62121
</div>
63122
<input
64-
id="geometry-url-input"
123+
style="font-size: 0.9rem;"
65124
type="text"
66125
value="${this._inputValue}"
67126
@input="${this._onInput}"
68127
placeholder="Paste a link here to load geometry"
69128
/>
70129
71-
<a
72-
class="load-button flex justify-center items-center text-white font-bold"
130+
<button
73131
@click="${this._triggerFileLoad}"
132+
style="
133+
background: #004170 !important;
134+
color: #FFF !important;
135+
font-weight: 700 !important;
136+
margin: 0;
137+
min-width: 54px;
138+
"
139+
class="primary right-round fill"
74140
>
75-
Load
76-
</a>
141+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>import</title><path d="M14,12L10,8V11H2V13H10V16M20,18V6C20,4.89 19.1,4 18,4H6A2,2 0 0,0 4,6V9H6V6H18V18H6V15H4V18A2,2 0 0,0 6,20H18A2,2 0 0,0 20,18Z" /></svg>
142+
<span>Load</span>
143+
</button>
144+
145+
<div class="field suffix border round small" style="width: 270px; margin-top: 0; margin-left: 9px; background: #FFF;">
146+
<select @change="${(e) => this._onSelectExample(e)}" style="font-size: .875rem; cursor: pointer;">
147+
<option>Polar Ice FGB</option>
148+
<option>Crop Circles COG</option>
149+
<option>Inline GeoJSON</option>
150+
</select>
151+
<i>arrow_drop_down</i>
152+
</div>
77153
</div>
78154
</div>
79155
`;

‎src/eodash-style-editor.js

Lines changed: 25 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@ import "color-legend-element"
1313
import "./components/toolbar/toolbar"
1414

1515
import { getGeotiffExtent } from "./helpers/geotiff"
16-
import { getFgbExtent } from "./helpers/fgb"
16+
import { getFgbExtent, buildFgbConfig } from "./helpers/fgb"
1717
import { getGeojsonExtent, buildGeojsonConfig } from "./helpers/geojson"
1818

1919
import "./fonts/IBMPlexMono-Regular.ttf"
20+
import eoxUiStyle from "@eox/ui/style.css?inline"
2021

2122
import componentStyle from "./styles/app.css?inline"
2223

@@ -61,44 +62,6 @@ function parseJsonDataUri(dataUri) {
6162
}
6263
}
6364

64-
/* Create a map config for Flat Geo Buf sources */
65-
function createFgbConfig(url) {
66-
return [
67-
{
68-
"type": "Vector",
69-
"properties": {
70-
"id": "FlatGeoBufLayer",
71-
},
72-
"source": {
73-
"type": "FlatGeoBuf",
74-
"url": url,
75-
},
76-
"interactions":[
77-
{
78-
"type":"select",
79-
"options":{
80-
"id":"selectInteraction",
81-
"condition":"pointermove",
82-
"style":{
83-
"stroke-color":"white",
84-
"stroke-width":3
85-
}
86-
}
87-
}
88-
]
89-
},
90-
{
91-
"type": "Tile",
92-
"properties": {
93-
"id": "customId"
94-
},
95-
"source": {
96-
"type": "OSM"
97-
}
98-
}
99-
];
100-
}
101-
10265
/* Create a map config for Flat Geo Buf sources */
10366
function createGeoTiffConfig(url) {
10467
return [
@@ -215,7 +178,7 @@ export class EodashStyleEditor extends LitElement {
215178
[">", ["band", 1], 0],
216179
[
217180
"array",
218-
["*", ["band", 1], 1],
181+
["*", ["band", 1], 0.4],
219182
["*", ["band", 2], 1],
220183
["*", ["band", 3], 1],
221184
1
@@ -302,7 +265,7 @@ export class EodashStyleEditor extends LitElement {
302265
switch (inputFormat) {
303266
case "fgb":
304267
this._mapZoomExtent = await getFgbExtent(this._url)
305-
layers = createFgbConfig(this._url, this._style)
268+
layers = buildFgbConfig(this._url, this._style)
306269
break
307270
case "geojson":
308271
// "Fetch" data URI
@@ -328,10 +291,11 @@ export class EodashStyleEditor extends LitElement {
328291
if (layer.type == "WebGLTile") {
329292
layer.style = this._style
330293
} else if (layer.type == "Vector") {
294+
console.log(this._style)
331295
layer.properties.layerConfig = {
332-
schema: this._style.jsonform,
296+
schema: this._style.jsonform ? this._style.jsonform : undefined,
333297
style: this._style,
334-
legend: this._style.legend,
298+
legend: this._style.legend ? this._style.legend : undefined,
335299
}
336300
}
337301

@@ -447,7 +411,7 @@ export class EodashStyleEditor extends LitElement {
447411
get layerControl() {
448412
return html`
449413
<div id="layercontrol" class="card scroll" style="max-width: 300px">
450-
<div style="width: 300px; height: 300px;">
414+
<div style="width: 300px; height: 400px;">
451415
<eox-layercontrol
452416
idProperty='id'
453417
titleProperty='title'
@@ -464,6 +428,7 @@ export class EodashStyleEditor extends LitElement {
464428
render() {
465429
return html`
466430
<style>
431+
${eoxUiStyle}
467432
${componentStyle}
468433
</style>
469434
<div class="eodash-style-editor">
@@ -490,18 +455,30 @@ export class EodashStyleEditor extends LitElement {
490455
}
491456
492457
<style-editor-toolbar
458+
style="z-index: 3000"
493459
url="${this._url}"
494460
@submit="${(event) => {
495-
this._url = event.detail
461+
this._url = event.detail.uri
462+
this._style = event.detail.style
496463
this._buildMapLayers({shouldBoundsUpdate: true})
497464
}}"
498465
></style-editor-toolbar>
499466
467+
<!--<div id="map-buttons">
468+
<button class="small-round small" style="
469+
background: #FFF;
470+
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.14);
471+
width: var(--map-button-size) !important;
472+
">
473+
<i>
474+
<svg xmlns="http://www.w3.org/2000/svg" style="transform: translateY(1px);" viewBox="0 0 24 24"><title>layers</title><path fill="#004170" d="M12,16L19.36,10.27L21,9L12,2L3,9L4.63,10.27M12,18.54L4.62,12.81L3,14.07L12,21.07L21,14.07L19.37,12.8L12,18.54Z" /></svg>
475+
</i>
476+
</button>
477+
<div>-->
478+
500479
${
501480
this._isLayerControlVisible
502-
? html`
503-
${this.layerControl}
504-
`
481+
? html`${this.layerControl}`
505482
: html``
506483
}
507484

0 commit comments

Comments
 (0)