Allow setting of maximum tile limit (#53)

Author: rudokemper

.env.example

@@ -58,6 +58,8 @@ NUXT_PUBLIC_PLANET_API_KEY=your_planet_api_key
 NUXT_PUBLIC_STADIA_API_KEY=your_stadia_api_key
 NUXT_PUBLIC_THUNDERFOREST_API_KEY=your_thunderforest_api_key
 
+NUXT_PUBLIC_MAX_TILES=100000
+
 # ==========================================
 # Azure Storage Message Queue configuration
 # ==========================================

README.md

@@ -33,6 +33,8 @@ For production environments like Azure, input the environmental variables via th
 
 **Mapbox, Planet, Stadia, and Thunderforest API keys and access tokens:** Provide API keys and access tokens to be used across the application for authenticating with map assets. If not provided, the respective map styles will not show in the generate map view.
 
+**Maximum number of tiles:** Provide the maximum number of tiles that can be requested. Default is 100,000. It is recommended to use a sane default that will ensure that your users will not exceed any API free tier limits. (For example, Mapbox currently has a limit of 200,000 tile requests for the [Mapbox Static API](https://www.mapbox.com/pricing#static-tiles-api).)
+
 **Message Queue:** Provide your message queue variables to publish your map request to a storage queue service, where it can be picked up by a [mapgl-tile-renderer](http://github.com/conservationMetrics/mapgl-tile-renderer/) task worker. For Azure, you need a queue name, a storage account name, and a storage account key.
 
 **Offline map storage:** Provide a URI where the offline maps can be downloaded, as well as a path pointing to a volume mount directory for mapgl-tile-renderer to store the files.

components/GenerateMap/MapSidebar.vue

@@ -22,6 +22,8 @@ const props = defineProps<{
   mapLoadError: boolean;
 }>();
 
+const maxTiles = useRuntimeConfig().public.maxTiles as number;
+
 const { t } = useI18n();
 
 onMounted(() => {
@@ -135,7 +137,7 @@ const canSubmitMapboxCustom = computed(() => {
 
 /** Computes whether the submit button should be disabled. */
 const isSubmitDisabled = computed(() => {
-  return estimatedTiles.value > 275000 || !canSubmitMapboxCustom.value;
+  return estimatedTiles.value > maxTiles || !canSubmitMapboxCustom.value;
 });
 
 const emit = defineEmits([
@@ -451,20 +453,12 @@ watch(
           {{ t("estimatedNumberOfTiles") }}:
           {{ estimatedTiles.toLocaleString() }}
         </p>
-        <p
-          v-if="estimatedTiles > 100000 && estimatedTiles < 275000"
-          class="text-red-600 mt-2"
-        >
+        <p v-if="estimatedTiles > maxTiles" class="text-red-600 mt-2">
           <span class="font-bold">{{ t("Warning") }}:</span>
-          {{ t("over100000Tiles") }}
+          {{ t("overMaxTilesWarning", { maxTiles }) }}
         </p>
       </div>
 
-      <div v-if="estimatedTiles > 275000" class="text-red-600 mt-2">
-        <span class="font-bold">{{ t("Warning") }}:</span>
-        {{ t("over275000Tiles") }}
-      </div>
-
       <button
         type="submit"
         :disabled="isSubmitDisabled"

i18n/locales/en.json

@@ -38,8 +38,7 @@
   "numberOfTiles": "Number of Tiles",
   "offlineMapBoundingBox": "Offline Map Bounding Box",
   "offlineMapRequestSubmitted": "Offline map request successfully submitted",
-  "over100000Tiles": "You are requesting over 100,000 tiles. Note that this will generate a very large offline map file. Please also make sure you will not exceed your tile quota for the map style API, or run into unexpected costs.",
-  "over275000Tiles": "You are requesting over 275,000 tiles. This exceeds the permitted number of tiles. Please reduce the bounding box or zoom level.",
+  "overMaxTilesWarning": "You are requesting over {maxTiles} tiles. This exceeds the permitted number of tiles. Please reduce the bounding box or zoom level.",
   "password": "Password",
   "passwordIncorrect": "The password you entered is incorrect",
   "pending": "Pending",

i18n/locales/es.json

@@ -38,8 +38,7 @@
   "numberOfTiles": "Número de tiles",
   "offlineMapBoundingBox": "Caja delimitadora del mapa offline",
   "offlineMapRequestSubmitted": "Solicitud de mapa offline enviada con éxito",
-  "over100000Tiles": "Estás solicitando más de 100,000 tiles. Ten en cuenta que esto generará un archivo de mapa offline muy grande. Asegúrate también de no exceder tu cuota de tiles para la API de estilo de mapa, o incurrir en costos inesperados.",
-  "over275000Tiles": "Estás solicitando más de 275,000 tiles. Esto excede el número permitido de tiles. Por favor, reduce la caja delimitadora o el nivel de zoom.",
+  "overMaxTilesWarning": "Estás solicitando más de {maxTiles} tiles. Esto excede el número permitido de tiles. Por favor, reduce la caja delimitadora o el nivel de zoom.",
   "password": "Contraseña",
   "passwordIncorrect": "La contraseña que ingresaste es incorrecta",
   "pending": "Pendiente",

i18n/locales/nl.json

@@ -38,8 +38,7 @@
   "numberOfTiles": "Aantal tegels",
   "offlineMapBoundingBox": "Begrenzingskader van offline kaart",
   "offlineMapRequestSubmitted": "Offline kaartverzoek succesvol ingediend",
-  "over100000Tiles": "U vraagt meer dan 100.000 tegels aan. Houd er rekening mee dat dit een zeer groot offline kaartbestand zal genereren. Zorg er ook voor dat u uw tegelquotum voor de kaartstijl-API niet overschrijdt, of onverwachte kosten maakt.",
-  "over275000Tiles": "U vraagt meer dan 275.000 tegels aan. Dit overschrijdt het toegestane aantal tegels. Verminder het begrenzingskader of zoomniveau.",
+  "overMaxTilesWarning": "U vraagt meer dan {maxTiles} tegels aan. Dit overschrijdt het toegestane aantal tegels. Verminder het begrenzingskader of zoomniveau.",
   "password": "Wachtwoord",
   "passwordIncorrect": "Het door u ingevoerde wachtwoord is onjuist",
   "pending": "In behandeling",

i18n/locales/pt.json

@@ -38,8 +38,7 @@
   "numberOfTiles": "Número de tiles",
   "offlineMapBoundingBox": "Caixa delimitadora do mapa offline",
   "offlineMapRequestSubmitted": "Pedido de mapa offline enviado com sucesso",
-  "over100000Tiles": "Você está solicitando mais de 100.000 tiles. Observe que isso gerará um arquivo de mapa offline muito grande. Certifique-se também de não exceder sua cota de tiles para a API de estilo de mapa, ou incorrer em custos inesperados.",
-  "over275000Tiles": "Você está solicitando mais de 275.000 tiles. Isso excede o número permitido de tiles. Por favor, reduza a caixa delimitadora ou o nível de zoom.",
+  "overMaxTilesWarning": "Você está solicitando mais de {maxTiles} tiles. Isso excede o número permitido de tiles. Por favor, reduza a caixa delimitadora ou o nível de zoom.",
   "password": "Senha",
   "passwordIncorrect": "A senha que você digitou está incorreta",
   "pending": "Pendente",

nuxt.config.ts

@@ -89,6 +89,7 @@ export default defineNuxtConfig({
       mapZoom: "0",
       mapLatitude: "15",
       mapLongitude: "40",
+      maxTiles: 100000,
       offlineMapsPath: "",
       offlineMapsUri: "",
       planetApiKey: "",