keplergl · alex-polic · Oct 7, 2024
diff --git a/src/components/src/side-panel/layer-panel/text-label-panel.tsx b/src/components/src/side-panel/layer-panel/text-label-panel.tsx
@@ -95,6 +95,17 @@ function TextLabelPanelFactory(
                     onChange={v => updateLayerTextLabel(idx, 'size', v[1])}
                   />
                 </SidePanelSection>
+                <SidePanelSection>
+                  <PanelLabel>
+                    <FormattedMessage id="panel.text.fontWeight" />
+                  </PanelLabel>
+                  <RangeSlider
+                    {...LAYER_TEXT_CONFIGS.fontWeight}
+                    value1={tl.weight}
+                    isRanged={false}
+                    onChange={v => updateLayerTextLabel(idx, 'weight', v[1])}
+                  />
+                </SidePanelSection>{' '}
                 <SidePanelSection>
                   <PanelLabel>
                     <FormattedMessage id="panel.text.fontColor" />
@@ -109,7 +120,6 @@ function TextLabelPanelFactory(
                     ]}
                   />
                 </SidePanelSection>
-
                 <SidePanelSection>
                   <PanelLabel>
                     <FormattedMessage id="panel.text.outlineWidth" />
@@ -135,7 +145,6 @@ function TextLabelPanelFactory(
                     useOpacity={true}
                   />
                 </SidePanelSection>
-
                 <SidePanelSection>
                   <SwitchWrapper>
                     <PanelLabel>
@@ -159,7 +168,6 @@ function TextLabelPanelFactory(
                     disabled={!tl.background}
                   />
                 </SidePanelSection>
-
                 <SidePanelSection>
                   <SpaceBetweenFlexbox>
                     <SBFlexboxItem>

diff --git a/src/constants/src/layers.ts b/src/constants/src/layers.ts
@@ -38,6 +38,7 @@ export const DEFAULT_TEXT_LABEL: LayerTextLabel = {
   field: null,
   color: [255, 255, 255],
   size: 18,
+  weight: 400,
   offset: [0, 0],
   anchor: 'start',
   alignment: 'center',
@@ -486,6 +487,16 @@ export const LAYER_TEXT_CONFIGS: LayerTextConfig = {
     label: 'Font size',
     showInput: true
   },
+
+  fontWeight: {
+    type: 'number',
+    range: [100, 1000],
+    value0: 100,
+    step: 100,
+    isRanged: false,
+    label: 'Font weight',
+    showInput: true
+  },
   outlineWidth: {
     type: 'number',
     range: [0, 1],

diff --git a/src/layers/src/base-layer.ts b/src/layers/src/base-layer.ts
@@ -1447,6 +1447,7 @@ class Layer {
             getPixelOffset: getPixelOffset(textLabel[i]),
             getSize: PROJECTED_PIXEL_SIZE_MULTIPLIER,
             sizeScale: textLabel[i].size,
+            fontWeight: textLabel[i].weight,
             getTextAnchor: textLabel[i].anchor,
             getAlignmentBaseline: textLabel[i].alignment,
             getColor: textLabel[i].color,

diff --git a/src/localization/src/translations/ca.ts b/src/localization/src/translations/ca.ts
@@ -52,6 +52,7 @@ export default {
       label: 'etiqueta',
       labelWithId: 'Etiqueta {labelId}',
       fontSize: 'Mida de la font',
+      fontWeight: 'Pes de la font',
       fontColor: 'Color de la font',
       textAnchor: 'Àncora del text',
       alignment: 'Alineació',

diff --git a/src/localization/src/translations/cn.ts b/src/localization/src/translations/cn.ts
@@ -51,6 +51,7 @@ export default {
       label: '标签',
       labelWithId: '标签 {labelId}',
       fontSize: '字体大小',
+      fontWeight: '字体粗细',
       fontColor: '字体颜色',
       textAnchor: '文本锚',
       alignment: '对齐方式',

diff --git a/src/localization/src/translations/en.ts b/src/localization/src/translations/en.ts
@@ -53,6 +53,7 @@ export default {
       label: 'label',
       labelWithId: 'Label {labelId}',
       fontSize: 'Font size',
+      fontWeight: 'Font weight',
       fontColor: 'Font color',
       backgroundColor: 'Background color',
       textAnchor: 'Text anchor',
@@ -440,7 +441,7 @@ ${'```json'}
 ${'```'}
 
 ### 2. Create polygon from a Geometry column in Csv table
-Geometries (Polygons, Points, LindStrings etc) can be embedded into CSV as a \`GeoJSON\` or \`WKT\` formatted string. 
+Geometries (Polygons, Points, LindStrings etc) can be embedded into CSV as a \`GeoJSON\` or \`WKT\` formatted string.
 
 #### 2.1 \`GeoJSON\` string
 Example data.csv with \`GeoJSON\` string
@@ -451,7 +452,7 @@ ${'```'}
 
 #### 2.2 \`WKT\` string
 Example data.csv with \`WKT\` string
-[The Well-Known Text (WKT)](https://dev.mysql.com/doc/refman/5.7/en/gis-data-formats.html#gis-wkt-format) representation of geometry values is designed for exchanging geometry data in ASCII form. 
+[The Well-Known Text (WKT)](https://dev.mysql.com/doc/refman/5.7/en/gis-data-formats.html#gis-wkt-format) representation of geometry values is designed for exchanging geometry data in ASCII form.
 
 Example data.csv with WKT
 ${'```txt'}

diff --git a/src/localization/src/translations/es.ts b/src/localization/src/translations/es.ts
@@ -52,6 +52,7 @@ export default {
       label: 'etiqueta',
       labelWithId: 'Etiqueta {labelId}',
       fontSize: 'Tamaño de fuente',
+      fontWeight: 'Peso de fuente',
       fontColor: 'Color de fuente',
       textAnchor: 'Anclaje del texto',
       alignment: 'Alineación',

diff --git a/src/localization/src/translations/fi.ts b/src/localization/src/translations/fi.ts
@@ -51,6 +51,7 @@ export default {
       label: 'Nimiö',
       labelWithId: 'Nimiö {labelId}',
       fontSize: 'Fontin koko',
+      fontWeight: 'Fontin paino',
       fontColor: 'Fontin väri',
       textAnchor: 'Tekstin ankkuri',
       alignment: 'Sijoittelu',

diff --git a/src/localization/src/translations/ja.ts b/src/localization/src/translations/ja.ts
@@ -52,6 +52,7 @@ export default {
       label: 'ラベル',
       labelWithId: 'ラベル {labelId}',
       fontSize: '文字サイズ',
+      fontWeight: 'フォントの太さ',
       fontColor: '文字色',
       textAnchor: '文字左右',
       alignment: '文字上下',

diff --git a/src/localization/src/translations/pt.ts b/src/localization/src/translations/pt.ts
@@ -51,6 +51,7 @@ export default {
       label: 'Rótulo',
       labelWithId: 'Rótulo {labelId}',
       fontSize: 'Tamanho da fonte',
+      fontWeight: 'Peso da fonte',
       fontColor: 'Cor da fonte',
       textAnchor: 'Âncora do texto',
       alignment: 'Alinhamento',

diff --git a/src/localization/src/translations/ru.ts b/src/localization/src/translations/ru.ts
@@ -51,6 +51,7 @@ export default {
       label: 'Ярлык',
       labelWithId: 'Ярлык {labelId}',
       fontSize: 'Размер шрифта',
+      fontWeight: 'Tолщина шрифта',
       fontColor: 'Цвет шрифта',
       textAnchor: 'Анкор текста',
       alignment: 'Положение',

diff --git a/src/types/layers.d.ts b/src/types/layers.d.ts
@@ -135,6 +135,7 @@ export type LayerTextLabel = {
   color: RGBColor;
   background: boolean;
   size: number;
+  weight: number;
   offset: [number, number];
   anchor: string;
   alignment: string;
@@ -324,6 +325,7 @@ export type TextConfigNumber = {
 
 export type LayerTextConfig = {
   fontSize: TextConfigNumber;
+  fontWeight: TextConfigNumber;
   outlineWidth: TextConfigNumber;
   textAnchor: TextConfigSelect;
   textAlignment: TextConfigSelect;