@mwater/visualization 5.6.0 → 5.6.1

package/lib/maps/SwitchableTileUrlLayer.js

@@ -26,15 +26,6 @@ class SwitchableTileUrlLayer extends Layer_1.default {
         }
         return option.tileUrl || null;
     }
-    /** Gets the utf grid url for definition type "TileUrl" */
-    getUtfGridUrl(design, filters) {
-        // Find active option
-        const option = design.options.find((d) => d.id === design.activeOption);
-        if (!option) {
-            return null;
-        }
-        return option.utfGridUrl || null;
-    }
     getLegend(options) {
         const { design, name } = options;
         // Find active option

package/lib/maps/TileUrlLayer.d.ts

@@ -16,7 +16,6 @@ export interface TileUrlLayerDesign {
 export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
     getLayerDefinitionType(): "TileUrl";
     getTileUrl(design: any, filters: any): any;
-    getUtfGridUrl(design: any, filters: any): null;
     getMinZoom(design: any): any;
     getMaxZoom(design: any): any;
     isEditable(): boolean;

package/lib/maps/TileUrlLayer.js

@@ -18,7 +18,6 @@ Design is:
   legendUrl:
 */
 class TileUrlLayer extends Layer_1.default {
-    // Gets the type of layer definition ("JsonQLCss"/"TileUrl")
     getLayerDefinitionType() {
         return "TileUrl";
     }
@@ -26,10 +25,6 @@ class TileUrlLayer extends Layer_1.default {
     getTileUrl(design, filters) {
         return design.tileUrl;
     }
-    // Gets the utf grid url for definition type "TileUrl"
-    getUtfGridUrl(design, filters) {
-        return null;
-    }
     // Get min and max zoom levels
     getMinZoom(design) {
         return design.minZoom;

package/lib/maps/VectorMapViewComponent.js

@@ -67,7 +67,18 @@ function VectorMapViewComponent(props) {
     // Locale to use
     const locale = props.locale || props.design.locale || "en";
     // Translate function to use 
-    const translate = props.translate || ((input) => input);
+    const translate = (0, react_1.useCallback)((input) => {
+        // Use passed in translate function if present
+        if (props.translate) {
+            return props.translate(input);
+        }
+        // If locale is the same as the design locale, don't translate
+        if (locale === props.design.locale) {
+            return input;
+        }
+        // Otherwise, use translation from design
+        return props.design.translations?.[locale]?.[input] ?? input;
+    }, [props.translate, props.design.translations, props.design.locale, locale]);
     // Last feature that mouse entered
     const lastFeature = (0, react_2.useRef)();
     // Load map

package/lib/maps/vectorMaps.d.ts

@@ -1,15 +1,14 @@
-import { Map, LngLatBoundsLike } from "maplibre-gl";
+import maplibregl, { Map, LngLatBoundsLike } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./VectorMapViewComponent.css";
 import React from "react";
+export { default as maplibregl } from "maplibre-gl";
 export declare function setPrintingModeEnabled(val: boolean): void;
 /** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
  * Maps will fall back to leaflet if the key is not set or if set to ""
  */
 export declare function setMapTilerApiKey(key: string): void;
 export declare function getMapTilerApiKey(): string;
-/** Check if vector maps are enabled by setting API key */
-export declare function areVectorMapsEnabled(): boolean;
 export type BaseLayer = "bing_road" | "bing_aerial" | "cartodb_positron" | "cartodb_dark_matter" | "blank";
 /** Loads a vector map, refreshing the WebGL context as needed */
 export declare function useVectorMap(options: {
@@ -19,7 +18,7 @@ export declare function useVectorMap(options: {
     dragPan?: boolean;
     touchZoomRotate?: boolean;
     padding?: number;
-}): Map | undefined;
+}): maplibregl.Map | undefined;
 /** Sets cursor as pointer when over any layers with the specified ids */
 export declare function useHoverCursor(map: maplibregl.Map | undefined, layerIds: string[]): void;
 /** Apply user style to a map with base style */
@@ -30,9 +29,9 @@ export declare function useStyleMap(options: {
     userStyle: maplibregl.StyleSpecification | null | undefined;
 }): void;
 /** Loads a base style for the map */
-export declare function useBaseStyle(baseLayer: BaseLayer): import("maplibre-gl").StyleSpecification | null;
+export declare function useBaseStyle(baseLayer: BaseLayer): maplibregl.StyleSpecification | null;
 /** Combines a base style and a user style */
-export declare function mergeBaseAndUserStyle(baseStyle: maplibregl.StyleSpecification | null | undefined, userStyle: maplibregl.StyleSpecification | null | undefined, baseLayerOpacity?: number | null): import("maplibre-gl").StyleSpecification | null;
+export declare function mergeBaseAndUserStyle(baseStyle: maplibregl.StyleSpecification | null | undefined, userStyle: maplibregl.StyleSpecification | null | undefined, baseLayerOpacity?: number | null): maplibregl.StyleSpecification | null;
 export declare function AttributionControl(props: {
     baseLayer: BaseLayer;
     extraText?: string;

package/lib/maps/vectorMaps.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.maplibregl = void 0;
 exports.setPrintingModeEnabled = setPrintingModeEnabled;
 exports.setMapTilerApiKey = setMapTilerApiKey;
 exports.getMapTilerApiKey = getMapTilerApiKey;
-exports.areVectorMapsEnabled = areVectorMapsEnabled;
 exports.useVectorMap = useVectorMap;
 exports.useHoverCursor = useHoverCursor;
 exports.useStyleMap = useStyleMap;
@@ -21,6 +21,9 @@ const mapSymbols_1 = require("./mapSymbols");
 require("maplibre-gl/dist/maplibre-gl.css");
 require("./VectorMapViewComponent.css");
 const react_2 = __importDefault(require("react"));
+// Re-export maplibregl for consumers
+var maplibre_gl_2 = require("maplibre-gl");
+Object.defineProperty(exports, "maplibregl", { enumerable: true, get: function () { return __importDefault(maplibre_gl_2).default; } });
 /** Set to true to enable printing by preserving the drawing buffer */
 let printingModeEnabled = false;
 function setPrintingModeEnabled(val) {
@@ -37,10 +40,6 @@ function setMapTilerApiKey(key) {
 function getMapTilerApiKey() {
     return mapTilerApiKey;
 }
-/** Check if vector maps are enabled by setting API key */
-function areVectorMapsEnabled() {
-    return mapTilerApiKey !== "";
-}
 /** Loads a vector map, refreshing the WebGL context as needed */
 function useVectorMap(options) {
     const { divRef, bounds, scrollZoom, dragPan, touchZoomRotate, padding } = options;
@@ -95,7 +94,10 @@ function useVectorMap(options) {
                     [-179.9, -85], // Southwest coordinates
                     [179.9, 85] // Northeast coordinates
                 ],
-                preserveDrawingBuffer: printingModeEnabled
+                // In maplibre-gl v5+, WebGL context options must be in canvasContextAttributes
+                canvasContextAttributes: {
+                    preserveDrawingBuffer: printingModeEnabled
+                }
             };
             if (bounds) {
                 mapConstructorOptions.bounds = bounds;
@@ -124,10 +126,12 @@ function useVectorMap(options) {
                 // Check if known
                 const mapSymbol = (0, mapSymbols_1.getMapSymbols)().find((s) => s.value == ev.id);
                 if (mapSymbol) {
-                    m.loadImage(mapSymbol.url, (err, image) => {
-                        if (image && !m.hasImage(mapSymbol.value)) {
-                            m.addImage(mapSymbol.value, image, { sdf: true });
+                    m.loadImage(mapSymbol.url).then((response) => {
+                        if (response && response.data && !m.hasImage(mapSymbol.value)) {
+                            m.addImage(mapSymbol.value, response.data, { sdf: true });
                         }
+                    }).catch((err) => {
+                        console.error("Error loading map symbol:", err);
                     });
                 }
             });

package/lib/widgets/MapWidget.js

@@ -91,7 +91,8 @@ class MapWidgetComponent extends react_1.default.Component {
         // Require here to prevent server require problems
         const MapDesignerComponent = require("../maps/MapDesignerComponent").default;
         // Create editor
-        const editor = react_1.default.createElement(MapDesignerComponent, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.state.editDesign, onDesignChange: this.handleEditDesignChange, filters: this.props.filters });
+        // Note: enableTranslations is false because translations are managed at the dashboard level
+        const editor = react_1.default.createElement(MapDesignerComponent, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.state.editDesign, onDesignChange: this.handleEditDesignChange, filters: this.props.filters, enableTranslations: false });
         // Create map (maxing out at half of width of screen)
         const width = Math.min(document.body.clientWidth / 2, this.props.width || 0);
         const height = ((this.props.height || 0) * width) / (this.props.width || 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.6.0",
+  "version": "5.6.1",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
@@ -45,7 +45,7 @@
     "leaflet": "^1.8.0",
     "lodash": "^3.1.0",
     "lru-cache": "^6.0.0",
-    "maplibre-gl": "^3.3.1",
+    "maplibre-gl": "^5.16.0",
     "markdown-it": "^12.0.4",
     "moment": "^2.29.1",
     "p-queue": "^8.0.1",

package/src/ColorComponent.tsx

@@ -51,8 +51,8 @@ export default class ColorComponent extends React.Component<ColorComponentProps,
 
     const popupPosition: CSSProperties = {
       position: "fixed",
-      top: `${rect.bottom + window.scrollY}px`,
-      left: `${rect.left + window.scrollX}px`,
+      top: `${rect.bottom}px`,
+      left: `${rect.left}px`,
       zIndex: 1070,
       backgroundColor: "white",
       border: "solid 1px #DDD",

package/src/TranslationsTabComponent.tsx

@@ -0,0 +1,429 @@
+import _ from "lodash"
+import React, { useMemo, useRef, useState } from "react"
+import { languages } from "./languages"
+import { default as ReactSelect } from "react-select"
+import { LocalizedString } from "@mwater/expressions"
+import produce from "immer"
+import FileSaver from "file-saver"
+import * as localizeUtils from "ez-localize/lib/utils"
+import { canAutoTranslate, translateStrings } from "./autotranslate"
+import { FormGroup } from "@mwater/react-library/lib/bootstrap"
+
+export interface TranslationsTabComponentProps {
+  /** Base locale of the design (e.g. "en") */
+  locale: string
+
+  /** Other locales the design is translated into */
+  otherLocales: string[]
+
+  /** Translation mappings per locale. Maps locale to { originalString: translatedString } */
+  translations: { [locale: string]: { [key: string]: string } }
+
+  /** All strings that need translation */
+  translatableStrings: string[]
+
+  /** Called when base locale changes */
+  onLocaleChange: (locale: string) => void
+
+  /** Called when other locales change */
+  onOtherLocalesChange: (locales: string[]) => void
+
+  /** Called when translations change */
+  onTranslationsChange: (translations: { [locale: string]: { [key: string]: string } }) => void
+
+  /** Custom filename for download. Defaults to "Translations.xlsx" */
+  downloadFilename?: string
+
+  /** Custom description for base language section */
+  baseLanguageDescription?: string
+}
+
+/**
+ * Reusable translations tab component for managing localization of designs
+ * (dashboards, maps, etc.) that have locale, otherLocales, and translations properties.
+ */
+export function TranslationsTabComponent(props: TranslationsTabComponentProps) {
+  const {
+    locale,
+    otherLocales,
+    translations,
+    translatableStrings,
+    onLocaleChange,
+    onOtherLocalesChange,
+    onTranslationsChange,
+    downloadFilename = "Translations.xlsx",
+    baseLanguageDescription = T`This is the base language.`
+  } = props
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const localeOptions = useMemo(() => {
+    return _.sortBy(
+      _.map(languages, (language) => ({
+        value: language.code,
+        label: `${language.en} (${language.name})`
+      })),
+      'label'
+    )
+  }, [])
+
+  // Get available languages that aren't already selected
+  const availableLocaleOptions = useMemo(() => {
+    const selectedLocales = new Set([locale, ...otherLocales])
+    return localeOptions.filter(opt => !selectedLocales.has(opt.value))
+  }, [localeOptions, locale, otherLocales])
+
+  // Calculate percentage of strings translated for each locale
+  const translationPercentages = useMemo(() => {
+    const percentages: { [locale: string]: number } = {}
+    const totalStrings = translatableStrings.length
+
+    for (const loc of otherLocales) {
+      const translatedCount = translatableStrings.filter(str =>
+        translations?.[loc]?.[str] != null
+      ).length
+
+      // Round down to nearest percent
+      percentages[loc] = (totalStrings > 0) ? Math.floor((translatedCount / totalStrings) * 100) : 0
+    }
+
+    return percentages
+  }, [translations, otherLocales, translatableStrings])
+
+  const handleAddLocale = (selectedLocale: any) => {
+    const newOtherLocales = [...otherLocales, selectedLocale.value]
+    onOtherLocalesChange(newOtherLocales)
+    // Note: We don't initialize translations here because calling both callbacks
+    // in sequence would cause a race condition where the second overwrites the first.
+    // The code handles undefined translations via optional chaining.
+  }
+
+  const handleRemoveLocale = (localeToRemove: string) => {
+    const newOtherLocales = otherLocales.filter(loc => loc !== localeToRemove)
+    onOtherLocalesChange(newOtherLocales)
+    // Note: We don't remove translations here for the same reason as above.
+    // Orphaned translations are harmless and will be cleaned up on next save.
+  }
+
+  // Convert translations to LocalizedString format
+  const getLocalizedStrings = (): LocalizedString[] => {
+    const localizedStrings: LocalizedString[] = []
+    for (const str of translatableStrings) {
+      const localizedString: LocalizedString = { _base: locale }
+      localizedString[locale] = str
+
+      // Only add translations for other locales if they exist
+      for (const otherLocale of otherLocales) {
+        if (translations?.[otherLocale]?.[str]) {
+          localizedString[otherLocale] = translations[otherLocale][str]
+        }
+      }
+
+      localizedStrings.push(localizedString)
+    }
+
+    return localizedStrings
+  }
+
+  // Convert LocalizedString format back to translations
+  const updateFromLocalizedStrings = (localizedStrings: LocalizedString[]) => {
+    const newTranslations: { [locale: string]: { [key: string]: string } } = {}
+
+    // Initialize translations object
+    for (const loc of otherLocales) {
+      newTranslations[loc] = {}
+    }
+
+    // Add all translations
+    for (const str of localizedStrings) {
+      for (const loc of otherLocales) {
+        if (str[loc]) {
+          newTranslations[loc][str[str._base]] = str[loc]
+        }
+      }
+    }
+
+    return newTranslations
+  }
+
+  const handleDownload = () => {
+    // Get strings in LocalizedString format
+    const strings = getLocalizedStrings()
+
+    // Create xlsx base64 using all locales (primary + other)
+    const locales = [{ code: locale, name: locale }]
+      .concat(otherLocales.map(code => ({ code, name: code })))
+
+    const base64 = localizeUtils.exportXlsx(locales, strings)
+
+    // Download
+    FileSaver.saveAs(
+      b64toBlob(base64, "application/octet-stream"),
+      downloadFilename
+    )
+  }
+
+  const handleUpload = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleUploadChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const reader = new FileReader()
+
+    reader.onload = (file) => {
+      if (!file.target?.result) {
+        return
+      }
+
+      const base64 = (file.target.result as string).split(",")[1]
+
+      try {
+        // Create locales array for import
+        const locales = [{ code: locale, name: locale }]
+          .concat(otherLocales.map(code => ({ code, name: code })))
+
+        // Import updates
+        const updates = localizeUtils.importXlsx(locales, base64)
+
+        // If nothing localized
+        if (updates.length === 0) {
+          alert(T`No translation data found in file`)
+          return
+        }
+
+        // Convert back to translations format and update
+        const newTranslations = updateFromLocalizedStrings(updates)
+        onTranslationsChange(newTranslations)
+
+        alert(T`${updates.length} translations applied`)
+      } catch (error) {
+        console.error("Invalid xlsx file:", error)
+        alert(T`Invalid xlsx file`)
+      }
+    }
+
+    if (evt.target.files?.[0]) {
+      reader.readAsDataURL(evt.target.files[0])
+    }
+  }
+
+  const handleTranslationsChangeForLocale = (loc: string, newLocaleTranslations: { [key: string]: string }) => {
+    const newTranslations = { ...translations }
+    newTranslations[loc] = newLocaleTranslations
+    onTranslationsChange(newTranslations)
+  }
+
+  return (
+    <>
+      <FormGroup
+        label={T`Base Language`}
+        labelMuted={true}
+        help={baseLanguageDescription}
+      >
+        <ReactSelect
+          value={_.findWhere(localeOptions, { value: locale }) || null}
+          options={localeOptions}
+          onChange={(selected: any) => onLocaleChange(selected.value)}
+        />
+      </FormGroup>
+      <FormGroup
+        label={T`Additional Languages`}
+        labelMuted={true}
+        help={T`Add languages to translate into`}
+      >
+        {/* Show current additional languages */}
+        <table>
+          <tbody>
+            {otherLocales.map(loc => {
+              const localeOption = _.findWhere(localeOptions, { value: loc })
+              if (!localeOption) {
+                return null
+              }
+
+              return (
+                <tr key={loc}>
+                  <td style={{ paddingRight: 10 }}>{localeOption.label}</td>
+                  <td className={translationPercentages[loc] === 100 ? "text-success" : "text-warning"} style={{ textAlign: "right" }}>
+                    {T`${translationPercentages[loc]}% translated`}
+                  </td>
+                  <td>
+                    {translationPercentages[loc] < 100 && (
+                      <AutoTranslateLink
+                        locale={loc}
+                        baseLocale={locale}
+                        strings={translatableStrings}
+                        existingTranslations={translations?.[loc] || {}}
+                        onTranslationsChange={(newLocaleTranslations) => handleTranslationsChangeForLocale(loc, newLocaleTranslations)}
+                      />
+                    )}
+                  </td>
+                  <td>
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-link"
+                      onClick={() => handleRemoveLocale(loc)}
+                    >
+                      <i className="fa fa-times" />
+                    </button>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+
+        {/* Add new language dropdown */}
+        {availableLocaleOptions.length > 0 && (
+          <div className="mt-3">
+            <ReactSelect
+              value={null}
+              options={availableLocaleOptions}
+              onChange={handleAddLocale}
+              placeholder={T`Add language...`}
+            />
+          </div>
+        )}
+      </FormGroup>
+
+      {/* Add translation management section if there are additional languages */}
+      {otherLocales.length > 0 && (
+        <>
+          <FormGroup
+            label={T`Manage Translations`}
+            labelMuted={true}
+            help={T`Download and re-upload an Excel spreadsheet of text to translate:`}
+          >
+            <p>{T`Download and re-upload an Excel spreadsheet of text to translate:`}</p>
+
+            <div>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={handleDownload}
+              >
+                <i className="fas fa-download me-2" />{T`Download XLSX`}
+              </button>
+            </div>
+            <div className="text-muted mt-2">
+              {T`This creates a spreadsheet that can be sent to a translator. Please do not change the first column or first row of the spreadsheet.`}
+            </div>
+
+            <br />
+            <p>
+              {T`Once translation is complete, upload the file back using the button below:`}
+            </p>
+            <div>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={handleUpload}
+              >
+                <i className="fas fa-upload me-2" />{T`Upload Translated XLSX`}
+              </button>
+            </div>
+            <input
+              type="file"
+              ref={fileInputRef}
+              style={{ display: "none" }}
+              onChange={handleUploadChange}
+              accept=".xlsx"
+            />
+          </FormGroup>
+        </>
+      )}
+    </>
+  )
+}
+
+interface AutoTranslateLinkProps {
+  locale: string
+  baseLocale: string
+  strings: string[]
+  existingTranslations: { [key: string]: string }
+  onTranslationsChange: (newTranslations: { [key: string]: string }) => void
+}
+
+/**
+ * Button that auto-translates untranslated strings using the translation service
+ */
+function AutoTranslateLink(props: AutoTranslateLinkProps) {
+  const { locale, baseLocale, strings, existingTranslations, onTranslationsChange } = props
+  const [isTranslating, setIsTranslating] = useState(false)
+
+  const untranslatedStrings = useMemo(() => {
+    return strings.filter(str => !existingTranslations[str])
+  }, [strings, existingTranslations])
+
+  const handleClick = async () => {
+    if (isTranslating) {
+      return
+    }
+
+    setIsTranslating(true)
+    try {
+      const translatedStrings = await translateStrings(untranslatedStrings, baseLocale, locale)
+
+      const newTranslations = { ...existingTranslations }
+      for (let i = 0; i < untranslatedStrings.length; i++) {
+        newTranslations[untranslatedStrings[i]] = translatedStrings[i]
+      }
+
+      onTranslationsChange(newTranslations)
+    } catch (error) {
+      console.error("Error translating strings:", error)
+      alert(T`Error translating strings`)
+    } finally {
+      setIsTranslating(false)
+    }
+  }
+
+  if (untranslatedStrings.length === 0) {
+    return null
+  }
+
+  if (!canAutoTranslate(locale)) {
+    return null
+  }
+
+  return (
+    <button
+      type="button"
+      className="btn btn-sm btn-link"
+      onClick={handleClick}
+      disabled={isTranslating}
+      style={{ marginLeft: 5, padding: "0 5px" }}
+    >
+      {isTranslating ? (
+        <span>
+          <i className="fa fa-spinner fa-spin" />
+          {" "}
+          {T`Translating...`}
+        </span>
+      ) : (
+        T`Autotranslate`
+      )}
+    </button>
+  )
+}
+
+/**
+ * Helper function for base64 to blob conversion
+ */
+function b64toBlob(b64Data: string, contentType: string = "", sliceSize: number = 512) {
+  const byteCharacters = atob(b64Data)
+  const byteArrays = []
+
+  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+    const slice = byteCharacters.slice(offset, offset + sliceSize)
+    const byteNumbers = new Array(slice.length)
+
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i)
+    }
+
+    const byteArray = new Uint8Array(byteNumbers)
+    byteArrays.push(byteArray)
+  }
+
+  return new Blob(byteArrays, { type: contentType })
+}

package/src/dashboards/DashboardComponent.tsx

@@ -289,7 +289,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
               {this.state.locale}
             </a>
             <ul className="dropdown-menu dropdown-menu-end">
-              {[this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => 
+              {[...new Set([this.props.design.locale || "en", ...this.props.design.otherLocales])].map(locale => 
                 <li key={locale}>
                   <a
                     className="dropdown-item"

package/src/dashboards/ServerDashboardDataSource.ts

@@ -318,25 +318,6 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
     return this.createUrl(filters, "png")
   }
 
-  // Get the url for the interactivity tiles with the specified filters applied
-  // Called with (design, filters) where design is the layer design and filters are filters to apply. Returns URL
-  getUtfGridUrl(design: any, filters: JsonQLFilter[]) {
-    // Handle special cases
-    if (this.options.layerView.type === "MWaterServer") {
-      return this.createLegacyUrl(this.options.layerView.design, "grid.json", filters)
-    }
-
-    // Create layer
-    const layer = LayerFactory.createLayer(this.options.layerView.type)
-
-    // If layer has tiles url directly available
-    if (layer.getLayerDefinitionType() === "TileUrl") {
-      return layer.getUtfGridUrl(this.options.layerView.design, filters)
-    }
-
-    return this.createUrl(filters, "grid.json")
-  }
-
   /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
    * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
    */