Add tileSize field for raster and raster-dem tile sources (#946) (#947)

## Launch Checklist

Add `tileSize` field for raster and raster-dem tile sources. Solves #946


![Untitled](https://github.com/user-attachments/assets/833bf41b-0439-47f3-b9ff-5f289f437725)

### Not in this PR

i18n for `Tile Size`

 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: Harel M <harel.mazor@gmail.com>
Co-authored-by: Keitaroh Kobayashi <keita@kbys.me>
Co-authored-by: Hugues Tavernier <hugues.tavernier@protonmail.com>
Co-authored-by: Joscha <34318751+josxha@users.noreply.github.com>

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Add german translation
 - Use same version number for web and desktop versions
 - Add scheme type options for vector/raster tile
+- Add `tileSize` field for raster and raster-dem tile sources
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

cypress/e2e/modals.cy.ts

@@ -82,6 +82,21 @@ describe("modals", () => {
         scheme: "tms",
       });
     });
+
+    it("add new raster source", () => {
+      let sourceId = "rastertest";
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "tile_raster");
+      when.select("modal:sources.add.scheme_type", "xyz");
+      when.setValue("modal:sources.add.tile_size", "128");
+      when.click("modal:sources.add.add_source");
+      when.wait(200);
+      then(
+        get.styleFromLocalStorage().then((style) => style.sources[sourceId])
+      ).shouldInclude({
+        tileSize: 128,
+      });
+    });
   });
 
   describe("inspect", () => {

src/components/ModalSources.tsx

@@ -158,7 +158,8 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
       tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
       minzoom: (source as RasterSourceSpecification).minzoom || 0,
       maxzoom: (source as RasterSourceSpecification).maxzoom || 14,
-      scheme: (source as RasterSourceSpecification).scheme || 'xyz'
+      scheme: (source as RasterSourceSpecification).scheme || 'xyz',
+      tileSize: (source as RasterSourceSpecification).tileSize || 512,
     }
     case 'tilejson_raster-dem': return {
       type: 'raster-dem',
@@ -168,7 +169,8 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
       type: 'raster-dem',
       tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
       minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
-      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14
+      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14,
+      tileSize: (source as RasterDEMSourceSpecification).tileSize || 512
     }
     case 'image': return {
       type: 'image',

src/components/ModalSourcesTypeEditor.tsx

@@ -308,9 +308,30 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
     case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
     case 'tile_vector': return <TileURLSourceEditor {...commonProps} />
     case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
-    case 'tile_raster': return <TileURLSourceEditor {...commonProps} />
+    case 'tile_raster': return <TileURLSourceEditor {...commonProps}>
+      <FieldNumber
+        label={t("Tile Size")}
+        fieldSpec={latest.source_raster.tileSize}
+        onChange={tileSize => this.props.onChange({
+          ...this.props.source,
+          tileSize: tileSize
+        })}
+        value={this.props.source.tileSize || latest.source_raster.tileSize.default}
+        data-wd-key="modal:sources.add.tile_size"
+      />
+    </TileURLSourceEditor>
     case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
     case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
+      <FieldNumber
+        label={t("Tile Size")}
+        fieldSpec={latest.source_raster_dem.tileSize}
+        onChange={tileSize => this.props.onChange({
+          ...this.props.source,
+          tileSize: tileSize
+        })}
+        value={this.props.source.tileSize || latest.source_raster_dem.tileSize.default}
+        data-wd-key="modal:sources.add.tile_size"
+      />
       <FieldSelect
         label={t("Encoding")}
         fieldSpec={latest.source_raster_dem.encoding}

src/locales/de/translation.json

@@ -163,6 +163,7 @@
   "Add a new source to your style. You can only choose the source type and id at creation time!": "Füge eine neue Quelle zu deinem Stil hinzu. Du kannst den Quellentyp und die ID nur bei der Erstellung auswählen!",
   "TileJSON URL": "TileJSON URL",
   "Tile URL": "Kachel-URL",
+  "Scheme Type": "Schema-Typ",
   "Coord top left": "Koordinate oben links",
   "Coord top right": "Koordinate oben rechts",
   "Coord bottom right": "Koordinate unten rechts",
@@ -172,6 +173,7 @@
   "GeoJSON URL": "GeoJSON URL",
   "GeoJSON": "GeoJSON",
   "Cluster": "Cluster",
+  "Tile Size": "Kachelgröße",
   "Encoding": "Kodierung",
   "Error:": "Fehler:",
   "MapTiler Access Token": "MapTiler Zugriffstoken",

src/locales/fr/translation.json

@@ -163,6 +163,7 @@
   "Add a new source to your style. You can only choose the source type and id at creation time!": "Ajoutez une nouvelle source à votre style. Vous ne pouvez choisir le type et l'ID de la source qu'au moment de la création !",
   "TileJSON URL": "URL TileJSON",
   "Tile URL": "URL de la tuile",
+  "Scheme Type": "Type de schéma",
   "Coord top left": "Coordonnée en haut à gauche",
   "Coord top right": "Coordonnée en haut à droite",
   "Coord bottom right": "Coordonnée en bas à droite",
@@ -172,6 +173,7 @@
   "GeoJSON URL": "URL GeoJSON",
   "GeoJSON": "GeoJSON",
   "Cluster": "Cluster",
+  "Tile Size": "Dimension d'une tuile",
   "Encoding": "Encodage",
   "Error:": "Erreur :",
   "MapTiler Access Token": "Jeton d'accès MapTiler",

src/locales/he/translation.json

@@ -162,6 +162,7 @@
   "Add a new source to your style. You can only choose the source type and id at creation time!": "הוספת מקור לסטייל, ביכולתכם לעשות זאת רק בזמן מסויים",
   "TileJSON URL": "כתובת TileJSON",
   "Tile URL": "כתובת אריחים",
+  "Scheme Type": "סוג סכמה",
   "Coord top left": "מיקום שמאלי עליון",
   "Coord top right": "מיקום ימני עליון",
   "Coord bottom right": "מיקום ימני תחתון",
@@ -171,6 +172,7 @@
   "GeoJSON URL": "כתובת GeoJSON",
   "GeoJSON": "GeoJSON",
   "Cluster": "קיבוץ",
+  "Tile Size": "גודל אריח",
   "Encoding": "קידוד",
   "Error:": "שגיאה",
   "MapTiler Access Token": "MapTiler Access Token",

src/locales/ja/translation.json

@@ -162,6 +162,7 @@
   "Add a new source to your style. You can only choose the source type and id at creation time!": "スタイルに新規ソースを追加します。注意: 作成時にソースタイプとIDのみを選択できます。",
   "TileJSON URL": "TileJSON URL",
   "Tile URL": "タイルURL",
+  "Scheme Type": "スキーマ",
   "Coord top left": "左上座標",
   "Coord top right": "右上座標",
   "Coord bottom right": "右下座標",
@@ -171,6 +172,7 @@
   "GeoJSON URL": "GeoJSON URL",
   "GeoJSON": "GeoJSON",
   "Cluster": "クラスタ",
+  "Tile Size": "タイルサイズ",
   "Encoding": "エンコーディング",
   "Error:": "エラー:",
   "MapTiler Access Token": "MapTiler アクセストークン",

src/locales/zh/translation.json

@@ -162,6 +162,7 @@
   "Add a new source to your style. You can only choose the source type and id at creation time!": "向您的样式添加新源。在创建时，您只能选择源类型和ID！",
   "TileJSON URL": "TileJSON URL",
   "Tile URL": "瓦片URL",
+  "Scheme Type": "__STRING_NOT_TRANSLATED__",
   "Coord top left": "左上角坐标",
   "Coord top right": "右上角坐标",
   "Coord bottom right": "右下角坐标",
@@ -171,6 +172,7 @@
   "GeoJSON URL": "GeoJSON URL",
   "GeoJSON": "GeoJSON",
   "Cluster": "聚合",
+  "Tile Size": "__STRING_NOT_TRANSLATED__",
   "Encoding": "编码",
   "Error:": "错误：",
   "MapTiler Access Token": "MapTiler 访问令牌",