Add scheme type options for vector/raster tile

src/components/ModalSources.tsx

@@ -42,7 +42,7 @@ 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') {
@@ -50,7 +50,7 @@ function editorMode(source: SourceSpecification) {
     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 VectorSourceSpecification).scheme || 'xyz'
     }
     case 'tilejson_raster-dem': return {
       type: 'raster-dem',
@@ -230,9 +232,9 @@ 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')],

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,19 @@ 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}
+      />
       <FieldNumber
         label={t("Min Zoom")}
         fieldSpec={latest.source_vector.minzoom}
@@ -291,9 +305,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