Add scheme type options for vector/raster tile (#943)

## Launch Checklist

<!-- Thanks for the PR! Feel free to add or remove items from the
checklist. -->


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


![image](https://github.com/user-attachments/assets/39c275dc-b526-426b-9d46-db1f1635d7ee)

Author: huanglii

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### ✨ Features and improvements
 - Add german translation
 - Use same version number for web and desktop versions
+- Add scheme type options for vector/raster tile
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

cypress/e2e/modals.cy.ts

@@ -61,9 +61,27 @@ describe("modals", () => {
   });
 
   describe("sources", () => {
+    beforeEach(() => {
+      when.setStyle("layer");
+      when.click("nav:sources");
+    });
+
     it("active sources");
     it("public source");
-    it("add new source");
+
+    it("add new source", () => {
+      let sourceId = "n1z2v3r";
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "tile_vector");
+      when.select("modal:sources.add.scheme_type", "tms");
+      when.click("modal:sources.add.add_source");
+      when.wait(200);
+      then(
+        get.styleFromLocalStorage().then((style) => style.sources[sourceId])
+      ).shouldInclude({
+        scheme: "tms",
+      });
+    });
   });
 
   describe("inspect", () => {

src/components/ModalSources.tsx

@@ -42,15 +42,15 @@ class PublicSource extends React.Component<PublicSourceProps> {
 
 function editorMode(source: SourceSpecification) {
   if(source.type === 'raster') {
-    if(source.tiles) return 'tilexyz_raster'
+    if(source.tiles) return 'tile_raster'
     return 'tilejson_raster'
   }
   if(source.type === 'raster-dem') {
     if(source.tiles) return 'tilexyz_raster-dem'
     return 'tilejson_raster-dem'
   }
   if(source.type === 'vector') {
-    if(source.tiles) return 'tilexyz_vector'
+    if(source.tiles) return 'tile_vector'
     return 'tilejson_vector'
   }
   if(source.type === 'geojson') {
@@ -142,21 +142,23 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
       type: 'vector',
       url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
     }
-    case 'tilexyz_vector': return {
+    case 'tile_vector': return {
       type: 'vector',
       tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
       minzoom: (source as VectorSourceSpecification).minzoom || 0,
-      maxzoom: (source as VectorSourceSpecification).maxzoom || 14
+      maxzoom: (source as VectorSourceSpecification).maxzoom || 14,
+      scheme: (source as VectorSourceSpecification).scheme || 'xyz'
     }
     case 'tilejson_raster': return {
       type: 'raster',
       url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
     }
-    case 'tilexyz_raster': return {
+    case 'tile_raster': return {
       type: 'raster',
       tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
       minzoom: (source as RasterSourceSpecification).minzoom || 0,
-      maxzoom: (source as RasterSourceSpecification).maxzoom || 14
+      maxzoom: (source as RasterSourceSpecification).maxzoom || 14,
+      scheme: (source as RasterSourceSpecification).scheme || 'xyz'
     }
     case 'tilejson_raster-dem': return {
       type: 'raster-dem',
@@ -222,6 +224,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
         fieldSpec={{doc: t("Unique ID that identifies the source and is used in the layer to reference the source.")}}
         value={this.state.sourceId}
         onChange={(v: string) => this.setState({ sourceId: v})}
+        data-wd-key="modal:sources.add.source_id"
       />
       <FieldSelect
         label={t("Source Type")}
@@ -230,16 +233,17 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
           ['geojson_json', t('GeoJSON (JSON)')],
           ['geojson_url', t('GeoJSON (URL)')],
           ['tilejson_vector', t('Vector (TileJSON URL)')],
-          ['tilexyz_vector', t('Vector (XYZ URLs)')],
+          ['tile_vector', t('Vector (Tile URLs)')],
           ['tilejson_raster', t('Raster (TileJSON URL)')],
-          ['tilexyz_raster', t('Raster (XYZ URL)')],
+          ['tile_raster', t('Raster (Tile URLs)')],
           ['tilejson_raster-dem', t('Raster DEM (TileJSON URL)')],
           ['tilexyz_raster-dem', t('Raster DEM (XYZ URLs)')],
           ['image', t('Image')],
           ['video', t('Video')],
         ]}
         onChange={mode => this.setState({mode: mode as EditorMode, source: this.defaultSource(mode as EditorMode)})}
         value={this.state.mode as string}
+        data-wd-key="modal:sources.add.source_type"
       />
       <ModalSourcesTypeEditor
         onChange={this.onChangeSource}
@@ -249,6 +253,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
       <InputButton
         className="maputnik-add-source-button"
         onClick={this.onAdd}
+        data-wd-key="modal:sources.add.add_source"
       >
         {t("Add Source")}
       </InputButton>

src/components/ModalSourcesTypeEditor.tsx

@@ -11,7 +11,7 @@ import FieldCheckbox from './FieldCheckbox'
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { TFunction } from 'i18next'
 
-export type EditorMode = "video" | "image" | "tilejson_vector" | "tilexyz_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "tilexyz_vector" | "geojson_url" | "geojson_json" | null;
+export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "tile_vector" | "geojson_url" | "geojson_json" | null;
 
 type TileJSONSourceEditorProps = {
   source: {
@@ -45,6 +45,7 @@ type TileURLSourceEditorProps = {
     tiles: string[]
     minzoom: number
     maxzoom: number
+    scheme: 'xyz' | 'tms'
   }
   onChange(...args: unknown[]): unknown
   children?: React.ReactNode
@@ -73,6 +74,20 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
     const t = this.props.t;
     return <div>
       {this.renderTileUrls()}
+      <FieldSelect
+        label={t("Scheme Type")}
+        fieldSpec={latest.source_vector.scheme}
+        options={[
+          ['xyz', 'xyz (Slippy map tilenames scheme)'],
+          ['tms', 'tms (OSGeo spec scheme)'],
+        ]}
+        onChange={scheme => this.props.onChange({
+          ...this.props.source,
+          scheme
+        })}
+        value={this.props.source.scheme}
+        data-wd-key="modal:sources.add.scheme_type"
+      />
       <FieldNumber
         label={t("Min Zoom")}
         fieldSpec={latest.source_vector.minzoom}
@@ -291,9 +306,9 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
     case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
     case 'geojson_json': return <GeoJSONSourceFieldJsonEditor {...commonProps} />
     case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
-    case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
+    case 'tile_vector': return <TileURLSourceEditor {...commonProps} />
     case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
-    case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
+    case 'tile_raster': return <TileURLSourceEditor {...commonProps} />
     case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
     case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
       <FieldSelect

src/locales/de/translation.json

@@ -147,9 +147,9 @@
   "GeoJSON (JSON)": "GeoJSON (JSON)",
   "GeoJSON (URL)": "GeoJSON (URL)",
   "Vector (TileJSON URL)": "Vektor (TileJSON URL)",
-  "Vector (XYZ URLs)": "Vektor (XYZ URLs)",
+  "Vector (Tile URLs)": "Vektor (Tile URLs)",
   "Raster (TileJSON URL)": "Raster (TileJSON URL)",
-  "Raster (XYZ URL)": "Raster (XYZ URL)",
+  "Raster (Tile URLs)": "Raster (Tile URLs)",
   "Raster DEM (TileJSON URL)": "Raster DEM (TileJSON URL)",
   "Raster DEM (XYZ URLs)": "Raster DEM (XYZ URLs)",
   "Image": "Bild",

src/locales/fr/translation.json

@@ -147,9 +147,9 @@
   "GeoJSON (JSON)": "GeoJSON (JSON)",
   "GeoJSON (URL)": "GeoJSON (URL)",
   "Vector (TileJSON URL)": "Vecteur (URL TileJSON)",
-  "Vector (XYZ URLs)": "Vecteur (URLs XYZ)",
+  "Vector (Tile URLs)": "Vecteur (URLs Tile)",
   "Raster (TileJSON URL)": "Raster (URL TileJSON)",
-  "Raster (XYZ URL)": "Raster (URL XYZ)",
+  "Raster (Tile URLs)": "Raster (URLs Tile)",
   "Raster DEM (TileJSON URL)": "Raster DEM (URL TileJSON)",
   "Raster DEM (XYZ URLs)": "Raster DEM (URLs XYZ)",
   "Image": "Image",

src/locales/he/translation.json

@@ -146,9 +146,9 @@
   "GeoJSON (JSON)": "GeoJSON (JSON)",
   "GeoJSON (URL)": "GeoJSON (URL)",
   "Vector (TileJSON URL)": "Vector (TileJSON URL)",
-  "Vector (XYZ URLs)": "Vector (XYZ URLs)",
+  "Vector (Tile URLs)": "Vector (Tile URLs)",
   "Raster (TileJSON URL)": "Raster (TileJSON URL)",
-  "Raster (XYZ URL)": "Raster (XYZ URL)",
+  "Raster (Tile URLs)": "Raster (Tile URLs)",
   "Raster DEM (TileJSON URL)": "Raster DEM (TileJSON URL)",
   "Raster DEM (XYZ URLs)": "Raster DEM (XYZ URLs)",
   "Image": "תמונה",

src/locales/ja/translation.json

@@ -146,9 +146,9 @@
   "GeoJSON (JSON)": "GeoJSON (JSON)",
   "GeoJSON (URL)": "GeoJSON (URL)",
   "Vector (TileJSON URL)": "ベクトル (TileJSON URL)",
-  "Vector (XYZ URLs)": "ベクトル (XYZ URL)",
+  "Vector (Tile URLs)": "ベクトル (Tile URLs)",
   "Raster (TileJSON URL)": "ラスタ (TileJSON URL)",
-  "Raster (XYZ URL)": "ラスタ (XYZ URL)",
+  "Raster (Tile URLs)": "ラスタ (Tile URLs)",
   "Raster DEM (TileJSON URL)": "ラスタ DEM (TileJSON URL)",
   "Raster DEM (XYZ URLs)": "ラスタ DEM (XYZ URL)",
   "Image": "画像",

src/locales/zh/translation.json

@@ -146,9 +146,9 @@
   "GeoJSON (JSON)": "GeoJSON (JSON格式)",
   "GeoJSON (URL)": "GeoJSON (URL格式)",
   "Vector (TileJSON URL)": "矢量数据 (TileJSON URL)",
-  "Vector (XYZ URLs)": "矢量数据 (XYZ URLs)",
+  "Vector (Tile URLs)": "矢量数据 (Tile URLs)",
   "Raster (TileJSON URL)": "栅格数据 (TileJSON URL)",
-  "Raster (XYZ URL)": "栅格数据 (XYZ URL)",
+  "Raster (Tile URLs)": "栅格数据 (Tile URLs)",
   "Raster DEM (TileJSON URL)": "栅格高程数据 (TileJSON URL)",
   "Raster DEM (XYZ URLs)": "栅格高程数据 (XYZ URLs)",
   "Image": "图像",