diff --git a/packages/client/.storybook/main.js b/packages/client/.storybook/main.js index 32ce43328..57d1f6f45 100644 --- a/packages/client/.storybook/main.js +++ b/packages/client/.storybook/main.js @@ -22,6 +22,16 @@ module.exports = { ], include: path.resolve(__dirname, "../"), }); + config.module.rules.push({ + test: /\.cjs/, + include: /node_modules/, + type: "javascript/auto", + }); + config.module.rules.push({ + test: /\.mjs/, + include: /node_modules/, + type: "javascript/auto", + }); return config; }, }; diff --git a/packages/client/src/admin/data/arcgis/ArcGISCartLegend.tsx b/packages/client/src/admin/data/arcgis/ArcGISCartLegend.tsx index 5614c72c3..8ece541a3 100644 --- a/packages/client/src/admin/data/arcgis/ArcGISCartLegend.tsx +++ b/packages/client/src/admin/data/arcgis/ArcGISCartLegend.tsx @@ -15,7 +15,7 @@ import Spinner from "../../../components/Spinner"; import { Layer, Map } from "mapbox-gl"; import { SeaSketchGlLayer, - compileLegendFromGLStyleLayers2, + compileLegendFromGLStyleLayers, } from "../../../dataLayers/legends/compileLegend"; import { memo } from "react"; import SimpleSymbol from "../../../dataLayers/legends/SimpleSymbol"; @@ -304,7 +304,7 @@ const SimpleLegendIconFromStyle = memo( }) { let data: LegendForGLLayers | undefined; try { - data = compileLegendFromGLStyleLayers2(props.style.layers, "vector"); + data = compileLegendFromGLStyleLayers(props.style.layers, "vector"); } catch (e) { // Do nothing } diff --git a/packages/client/src/dataLayers/Legend.tsx b/packages/client/src/dataLayers/Legend.tsx index 76d8f80d2..0f613052c 100644 --- a/packages/client/src/dataLayers/Legend.tsx +++ b/packages/client/src/dataLayers/Legend.tsx @@ -79,10 +79,12 @@ export default function Legend({ maxHeight = maxHeight || undefined; return (
@@ -224,30 +226,6 @@ function PanelFactory({ panel, map }: { panel: GLLegendPanel; map?: Map }) { ); } -function LegendImage({ - item, - className, -}: { - item: LegendSymbolItem; - className?: string; -}) { - return ( - {item.label} 1 ? window.devicePixelRatio / 1.5 : 1) - } - height={ - (item.imageHeight || 20) / - (window.devicePixelRatio > 1 ? window.devicePixelRatio / 1.5 : 1) - } - /> - ); -} - function Toggle({ visible, onChange, diff --git a/packages/client/src/dataLayers/MapContextManager.ts b/packages/client/src/dataLayers/MapContextManager.ts index 42f5dd942..93c48adba 100644 --- a/packages/client/src/dataLayers/MapContextManager.ts +++ b/packages/client/src/dataLayers/MapContextManager.ts @@ -48,7 +48,7 @@ import LRU from "lru-cache"; import debounce from "lodash.debounce"; import { currentSidebarState } from "../projects/ProjectAppSidebar"; import { ApolloClient, NormalizedCacheObject } from "@apollo/client"; -import { compileLegendFromGLStyleLayers2 } from "./legends/compileLegend"; +import { compileLegendFromGLStyleLayers } from "./legends/compileLegend"; import { LegendItem } from "./Legend"; import { EventEmitter } from "eventemitter3"; import MeasureControl, { @@ -2460,10 +2460,14 @@ class MapContextManager extends EventEmitter { if (sourceType) { try { console.time("legend2"); - const legend2 = compileLegendFromGLStyleLayers2( + const legend2 = compileLegendFromGLStyleLayers( layer.mapboxGlStyles, sourceType ); + console.log("items"); + console.log(layer.mapboxGlStyles); + console.log("legend"); + console.log(legend2); console.timeEnd("legend2"); if (legend2) { diff --git a/packages/client/src/dataLayers/legends/FillSymbol.tsx b/packages/client/src/dataLayers/legends/FillSymbol.tsx index aef5d70b1..82753a6a4 100644 --- a/packages/client/src/dataLayers/legends/FillSymbol.tsx +++ b/packages/client/src/dataLayers/legends/FillSymbol.tsx @@ -11,11 +11,11 @@ export default function FillSymbol({ map, }: { data: GLLegendFillSymbol; - map: Map; + map?: Map; }) { const [imageData, setImageData] = useState(); useEffect(() => { - if (!imageData && data.patternImageId) { + if (map && !imageData && data.patternImageId) { const resolvedImage = getImage(data.patternImageId, map); if (resolvedImage) { setImageData(resolvedImage); diff --git a/packages/client/src/dataLayers/legends/LegendListPanel.tsx b/packages/client/src/dataLayers/legends/LegendListPanel.tsx index 9a50c4b11..5e591b8d4 100644 --- a/packages/client/src/dataLayers/legends/LegendListPanel.tsx +++ b/packages/client/src/dataLayers/legends/LegendListPanel.tsx @@ -22,7 +22,7 @@ export default function LegendListPanel({ className={`flex items-center space-x-2 max-w-full`} >
- {map && item.symbol ? ( + {item.symbol ? ( ) : null}
diff --git a/packages/client/src/dataLayers/legends/LegendSimpleSymbolPanel.tsx b/packages/client/src/dataLayers/legends/LegendSimpleSymbolPanel.tsx index 508bcf583..e2f80ce45 100644 --- a/packages/client/src/dataLayers/legends/LegendSimpleSymbolPanel.tsx +++ b/packages/client/src/dataLayers/legends/LegendSimpleSymbolPanel.tsx @@ -1,8 +1,5 @@ import SimpleSymbol from "./SimpleSymbol"; -import { - GLLegendListPanel, - GLLegendSimpleSymbolPanel, -} from "./LegendDataModel"; +import { GLLegendSimpleSymbolPanel } from "./LegendDataModel"; import { Map } from "mapbox-gl"; export default function LegendSimpleSymbolPanel({ @@ -26,7 +23,7 @@ export default function LegendSimpleSymbolPanel({ className={`flex items-center space-x-2 max-w-full`} >
- {map && item.symbol ? ( + {item.symbol ? ( ) : null}
diff --git a/packages/client/src/dataLayers/legends/SimpleSymbol.tsx b/packages/client/src/dataLayers/legends/SimpleSymbol.tsx index d36d1f581..6d34e3b00 100644 --- a/packages/client/src/dataLayers/legends/SimpleSymbol.tsx +++ b/packages/client/src/dataLayers/legends/SimpleSymbol.tsx @@ -8,7 +8,7 @@ import CircleSymbol from "./CircleSymbol"; export default function SimpleSymbol(props: { data: GLLegendSymbol; - map: Map; + map?: Map; }) { switch (props.data.type) { case "line": @@ -16,7 +16,9 @@ export default function SimpleSymbol(props: { case "fill": return ; case "marker": - return ; + return props.map ? ( + + ) : null; case "text": return ( { // supress console.warn from expression evaluator @@ -1437,7 +1438,7 @@ describe("filter panels", () => { }); }); -describe("Kitchen sink examples", () => { +describe("Complex test cases", () => { test("Choropleth with california singled-out", () => { const context: { layers: SeaSketchGlLayer[]; sourceType: "vector" } = { sourceType: "vector", @@ -1594,7 +1595,7 @@ describe("Kitchen sink examples", () => { ], }; - const legend = compileLegendFromGLStyleLayers2(context.layers, "vector"); + const legend = compileLegendFromGLStyleLayers(context.layers, "vector"); expect(legend.type).toBe("MultipleSymbolGLLegend"); if (legend.type === "MultipleSymbolGLLegend") { expect(legend.panels.length).toBe(3); @@ -1602,7 +1603,7 @@ describe("Kitchen sink examples", () => { }); test("EEZ with complex expressions", () => { - const legend = compileLegendFromGLStyleLayers2( + const legend = compileLegendFromGLStyleLayers( [ { type: "fill", @@ -1648,7 +1649,7 @@ describe("Kitchen sink examples", () => { }); test("EEZ with complex case+match expressions", () => { - const legend = compileLegendFromGLStyleLayers2( + const legend = compileLegendFromGLStyleLayers( [ { type: "fill", @@ -1694,7 +1695,7 @@ describe("Kitchen sink examples", () => { }); test("EEZ with complex case+filter expressions", () => { - const legend = compileLegendFromGLStyleLayers2( + const legend = compileLegendFromGLStyleLayers( [ { type: "fill", @@ -1750,7 +1751,7 @@ describe("Kitchen sink examples", () => { }); test("EEZ (complex w/only filters)", () => { - const legend = compileLegendFromGLStyleLayers2( + const legend = compileLegendFromGLStyleLayers( [ { type: "fill", @@ -1816,7 +1817,7 @@ describe("Kitchen sink examples", () => { }); test("EEZ w/filter by country and default style", () => { - const legend = compileLegendFromGLStyleLayers2( + const legend = compileLegendFromGLStyleLayers( [ { type: "line", @@ -2137,3 +2138,12 @@ describe("groupByFilters", () => { expect(filterNode.children.length).toBe(2); }); }); + +describe("Kitchen sink", () => { + test.each(Object.keys(testCases))("Kitchen sink: %s", (name: string) => { + // @ts-ignore + const { input, output } = testCases[name]; + const legendData = compileLegendFromGLStyleLayers(input, "vector"); + expect(legendData).toMatchObject(output); + }); +}); diff --git a/packages/client/src/dataLayers/legends/legendKitchenSinkTestCases.ts b/packages/client/src/dataLayers/legends/legendKitchenSinkTestCases.ts new file mode 100644 index 000000000..3c3ff31b9 --- /dev/null +++ b/packages/client/src/dataLayers/legends/legendKitchenSinkTestCases.ts @@ -0,0 +1,3956 @@ +export const testCases = { + "Place names": { + input: [ + { + type: "symbol", + paint: { + "text-color": "black", + "text-halo-color": "white", + "text-halo-width": 2, + }, + layout: { + "text-size": 12, + "text-field": ["get", "name"], + "symbol-placement": "point", + }, + }, + ], + output: { + type: "SimpleGLLegend", + symbol: { + type: "text", + color: "black", + fontFamily: "Open Sans Regular", + fontWeight: "normal", + fontStyle: "normal", + haloColor: "white", + haloWidth: 2, + }, + }, + }, + "Populated places (heatmap)": { + input: [ + { + type: "heatmap", + paint: { + "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 2, 9, 20], + "heatmap-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 10, + 1, + 12, + 0, + ], + "heatmap-intensity": [ + "interpolate", + ["linear"], + ["zoom"], + 0, + 1, + 9, + 3, + ], + }, + layout: {}, + maxzoom: 8.2, + }, + { + type: "circle", + paint: { + "circle-color": "#4e79a7", + "circle-radius": 5, + "circle-stroke-color": "white", + "circle-stroke-width": 2, + }, + minzoom: 8, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "heatmap", + type: "GLLegendHeatmapPanel", + stops: [ + { + value: 0, + color: "rgba(0, 0, 255, 0)", + label: "0", + }, + { + value: 0.1, + color: "royalblue", + label: "0.1", + }, + { + value: 0.3, + color: "cyan", + label: "0.3", + }, + { + value: 0.5, + color: "lime", + label: "0.5", + }, + { + value: 0.7, + color: "yellow", + label: "0.7", + }, + { + value: 1, + color: "red", + label: "1", + }, + ], + }, + { + id: "remaining-layer-0", + type: "GLLegendListPanel", + items: [ + { + id: "remaining-layer-single-child", + symbol: { + radius: 5, + type: "circle", + color: "#4e79a7", + fillOpacity: 1, + strokeWidth: 2, + strokeColor: "white", + strokeOpacity: 1, + }, + label: "", + }, + ], + }, + ], + }, + }, + "Populated places (gradient)": { + input: [ + { + type: "circle", + paint: { + "circle-color": [ + "interpolate", + ["linear"], + ["get", "pop_max"], + 10000, + "red", + 100000, + "purple", + 3500000, + "yellow", + ], + "circle-radius": 5, + "circle-stroke-color": [ + "match", + ["get", "featurecla"], + "Admin-0 capital", + "red", + "Scientific station", + "#bab0ab", + "black", + ], + "circle-stroke-width": 2, + "circle-stroke-opacity": 0.5, + }, + }, + { + type: "symbol", + paint: { + "text-halo-color": "white", + "text-halo-width": 1, + }, + layout: { + "text-size": 12, + "text-field": ["get", "name"], + "text-anchor": "left", + "text-offset": [0.5, 0.5], + "symbol-placement": "point", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "0-circle-color-0-gradient", + type: "GLLegendGradientPanel", + label: "circle-color", + stops: [ + { + value: 10000, + color: "red", + label: "10,000", + }, + { + value: 100000, + color: "purple", + label: "100,000", + }, + { + value: 3500000, + color: "yellow", + label: "3,500,000", + }, + ], + }, + { + id: "0-circle-stroke-color-0-match", + type: "GLLegendListPanel", + label: "featurecla", + items: [ + { + id: "0-circle-stroke-color-0-match-0", + label: "Admin-0 capital", + symbol: { + radius: 5, + type: "circle", + color: null, + fillOpacity: 1, + strokeWidth: 2, + strokeColor: "red", + strokeOpacity: 0.5, + }, + }, + { + id: "0-circle-stroke-color-0-match-2", + label: "Scientific station", + symbol: { + radius: 5, + type: "circle", + color: null, + fillOpacity: 1, + strokeWidth: 2, + strokeColor: "#bab0ab", + strokeOpacity: 0.5, + }, + }, + { + id: "0-circle-stroke-color-0-match-default", + label: "default", + symbol: { + radius: 5, + type: "circle", + color: null, + fillOpacity: 1, + strokeWidth: 2, + strokeColor: "black", + strokeOpacity: 0.5, + }, + }, + ], + }, + ], + }, + }, + "Populated places (circle)": { + input: [ + { + type: "circle", + paint: { + "circle-color": "#CC66FF", + "circle-radius": ["step", ["zoom"], 0, 1, 5, 5, 10], + "circle-stroke-color": "#000000", + "circle-stroke-width": 1, + "circle-stroke-opacity": 0.5, + }, + }, + { + type: "symbol", + paint: { + "text-halo-color": "white", + "text-halo-width": 1, + }, + layout: { + "text-size": 12, + "text-field": ["get", "FEATURE_NA"], + "text-anchor": "left", + "text-offset": [0.5, 0.5], + "symbol-placement": "point", + }, + }, + ], + output: { + type: "SimpleGLLegend", + symbol: { + radius: 10, + type: "circle", + color: "#CC66FF", + fillOpacity: 1, + strokeWidth: 1, + strokeColor: "#000000", + strokeOpacity: 0.5, + }, + }, + }, + "Populated places (bubble chart)": { + input: [ + { + type: "circle", + paint: { + "circle-color": "#af7aa1", + "circle-radius": [ + "interpolate", + ["linear"], + ["get", "pop_max"], + 10000, + 5, + 35676000, + 50, + ], + "circle-stroke-color": [ + "match", + ["get", "featurecla"], + "Admin-0 capital", + "red", + "Meteorological Station", + "#edc949", + "black", + ], + "circle-stroke-width": 2, + }, + layout: {}, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "bubble-0-0", + type: "GLLegendBubblePanel", + label: "pop_max", + stops: [ + { + fill: "#af7aa1", + radius: 5, + stroke: "black", + strokeWidth: 2, + value: 10000, + fillOpacity: 1, + }, + { + fill: "#af7aa1", + radius: 27.5, + stroke: "black", + strokeWidth: 2, + value: 17843000, + fillOpacity: 1, + }, + { + fill: "#af7aa1", + radius: 50, + stroke: "black", + strokeWidth: 2, + value: 35676000, + fillOpacity: 1, + }, + ], + }, + { + id: "0-circle-stroke-color-0-match", + type: "GLLegendListPanel", + label: "featurecla", + items: [ + { + id: "0-circle-stroke-color-0-match-0", + label: "Admin-0 capital", + symbol: { + radius: null, + type: "circle", + color: "#af7aa1", + fillOpacity: 1, + strokeWidth: 2, + strokeColor: "red", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-stroke-color-0-match-2", + label: "Meteorological Station", + symbol: { + radius: null, + type: "circle", + color: "#af7aa1", + fillOpacity: 1, + strokeWidth: 2, + strokeColor: "#edc949", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-stroke-color-0-match-default", + label: "default", + symbol: { + radius: null, + type: "circle", + color: "#af7aa1", + fillOpacity: 1, + strokeWidth: 2, + strokeColor: "black", + strokeOpacity: 1, + }, + }, + ], + }, + ], + }, + }, + "Marker bubble chart": { + input: [ + { + type: "symbol", + paint: { + "text-halo-color": "white", + "text-halo-width": 1, + }, + layout: { + "icon-size": [ + "interpolate", + ["linear"], + ["get", "pop_max"], + -99, + 1, + 35676000, + 3, + ], + "text-size": 12, + "icon-image": "seasketch://sprites/1", + "text-field": ["get", "FEATURE_NA"], + "text-anchor": "left", + "text-offset": [0.5, 0.5], + "symbol-placement": "point", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "marker-size-0-0", + type: "GLMarkerSizePanel", + label: "pop_max", + stops: [ + { + id: "stop-0", + imageId: "seasketch://sprites/1", + value: -99, + iconSize: 1, + color: "#000000", + haloColor: "rgba(0, 0, 0, 0)", + haloWidth: 0, + rotation: 0, + }, + { + id: "stop-1", + imageId: "seasketch://sprites/1", + value: 17837950.5, + iconSize: 2, + color: "#000000", + haloColor: "rgba(0, 0, 0, 0)", + haloWidth: 0, + rotation: 0, + }, + { + id: "stop-2", + imageId: "seasketch://sprites/1", + value: 35676000, + iconSize: 3, + color: "#000000", + haloColor: "rgba(0, 0, 0, 0)", + haloWidth: 0, + rotation: 0, + }, + ], + }, + ], + }, + }, + "Places (by feature class)": { + input: [ + { + type: "circle", + paint: { + "circle-color": [ + "match", + ["get", "featurecla"], + "Admin-0 capital", + "#4e79a7", + "Admin-0 capital alt", + "#f28e2c", + "Admin-0 region capital", + "#e15759", + "Admin-1 capital", + "#76b7b2", + "Admin-1 region capital", + "#59a14f", + "Historic place", + "#edc949", + "Meteorological Station", + "#af7aa1", + "Populated Place", + "#ff9da7", + "Populated place", + "#9c755f", + "Scientific station", + "#bab0ab", + "black", + ], + "circle-radius": [ + "case", + ["==", ["get", "featurecla"], "Scientific station"], + 15, + 5, + ], + "circle-opacity": 0.7, + "circle-stroke-color": [ + "match", + ["get", "featurecla"], + "Admin-0 capital", + "#4e79a7", + "Admin-0 capital alt", + "#f28e2c", + "Admin-0 region capital", + "#e15759", + "Admin-1 capital", + "#76b7b2", + "Admin-1 region capital", + "#59a14f", + "Historic place", + "#edc949", + "Meteorological Station", + "#af7aa1", + "Populated Place", + "#ff9da7", + "Populated place", + "#9c755f", + "Scientific station", + "#eb0000", + "black", + ], + "circle-stroke-width": [ + "match", + ["get", "featurecla"], + "Scientific station", + 5, + 1, + ], + }, + layout: {}, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "0-circle-color-0-match", + type: "GLLegendListPanel", + label: "featurecla", + items: [ + { + id: "0-circle-color-0-match-0", + label: "Admin-0 capital", + symbol: { + radius: 5, + type: "circle", + color: "#4e79a7", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "#4e79a7", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-2", + label: "Admin-0 capital alt", + symbol: { + radius: 5, + type: "circle", + color: "#f28e2c", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "#f28e2c", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-4", + label: "Admin-0 region capital", + symbol: { + radius: 5, + type: "circle", + color: "#e15759", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "#e15759", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-6", + label: "Admin-1 capital", + symbol: { + radius: 5, + type: "circle", + color: "#76b7b2", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "#76b7b2", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-8", + label: "Admin-1 region capital", + symbol: { + radius: 5, + type: "circle", + color: "#59a14f", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "#59a14f", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-10", + label: "Historic place", + symbol: { + radius: 5, + type: "circle", + color: "#edc949", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "#edc949", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-12", + label: "Meteorological Station", + symbol: { + radius: 5, + type: "circle", + color: "#af7aa1", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "#af7aa1", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-14", + label: "Populated Place", + symbol: { + radius: 5, + type: "circle", + color: "#ff9da7", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "#ff9da7", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-16", + label: "Populated place", + symbol: { + radius: 5, + type: "circle", + color: "#9c755f", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "#9c755f", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-18", + label: "Scientific station", + symbol: { + radius: 15, + type: "circle", + color: "#bab0ab", + fillOpacity: 0.7, + strokeWidth: 5, + strokeColor: "#eb0000", + strokeOpacity: 1, + }, + }, + { + id: "0-circle-color-0-match-default", + label: "default", + symbol: { + radius: 5, + type: "circle", + color: "black", + fillOpacity: 0.7, + strokeWidth: 1, + strokeColor: "black", + strokeOpacity: 1, + }, + }, + ], + }, + ], + }, + }, + "EEZ (complex case+match)": { + input: [ + { + type: "fill", + paint: { + "fill-color": "#FF0000", + "fill-opacity": ["case", ["==", ["get", "ISO_SOV1"], "MEX"], 0.15, 0], + }, + layout: {}, + }, + { + type: "line", + paint: { + "line-color": [ + "case", + ["==", ["get", "ISO_SOV1"], "USA"], + "#FF0000", + "blue", + ], + "line-width": ["match", ["get", "ISO_SOV1"], "MEX", 4, 1], + "line-opacity": 0.75, + }, + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "1-line-width-0-match", + type: "GLLegendListPanel", + label: "ISO_SOV1", + items: [ + { + id: "1-line-width-0-match-0", + label: "MEX", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0.15, + strokeWidth: 4, + strokeColor: "blue", + strokeOpacity: 0.75, + }, + }, + { + id: "1-line-width-0-match-USA", + label: "USA", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "#FF0000", + strokeOpacity: 0.75, + }, + }, + { + id: "1-line-width-0-match-default", + label: "default", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "blue", + strokeOpacity: 0.75, + }, + }, + ], + }, + ], + }, + }, + "EEZ (by country code)": { + input: [ + { + type: "line", + paint: { + "line-color": "#FC49A3", + "line-width": 1, + "line-opacity": 0.75, + }, + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + { + type: "fill", + paint: { + "fill-color": [ + "match", + ["get", "ISO_SOV1"], + "AFG", + "#4e79a7", + "AGO", + "#f28e2c", + "ALB", + "#e15759", + "AND", + "#76b7b2", + "ARE", + "#59a14f", + "ARG", + "#edc949", + "ARM", + "#af7aa1", + "ATA", + "#ff9da7", + "ATG", + "#9c755f", + "AUS", + "#bab0ab", + "AUT", + "#4e79a7", + "AZE", + "#f28e2c", + "BDI", + "#e15759", + "BEL", + "#76b7b2", + "BEN", + "#59a14f", + "BFA", + "#edc949", + "BGD", + "#af7aa1", + "BGR", + "#ff9da7", + "BHR", + "#9c755f", + "BHS", + "#bab0ab", + "BIH", + "#4e79a7", + "BLR", + "#f28e2c", + "BLZ", + "#e15759", + "BOL", + "#76b7b2", + "BRA", + "#59a14f", + "BRB", + "#edc949", + "BRN", + "#af7aa1", + "BTN", + "#ff9da7", + "BWA", + "#9c755f", + "CAF", + "#bab0ab", + "CAN", + "#4e79a7", + "CHE", + "#f28e2c", + "CHL", + "#e15759", + "CHN", + "#76b7b2", + "CIV", + "#59a14f", + "CMR", + "#edc949", + "COD", + "#af7aa1", + "COG", + "#ff9da7", + "COL", + "#9c755f", + "COM", + "#bab0ab", + "CPV", + "#4e79a7", + "CRI", + "#f28e2c", + "CUB", + "#e15759", + "CYP", + "#76b7b2", + "CZE", + "#59a14f", + "DEU", + "#edc949", + "DJI", + "#af7aa1", + "DMA", + "#ff9da7", + "DNK", + "#9c755f", + "DOM", + "#bab0ab", + "DZA", + "#4e79a7", + "ECU", + "#f28e2c", + "EGY", + "#e15759", + "ERI", + "#76b7b2", + "ESH", + "#59a14f", + "ESP", + "#edc949", + "EST", + "#af7aa1", + "ETH", + "#ff9da7", + "FIN", + "#9c755f", + "FJI", + "#bab0ab", + "FRA", + "#4e79a7", + "FSM", + "#f28e2c", + "GAB", + "#e15759", + "GBR", + "#76b7b2", + "GEO", + "#59a14f", + "GHA", + "#edc949", + "GIB", + "#af7aa1", + "GIN", + "#ff9da7", + "GMB", + "#9c755f", + "GNB", + "#bab0ab", + "GNQ", + "#4e79a7", + "GRC", + "#f28e2c", + "GRD", + "#e15759", + "GTM", + "#76b7b2", + "GUY", + "#59a14f", + "HND", + "#edc949", + "HRV", + "#af7aa1", + "HTI", + "#ff9da7", + "HUN", + "#9c755f", + "IDN", + "#bab0ab", + "IND", + "#4e79a7", + "IRL", + "#f28e2c", + "IRN", + "#e15759", + "IRQ", + "#76b7b2", + "ISL", + "#59a14f", + "ISR", + "#edc949", + "ITA", + "#af7aa1", + "JAM", + "#ff9da7", + "JOR", + "#9c755f", + "JPN", + "#bab0ab", + "KAZ", + "#4e79a7", + "KEN", + "#f28e2c", + "KGZ", + "#e15759", + "KHM", + "#76b7b2", + "KIR", + "#59a14f", + "KNA", + "#edc949", + "KOR", + "#af7aa1", + "KWT", + "#ff9da7", + "LAO", + "#9c755f", + "LBN", + "#bab0ab", + "black", + ], + "fill-opacity": 0.8, + }, + layout: {}, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "0-fill-color-0-match", + type: "GLLegendListPanel", + label: "ISO_SOV1", + items: [ + { + id: "0-fill-color-0-match-0", + label: "AFG", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-2", + label: "AGO", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-4", + label: "ALB", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-6", + label: "AND", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-8", + label: "ARE", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-10", + label: "ARG", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-12", + label: "ARM", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-14", + label: "ATA", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-16", + label: "ATG", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-18", + label: "AUS", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-20", + label: "AUT", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-22", + label: "AZE", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-24", + label: "BDI", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-26", + label: "BEL", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-28", + label: "BEN", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-30", + label: "BFA", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-32", + label: "BGD", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-34", + label: "BGR", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-36", + label: "BHR", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-38", + label: "BHS", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-40", + label: "BIH", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-42", + label: "BLR", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-44", + label: "BLZ", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-46", + label: "BOL", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-48", + label: "BRA", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-50", + label: "BRB", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-52", + label: "BRN", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-54", + label: "BTN", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-56", + label: "BWA", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-58", + label: "CAF", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-60", + label: "CAN", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-62", + label: "CHE", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-64", + label: "CHL", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-66", + label: "CHN", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-68", + label: "CIV", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-70", + label: "CMR", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-72", + label: "COD", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-74", + label: "COG", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-76", + label: "COL", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-78", + label: "COM", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-80", + label: "CPV", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-82", + label: "CRI", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-84", + label: "CUB", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-86", + label: "CYP", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-88", + label: "CZE", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-90", + label: "DEU", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-92", + label: "DJI", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-94", + label: "DMA", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-96", + label: "DNK", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-98", + label: "DOM", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-100", + label: "DZA", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-102", + label: "ECU", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-104", + label: "EGY", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-106", + label: "ERI", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-108", + label: "ESH", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-110", + label: "ESP", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-112", + label: "EST", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-114", + label: "ETH", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-116", + label: "FIN", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-118", + label: "FJI", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-120", + label: "FRA", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-122", + label: "FSM", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-124", + label: "GAB", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-126", + label: "GBR", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-128", + label: "GEO", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-130", + label: "GHA", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-132", + label: "GIB", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-134", + label: "GIN", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-136", + label: "GMB", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-138", + label: "GNB", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-140", + label: "GNQ", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-142", + label: "GRC", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-144", + label: "GRD", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-146", + label: "GTM", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-148", + label: "GUY", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-150", + label: "HND", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-152", + label: "HRV", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-154", + label: "HTI", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-156", + label: "HUN", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-158", + label: "IDN", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-160", + label: "IND", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-162", + label: "IRL", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-164", + label: "IRN", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-166", + label: "IRQ", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-168", + label: "ISL", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-170", + label: "ISR", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-172", + label: "ITA", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-174", + label: "JAM", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-176", + label: "JOR", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-178", + label: "JPN", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-180", + label: "KAZ", + symbol: { + type: "fill", + color: "#4e79a7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-182", + label: "KEN", + symbol: { + type: "fill", + color: "#f28e2c", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-184", + label: "KGZ", + symbol: { + type: "fill", + color: "#e15759", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-186", + label: "KHM", + symbol: { + type: "fill", + color: "#76b7b2", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-188", + label: "KIR", + symbol: { + type: "fill", + color: "#59a14f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-190", + label: "KNA", + symbol: { + type: "fill", + color: "#edc949", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-192", + label: "KOR", + symbol: { + type: "fill", + color: "#af7aa1", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-194", + label: "KWT", + symbol: { + type: "fill", + color: "#ff9da7", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-196", + label: "LAO", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-198", + label: "LBN", + symbol: { + type: "fill", + color: "#bab0ab", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-color-0-match-default", + label: "default", + symbol: { + type: "fill", + color: "black", + extruded: false, + fillOpacity: 0.8, + strokeWidth: 1, + strokeColor: "#FC49A3", + strokeOpacity: 0.75, + }, + }, + ], + }, + { + id: "remaining-layer-0", + type: "GLLegendListPanel", + items: [ + { + id: "remaining-layer-single-child", + symbol: { + type: "fill", + color: "transparent", + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "#FC49A3", + extruded: false, + strokeOpacity: 0.75, + }, + label: "", + }, + ], + }, + ], + }, + }, + "EEZ (complex, case only)": { + input: [ + { + type: "fill", + paint: { + "fill-color": "#FF0000", + "fill-opacity": ["case", ["==", ["get", "ISO_SOV1"], "MEX"], 0.15, 0], + }, + layout: {}, + }, + { + type: "line", + paint: { + "line-color": [ + "case", + ["==", ["get", "ISO_SOV1"], "USA"], + "#FF0000", + "blue", + ], + "line-width": ["case", ["==", ["get", "ISO_SOV1"], "MEX"], 4, 1], + "line-opacity": 0.75, + }, + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "0-fill-opacity-case", + type: "GLLegendListPanel", + label: "ISO_SOV1", + items: [ + { + id: "0-fill-opacity-case-0", + label: "MEX", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0.15, + strokeWidth: 4, + strokeColor: "blue", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-opacity-case-1", + label: "USA", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "#FF0000", + strokeOpacity: 0.75, + }, + }, + { + id: "0-fill-opacity-case-default", + label: "default", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "blue", + strokeOpacity: 0.75, + }, + }, + ], + }, + ], + }, + }, + "EEZ (filter by country)": { + input: [ + { + type: "line", + paint: { + "line-color": "rgb(110,110,110)", + "line-width": 1, + "line-opacity": 1, + }, + layout: {}, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(252,215,215,1)", + "fill-outline-color": "rgba(110,110,110,1)", + }, + filter: ["==", "ISO_SOV1", "USA"], + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "default-line", + type: "GLLegendListPanel", + label: "ISO_SOV1", + items: [ + { + id: "0-filter-only", + label: "USA", + symbol: { + type: "fill", + color: "rgba(252,215,215,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + strokeColor: "rgb(110,110,110)", + strokeOpacity: 1, + }, + }, + { + id: "default-line", + symbol: { + type: "fill", + color: "transparent", + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "rgb(110,110,110)", + extruded: false, + strokeOpacity: 1, + }, + label: "default", + }, + ], + }, + ], + }, + }, + "EEZ (complex w/case+filters)": { + input: [ + { + type: "fill", + paint: { + "fill-color": "#FF0000", + "fill-opacity": ["case", ["==", ["get", "ISO_SOV1"], "MEX"], 0.15, 0], + }, + layout: {}, + }, + { + type: "line", + paint: { + "line-color": "#FF0000", + "line-width": 1, + "line-opacity": 0.75, + }, + filter: ["==", "ISO_SOV1", "USA"], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + { + type: "line", + paint: { + "line-color": "blue", + "line-width": ["match", ["get", "ISO_SOV1"], "MEX", 4, 1], + "line-opacity": 0.75, + }, + filter: ["!=", "ISO_SOV1", "USA"], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "ISO_SOV1%%line", + type: "GLLegendListPanel", + label: "ISO_SOV1", + items: [ + { + id: "0-filter-only", + label: "USA", + symbol: { + type: "fill", + color: "transparent", + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "#FF0000", + extruded: false, + strokeOpacity: 0.75, + }, + }, + { + id: "2-line-width-0-match-0", + label: "MEX", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0.15, + strokeWidth: 4, + strokeColor: "blue", + strokeOpacity: 0.75, + }, + }, + { + id: "2-line-width-0-match-default", + label: "default", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "blue", + strokeOpacity: 0.75, + }, + }, + ], + }, + ], + }, + }, + "EEZ (complex, only filters)": { + input: [ + { + type: "fill", + paint: { + "fill-color": "#FF0000", + "fill-opacity": 0.15, + }, + filter: ["==", "ISO_SOV1", "MEX"], + layout: {}, + }, + { + type: "line", + paint: { + "line-color": "red", + "line-width": 1, + "line-opacity": 0.75, + }, + filter: ["==", "ISO_SOV1", "USA"], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + { + type: "line", + paint: { + "line-color": "blue", + "line-width": 1, + "line-opacity": 0.75, + }, + filter: ["all", ["!=", "ISO_SOV1", "USA"], ["!=", "ISO_SOV1", "MEX"]], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + { + type: "line", + paint: { + "line-color": "blue", + "line-width": 4, + "line-opacity": 0.75, + }, + filter: ["==", "ISO_SOV1", "MEX"], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "ISO_SOV1%%fill", + type: "GLLegendListPanel", + label: "ISO_SOV1", + items: [ + { + id: "0-filter-only", + label: "MEX", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0.15, + strokeWidth: 4, + strokeColor: "blue", + strokeOpacity: 0.75, + }, + }, + { + id: "1-filter-only", + label: "USA", + symbol: { + type: "fill", + color: "transparent", + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "red", + extruded: false, + strokeOpacity: 0.75, + }, + }, + { + id: "2-filter-only", + label: "!= USA, != MEX", + symbol: { + type: "fill", + color: "transparent", + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "blue", + extruded: false, + strokeOpacity: 0.75, + }, + }, + ], + }, + ], + }, + }, + "EEZ (filtered lines w/shared fill)": { + input: [ + { + type: "fill", + paint: { + "fill-color": "#FF0000", + "fill-opacity": 0.15, + }, + layout: {}, + }, + { + type: "line", + paint: { + "line-color": "red", + "line-width": 1, + "line-opacity": 0.75, + }, + filter: ["==", "ISO_SOV1", "USA"], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + { + type: "line", + paint: { + "line-color": "blue", + "line-width": 1, + "line-opacity": 0.75, + }, + filter: ["all", ["!=", "ISO_SOV1", "USA"], ["!=", "ISO_SOV1", "MEX"]], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + { + type: "line", + paint: { + "line-color": "blue", + "line-width": 4, + "line-opacity": 0.75, + }, + filter: ["==", "ISO_SOV1", "MEX"], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "ISO_SOV1%%fill", + type: "GLLegendListPanel", + label: "ISO_SOV1", + items: [ + { + id: "1-filter-only", + label: "USA", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0.15, + strokeWidth: 1, + strokeColor: "red", + strokeOpacity: 0.75, + }, + }, + { + id: "2-filter-only", + label: "!= USA, != MEX", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0.15, + strokeWidth: 1, + strokeColor: "blue", + strokeOpacity: 0.75, + }, + }, + { + id: "3-filter-only", + label: "MEX", + symbol: { + type: "fill", + color: "#FF0000", + extruded: false, + fillOpacity: 0.15, + strokeWidth: 4, + strokeColor: "blue", + strokeOpacity: 0.75, + }, + }, + ], + }, + ], + }, + }, + "Populated places text label": { + input: [ + { + type: "symbol", + paint: { + "text-halo-color": "white", + "text-halo-width": 1, + }, + layout: { + "text-size": [ + "match", + ["get", "featurecla"], + "Admin-0 capital", + 20, + "Admin-0 capital alt", + 20, + "Admin-0 region capital", + 20, + "Admin-1 capital", + 20, + "Admin-1 region capital", + 18, + "Historic place", + 12, + "Meteorological Station", + 12, + "Populated Place", + 12, + "Populated place", + 12, + "Scientific station", + 12, + 12, + ], + "text-field": ["get", "name"], + "text-anchor": "left", + "text-offset": [0.5, 0.5], + "symbol-sort-key": ["*", -1, ["get", "labelrank"]], + "symbol-placement": "point", + "icon-allow-overlap": true, + }, + }, + ], + output: { + type: "SimpleGLLegend", + symbol: { + type: "text", + color: "#000000", + fontFamily: "Open Sans Regular", + fontWeight: "normal", + fontStyle: "normal", + haloColor: "white", + haloWidth: 1, + }, + }, + }, + "Places (circle-color step)": { + input: [ + { + type: "circle", + paint: { + "circle-color": [ + "step", + ["get", "pop_max"], + "#0d0887", + 679, + "#0d0887", + 19542, + "#6a00a8", + 56032, + "#b12a90", + 142564, + "#e16462", + 441094, + "#fca636", + ], + "circle-radius": 5, + "circle-stroke-color": "black", + "circle-stroke-width": 1, + "circle-stroke-opacity": 0.5, + }, + }, + { + type: "symbol", + paint: { + "text-halo-color": "white", + "text-halo-width": 1, + }, + layout: { + "text-size": 12, + "text-field": ["get", "FEATURE_NA"], + "text-anchor": "left", + "text-offset": [0.5, 0.5], + "symbol-placement": "point", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "0-circle-color-0-step", + type: "GLLegendStepPanel", + label: "pop_max", + steps: [ + { + id: "0-circle-color-0-step-first", + label: "< 679", + symbol: { + radius: 5, + type: "circle", + color: "#0d0887", + fillOpacity: 1, + strokeWidth: 1, + strokeColor: "black", + strokeOpacity: 0.5, + }, + }, + { + id: "0-circle-color-0-step-0", + label: "679", + symbol: { + radius: 5, + type: "circle", + color: "#0d0887", + fillOpacity: 1, + strokeWidth: 1, + strokeColor: "black", + strokeOpacity: 0.5, + }, + }, + { + id: "0-circle-color-0-step-2", + label: "19,542", + symbol: { + radius: 5, + type: "circle", + color: "#6a00a8", + fillOpacity: 1, + strokeWidth: 1, + strokeColor: "black", + strokeOpacity: 0.5, + }, + }, + { + id: "0-circle-color-0-step-4", + label: "56,032", + symbol: { + radius: 5, + type: "circle", + color: "#b12a90", + fillOpacity: 1, + strokeWidth: 1, + strokeColor: "black", + strokeOpacity: 0.5, + }, + }, + { + id: "0-circle-color-0-step-6", + label: "142,564", + symbol: { + radius: 5, + type: "circle", + color: "#e16462", + fillOpacity: 1, + strokeWidth: 1, + strokeColor: "black", + strokeOpacity: 0.5, + }, + }, + { + id: "0-circle-color-0-step-8", + label: "441,094", + symbol: { + radius: 5, + type: "circle", + color: "#fca636", + fillOpacity: 1, + strokeWidth: 1, + strokeColor: "black", + strokeOpacity: 0.5, + }, + }, + ], + }, + ], + }, + }, + "Places (case range w/no logical fallback)": { + input: [ + { + type: "symbol", + paint: { + "text-halo-color": "white", + "text-halo-width": 1, + }, + layout: { + "icon-size": [ + "case", + [">=", ["get", "pop_max"], 50000], + 2, + ["<=", ["get", "pop_max"], 50000], + 1, + 0.5, + ], + "text-size": 12, + "icon-image": "seasketch://sprites/1", + "text-field": ["get", "FEATURE_NA"], + "text-anchor": "left", + "text-offset": [0.5, 0.5], + "symbol-placement": "point", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "0-icon-size-case", + type: "GLLegendListPanel", + label: "pop_max", + items: [ + { + id: "0-icon-size-case-0", + label: ">= 50,000", + symbol: { + type: "marker", + imageId: "seasketch://sprites/1", + haloColor: "white", + haloWidth: 1, + iconSize: 2, + }, + }, + { + id: "0-icon-size-case-2", + label: "<= 50,000", + symbol: { + type: "marker", + imageId: "seasketch://sprites/1", + haloColor: "white", + haloWidth: 1, + iconSize: 1, + }, + }, + { + id: "0-icon-size-case-default", + label: "default", + symbol: { + type: "marker", + imageId: "seasketch://sprites/1", + haloColor: "white", + haloWidth: 1, + iconSize: 1, + }, + }, + ], + }, + ], + }, + }, + "Places (case w/logical fallback)": { + input: [ + { + type: "symbol", + paint: { + "text-halo-color": "white", + "text-halo-width": 1, + }, + layout: { + "icon-size": [ + "case", + [">=", ["get", "pop_max"], 50000], + 2, + ["<=", ["get", "pop_max"], 20000], + 1, + 0.5, + ], + "text-size": 12, + "icon-image": "seasketch://sprites/1", + "text-field": ["get", "FEATURE_NA"], + "text-anchor": "left", + "text-offset": [0.5, 0.5], + "symbol-placement": "point", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "0-icon-size-case", + type: "GLLegendListPanel", + label: "pop_max", + items: [ + { + id: "0-icon-size-case-0", + label: ">= 50,000", + symbol: { + type: "marker", + imageId: "seasketch://sprites/1", + haloColor: "white", + haloWidth: 1, + iconSize: 2, + }, + }, + { + id: "0-icon-size-case-2", + label: "<= 20,000", + symbol: { + type: "marker", + imageId: "seasketch://sprites/1", + haloColor: "white", + haloWidth: 1, + iconSize: 1, + }, + }, + { + id: "0-icon-size-case-default", + label: "default", + symbol: { + type: "marker", + imageId: "seasketch://sprites/1", + haloColor: "white", + haloWidth: 1, + iconSize: 1, + }, + }, + ], + }, + ], + }, + }, + "Places (text color by population)": { + input: [ + { + type: "symbol", + paint: { + "text-color": [ + "case", + [">=", ["get", "pop_max"], 2000000], + "red", + [">=", ["get", "pop_max"], 500000], + "orange", + "blue", + ], + "text-halo-color": "white", + "text-halo-width": 2, + }, + layout: { + "text-size": 11, + "text-field": ["get", "name"], + "text-anchor": "left", + "text-offset": [0.5, 0.5], + "symbol-placement": "point", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "0-text-color-case", + type: "GLLegendListPanel", + label: "pop_max", + items: [ + { + id: "0-text-color-case-0", + label: ">= 2,000,000", + symbol: { + type: "text", + color: "red", + fontFamily: "Open Sans Regular", + fontWeight: "normal", + fontStyle: "normal", + haloColor: "white", + haloWidth: 2, + }, + }, + { + id: "0-text-color-case-2", + label: ">= 500,000", + symbol: { + type: "text", + color: "orange", + fontFamily: "Open Sans Regular", + fontWeight: "normal", + fontStyle: "normal", + haloColor: "white", + haloWidth: 2, + }, + }, + { + id: "0-text-color-case-default", + label: "default", + symbol: { + type: "text", + color: null, + fontFamily: "Open Sans Regular", + fontWeight: "normal", + fontStyle: "normal", + haloColor: "white", + haloWidth: 2, + }, + }, + ], + }, + ], + }, + }, + "state-data (choropleth, layer.metadata.label present)": { + input: [ + { + type: "fill", + paint: { + "fill-color": "rgba(49,163,84,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 145993.6237613576], + ["<=", "EmpArts", 290160], + ], + metadata: { + label: "145,995 to 290,160", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(49,163,84,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 73652.57252191499], + ["<=", "EmpArts", 145993.6237613576], + ], + metadata: { + label: "37,354 to 145,994", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(116,196,118,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 37352.65411538615], + ["<=", "EmpArts", 73652.57252191499], + ], + metadata: { + label: "37,354 to 73,653", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(186,228,179,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 19137.767080371515], + ["<=", "EmpArts", 37352.65411538615], + ], + metadata: { + label: "19,138 to 37,353", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(186,228,179,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 9997.743513853795], + ["<=", "EmpArts", 19137.767080371515], + ], + metadata: { + label: "9,999 to 19,138", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(237,248,233,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 5411.383431800605], + ["<=", "EmpArts", 9997.743513853795], + ], + metadata: { + label: "5,412 to 9,998", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(237,248,233,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: ["all", ["<=", "EmpArts", 5411.383431800605]], + metadata: { + label: "3,110 to 5,411", + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "EmpArts%%fill", + type: "GLLegendListPanel", + label: "EmpArts", + items: [ + { + id: "0-filter-only", + label: "145,995 to 290,160", + symbol: { + type: "fill", + color: "rgba(49,163,84,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "1-filter-only", + label: "37,354 to 145,994", + symbol: { + type: "fill", + color: "rgba(49,163,84,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "2-filter-only", + label: "37,354 to 73,653", + symbol: { + type: "fill", + color: "rgba(116,196,118,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "3-filter-only", + label: "19,138 to 37,353", + symbol: { + type: "fill", + color: "rgba(186,228,179,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "4-filter-only", + label: "9,999 to 19,138", + symbol: { + type: "fill", + color: "rgba(186,228,179,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "5-filter-only", + label: "5,412 to 9,998", + symbol: { + type: "fill", + color: "rgba(237,248,233,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "6-filter-only", + label: "3,110 to 5,411", + symbol: { + type: "fill", + color: "rgba(237,248,233,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + ], + }, + ], + }, + }, + "state-data (very complex)": { + input: [ + { + type: "fill", + paint: { + "fill-color": "rgba(49,163,84,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 145993.6237613576], + ["<=", "EmpArts", 290160], + ["!=", "NAME", "California"], + ], + metadata: { + label: "145,995 to 290,160", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(49,163,84,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 73652.57252191499], + ["<=", "EmpArts", 145993.6237613576], + ["!=", "NAME", "California"], + ], + metadata: { + label: "37,354 to 145,994", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(116,196,118,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 37352.65411538615], + ["<=", "EmpArts", 73652.57252191499], + ["!=", "NAME", "California"], + ], + metadata: { + label: "37,354 to 73,653", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(186,228,179,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 19137.767080371515], + ["<=", "EmpArts", 37352.65411538615], + ["!=", "NAME", "California"], + ], + metadata: { + label: "19,138 to 37,353", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(186,228,179,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 9997.743513853795], + ["<=", "EmpArts", 19137.767080371515], + ["!=", "NAME", "California"], + ], + metadata: { + label: "9,999 to 19,138", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(237,248,233,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 5411.383431800605], + ["<=", "EmpArts", 9997.743513853795], + ["!=", "NAME", "California"], + ], + metadata: { + label: "5,412 to 9,998", + }, + }, + { + type: "fill", + paint: { + "fill-color": "rgba(237,248,233,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + ["<=", "EmpArts", 5411.383431800605], + ["!=", "NAME", "California"], + ], + metadata: { + label: "3,110 to 5,411", + }, + }, + { + type: "line", + paint: { + "line-color": [ + "case", + ["==", ["get", "SUB_REGION"], "Pacific"], + "blue", + "rgba(0,0,0,0.2)", + ], + }, + }, + { + type: "line", + paint: { + "line-color": "red", + }, + filter: ["==", ["get", "NAME"], "California"], + }, + { + type: "fill", + paint: { + "fill-color": "#9c755f", + "fill-opacity": 0.5, + }, + filter: ["==", "NAME", "California"], + }, + { + type: "symbol", + layout: { + "icon-image": [ + "match", + ["get", "NAME"], + "California", + "seasketch://sprites/1", + "seasketch://sprites/2", + ], + }, + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "10-icon-image-0-match", + type: "GLLegendListPanel", + label: "NAME", + items: [ + { + id: "10-icon-image-0-match-0", + label: "California", + symbol: { + type: "marker", + imageId: "seasketch://sprites/1", + haloColor: "rgba(0, 0, 0, 0)", + iconSize: 1, + }, + }, + { + id: "7-filter-only", + label: "California", + symbol: { + type: "fill", + color: "#9c755f", + extruded: false, + fillOpacity: 0.5, + strokeWidth: 1, + strokeColor: "red", + strokeOpacity: 1, + }, + }, + { + id: "10-icon-image-0-match-default", + label: "default", + symbol: { + type: "marker", + imageId: "seasketch://sprites/2", + haloColor: "rgba(0, 0, 0, 0)", + iconSize: 1, + }, + }, + ], + }, + { + id: "8-line-color-case", + type: "GLLegendListPanel", + label: "SUB_REGION", + items: [ + { + id: "8-line-color-case-0", + label: "Pacific", + symbol: { + type: "fill", + color: "transparent", + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "blue", + extruded: false, + strokeOpacity: 1, + }, + }, + { + id: "8-line-color-case-default", + label: "default", + symbol: { + type: "fill", + color: "transparent", + fillOpacity: 0, + strokeWidth: 1, + strokeColor: "rgba(0,0,0,0.2)", + extruded: false, + strokeOpacity: 1, + }, + }, + ], + }, + { + id: '[["!=",["get","NAME"],"California"]]', + type: "GLLegendFilterPanel", + label: "NAME != California", + children: [ + { + id: "EmpArts%%fill", + type: "GLLegendListPanel", + label: "EmpArts", + items: [ + { + id: "0-filter-only", + label: "145,995 to 290,160", + symbol: { + type: "fill", + color: "rgba(49,163,84,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "1-filter-only", + label: "37,354 to 145,994", + symbol: { + type: "fill", + color: "rgba(49,163,84,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "2-filter-only", + label: "37,354 to 73,653", + symbol: { + type: "fill", + color: "rgba(116,196,118,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "3-filter-only", + label: "19,138 to 37,353", + symbol: { + type: "fill", + color: "rgba(186,228,179,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "4-filter-only", + label: "9,999 to 19,138", + symbol: { + type: "fill", + color: "rgba(186,228,179,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "5-filter-only", + label: "5,412 to 9,998", + symbol: { + type: "fill", + color: "rgba(237,248,233,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "6-filter-only", + label: "3,110 to 5,411", + symbol: { + type: "fill", + color: "rgba(237,248,233,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + ], + }, + ], + }, + ], + }, + }, + "Places (single icon image)": { + input: [ + { + type: "symbol", + layout: { + "icon-image": "seasketch://sprites/1", + }, + }, + ], + output: { + type: "SimpleGLLegend", + symbol: { + type: "marker", + imageId: "seasketch://sprites/1", + haloColor: "rgba(0, 0, 0, 0)", + iconSize: 1, + }, + }, + }, + "state-data (choropleth, no metadata labels)": { + input: [ + { + type: "fill", + paint: { + "fill-color": "rgba(49,163,84,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 145993.6237613576], + ["<=", "EmpArts", 290160], + ], + }, + { + type: "fill", + paint: { + "fill-color": "rgba(49,163,84,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 73652.57252191499], + ["<=", "EmpArts", 145993.6237613576], + ], + }, + { + type: "fill", + paint: { + "fill-color": "rgba(116,196,118,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 37352.65411538615], + ["<=", "EmpArts", 73652.57252191499], + ], + }, + { + type: "fill", + paint: { + "fill-color": "rgba(186,228,179,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 19137.767080371515], + ["<=", "EmpArts", 37352.65411538615], + ], + }, + { + type: "fill", + paint: { + "fill-color": "rgba(186,228,179,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 9997.743513853795], + ["<=", "EmpArts", 19137.767080371515], + ], + }, + { + type: "fill", + paint: { + "fill-color": "rgba(237,248,233,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: [ + "all", + [">", "EmpArts", 5411.383431800605], + ["<=", "EmpArts", 9997.743513853795], + ], + }, + { + type: "fill", + paint: { + "fill-color": "rgba(237,248,233,1)", + "fill-outline-color": "rgba(0,0,0,1)", + }, + filter: ["all", ["<=", "EmpArts", 5411.383431800605]], + }, + ], + output: { + type: "MultipleSymbolGLLegend", + panels: [ + { + id: "EmpArts%%fill", + type: "GLLegendListPanel", + label: "EmpArts", + items: [ + { + id: "0-filter-only", + label: "145,993.624 - 290,160", + symbol: { + type: "fill", + color: "rgba(49,163,84,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "1-filter-only", + label: "73,652.573 - 145,993.624", + symbol: { + type: "fill", + color: "rgba(49,163,84,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "2-filter-only", + label: "37,352.654 - 73,652.573", + symbol: { + type: "fill", + color: "rgba(116,196,118,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "3-filter-only", + label: "19,137.767 - 37,352.654", + symbol: { + type: "fill", + color: "rgba(186,228,179,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "4-filter-only", + label: "9,997.744 - 19,137.767", + symbol: { + type: "fill", + color: "rgba(186,228,179,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "5-filter-only", + label: "5,411.383 - 9,997.744", + symbol: { + type: "fill", + color: "rgba(237,248,233,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + { + id: "6-filter-only", + label: "<= 5,411.383", + symbol: { + type: "fill", + color: "rgba(237,248,233,1)", + extruded: false, + fillOpacity: 1, + strokeWidth: 1, + dashed: false, + strokeColor: "rgba(0,0,0,1)", + }, + }, + ], + }, + ], + }, + }, +}; diff --git a/packages/client/src/dataLayers/legends/legends.stories.tsx b/packages/client/src/dataLayers/legends/legends.stories.tsx new file mode 100644 index 000000000..1e5ce61de --- /dev/null +++ b/packages/client/src/dataLayers/legends/legends.stories.tsx @@ -0,0 +1,58 @@ +import { Story } from "@storybook/react/types-6-0"; +import Legend from "../Legend"; +import { testCases } from "./legendKitchenSinkTestCases"; +import { + SeaSketchGlLayer, + compileLegendFromGLStyleLayers, +} from "./compileLegend"; + +const defaultArgs = { + zOrder: {}, + opacity: {}, + hiddenItems: [], +}; + +export default { + title: "Legends", + component: Legend, + args: { + zOrder: {}, + opacity: {}, + hiddenItems: [], + }, +}; + +export const Legends = () => { + return ( +
+
    + {Object.keys(testCases).map((testCaseName) => { + const data = compileLegendFromGLStyleLayers( + // @ts-ignore + testCases[testCaseName].input as SeaSketchGlLayer[], + "vector" + ); + console.log(data); + return ( +
    + {/*

    {testCaseName}

    */} + {/* @ts-ignore */} + +
    + ); + })} +
+
+ ); +};