maplibre-gl-basemap-control 0.14.0 → 0.14.4

package/README.md

@@ -152,6 +152,7 @@ destructive style change, so the missing key can be entered and the basemap retr
 const control = new BasemapControl({
   defaultBasemapId: 'maptiler-streets',
   mapTilerApiKey: 'YOUR_MAPTILER_API_KEY',
+  cartoApiKey: 'YOUR_CARTO_API_KEY',
   amazonApiKey: 'YOUR_AMAZON_LOCATION_API_KEY',
   awsRegion: 'us-east-1',
   mapboxAccessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
@@ -354,6 +355,7 @@ API key and load straight from `https://styles.maptoolkit.org/{styleId}.json`:
 | `panelWidth` | `number` | `340` | Floating panel width in pixels |
 | `className` | `string` | `''` | Extra class for the control button container |
 | `mapTilerApiKey` | `string` | `undefined` | Initial MapTiler API key for built-in MapTiler styles |
+| `cartoApiKey` | `string` | `undefined` | Initial CARTO API key for built-in CARTO raster basemaps |
 | `amazonApiKey` | `string` | `undefined` | Initial Amazon Location API key for built-in Amazon styles |
 | `awsRegion` | `string` | `'us-east-1'` | AWS region for built-in Amazon Location styles |
 | `mapboxAccessToken` | `string` | `undefined` | Initial Mapbox access token for built-in Mapbox styles and the Mapbox Traffic overlay |
@@ -424,6 +426,7 @@ const control = new BasemapControl({
 - `toggleBasemap(id)` - Add the raster basemap if inactive, otherwise remove it
 - `isBasemapActive(id)` - Whether the basemap is currently active
 - `setMapTilerApiKey(apiKey)` - Set or update the MapTiler API key used by MapTiler styles
+- `setCartoApiKey(apiKey)` - Set or update the CARTO API key used by CARTO raster basemaps
 - `setAmazonCredentials(apiKey, awsRegion)` - Set or update Amazon Location credentials
 - `setMapboxAccessToken(accessToken)` - Set or update the Mapbox access token
 - `setProtomapsApiKey(apiKey)` - Set or update the Protomaps API key used by Protomaps styles

package/dist/{BasemapControl-DgR3c4ci.cjs → BasemapControl-CD6PSvCv.cjs}

@@ -662,10 +662,10 @@ const DEFAULT_BASEMAPS = [
     description: "Light basemap for data overlays.",
     attribution: CARTO_ATTRIBUTION,
     tiles: [
-      "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
-      "https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
-      "https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
-      "https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
+      "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png?key={api-key}",
+      "https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png?key={api-key}",
+      "https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png?key={api-key}",
+      "https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png?key={api-key}"
     ],
     maxzoom: 20,
     tags: ["carto", "light", "positron"]
@@ -677,7 +677,7 @@ const DEFAULT_BASEMAPS = [
     category: "Light",
     description: "Light basemap without labels.",
     attribution: CARTO_ATTRIBUTION,
-    tiles: ["https://a.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png"],
+    tiles: ["https://a.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png?key={api-key}"],
     maxzoom: 20,
     tags: ["carto", "light", "no labels"]
   }),
@@ -689,7 +689,7 @@ const DEFAULT_BASEMAPS = [
     description: "Carto Positron labels layer.",
     attribution: CARTO_ATTRIBUTION,
     tiles: [
-      "https://a.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png"
+      "https://a.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png?key={api-key}"
     ],
     maxzoom: 20,
     tags: ["carto", "labels"]
@@ -702,10 +702,10 @@ const DEFAULT_BASEMAPS = [
     description: "Dark basemap for high-contrast overlays.",
     attribution: CARTO_ATTRIBUTION,
     tiles: [
-      "https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
-      "https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
-      "https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
-      "https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
+      "https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png?key={api-key}",
+      "https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png?key={api-key}",
+      "https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png?key={api-key}",
+      "https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png?key={api-key}"
     ],
     maxzoom: 20,
     tags: ["carto", "dark", "matter"]
@@ -717,7 +717,7 @@ const DEFAULT_BASEMAPS = [
     category: "Dark",
     description: "Dark basemap without labels.",
     attribution: CARTO_ATTRIBUTION,
-    tiles: ["https://a.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png"],
+    tiles: ["https://a.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png?key={api-key}"],
     maxzoom: 20,
     tags: ["carto", "dark", "no labels"]
   }),
@@ -728,7 +728,7 @@ const DEFAULT_BASEMAPS = [
     category: "Labels",
     description: "Carto Dark Matter labels layer.",
     attribution: CARTO_ATTRIBUTION,
-    tiles: ["https://a.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png"],
+    tiles: ["https://a.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png?key={api-key}"],
     maxzoom: 20,
     tags: ["carto", "dark", "labels"]
   }),
@@ -740,10 +740,10 @@ const DEFAULT_BASEMAPS = [
     description: "Detailed street basemap with subtle styling.",
     attribution: CARTO_ATTRIBUTION,
     tiles: [
-      "https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png",
-      "https://b.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png",
-      "https://c.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png",
-      "https://d.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png"
+      "https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png?key={api-key}",
+      "https://b.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png?key={api-key}",
+      "https://c.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png?key={api-key}",
+      "https://d.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png?key={api-key}"
     ],
     maxzoom: 20,
     tags: ["carto", "street", "voyager"]
@@ -756,7 +756,7 @@ const DEFAULT_BASEMAPS = [
     description: "Carto Voyager without labels.",
     attribution: CARTO_ATTRIBUTION,
     tiles: [
-      "https://a.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png"
+      "https://a.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png?key={api-key}"
     ],
     maxzoom: 20,
     tags: ["carto", "voyager", "no labels"]
@@ -769,7 +769,7 @@ const DEFAULT_BASEMAPS = [
     description: "Carto Voyager labels layer.",
     attribution: CARTO_ATTRIBUTION,
     tiles: [
-      "https://a.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}.png"
+      "https://a.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}.png?key={api-key}"
     ],
     maxzoom: 20,
     tags: ["carto", "voyager", "labels"]
@@ -782,7 +782,7 @@ const DEFAULT_BASEMAPS = [
     description: "Carto Voyager labels-under variant.",
     attribution: CARTO_ATTRIBUTION,
     tiles: [
-      "https://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png"
+      "https://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png?key={api-key}"
     ],
     maxzoom: 20,
     tags: ["carto", "voyager", "labels"]
@@ -1889,6 +1889,10 @@ const MAPTILER_API_KEY_QUERY = "?key";
 const MAPTILER_API_KEY_EMPTY_QUERY = "?key=";
 const AWS_REGION_PLACEHOLDER = "{aws-region}";
 const PROVIDER_CREDENTIAL_HELP = {
+  carto: {
+    url: "https://carto.com/basemaps/apikey/",
+    label: "Get a CARTO API key"
+  },
   amazon: {
     url: "https://docs.aws.amazon.com/location/latest/developerguide/using-apikeys.html",
     label: "Get an Amazon API key"
@@ -1927,6 +1931,7 @@ const PROVIDER_CREDENTIAL_HELP = {
   }
 };
 const RASTER_KEY_LABELS = {
+  carto: "CARTO API key",
   google: "Google Maps API key",
   here: "HERE API key",
   stadia: "Stadia Maps API key",
@@ -1986,6 +1991,7 @@ class BasemapControl {
     // stacked raster overlay so each can be added or removed independently.
     __publicField(this, "_managedRasters", new globalThis.Map());
     __publicField(this, "_mapTilerApiKey", "");
+    __publicField(this, "_cartoApiKey", "");
     __publicField(this, "_amazonApiKey", "");
     __publicField(this, "_awsRegion", "");
     __publicField(this, "_mapboxAccessToken", "");
@@ -2051,6 +2057,7 @@ class BasemapControl {
     });
     this._options = { ...DEFAULT_OPTIONS, ...options };
     this._mapTilerApiKey = (options == null ? void 0 : options.mapTilerApiKey) ?? "";
+    this._cartoApiKey = (options == null ? void 0 : options.cartoApiKey) ?? "";
     this._amazonApiKey = (options == null ? void 0 : options.amazonApiKey) ?? "";
     this._awsRegion = (options == null ? void 0 : options.awsRegion) ?? "us-east-1";
     this._mapboxAccessToken = (options == null ? void 0 : options.mapboxAccessToken) ?? "";
@@ -2175,6 +2182,12 @@ class BasemapControl {
     this._renderContent();
     this._emit({ type: "statechange", state: this.getState() });
   }
+  setCartoApiKey(apiKey) {
+    this._cartoApiKey = apiKey;
+    this._clearError();
+    this._renderContent();
+    this._emit({ type: "statechange", state: this.getState() });
+  }
   setAmazonCredentials(apiKey, awsRegion = this._awsRegion) {
     this._amazonApiKey = apiKey;
     this._awsRegion = awsRegion;
@@ -2318,12 +2331,16 @@ class BasemapControl {
       let resolvedStyleUrl;
       if (isOverlay) {
         await this._waitForStyleReady();
+        const resolvedRasterTiles = basemap.source.type === "raster" ? await this._resolveRasterTiles(basemap) : void 0;
+        if (basemap.source.type === "vector-overlay") {
+          this._resolveVectorOverlaySource(basemap, basemap.source);
+        }
         if (effectiveMode === "replace") {
           this._removeManagedBasemap();
         } else {
           this._removeManagedRaster(basemap.id);
         }
-        managedRaster = await this._addOverlay(basemap);
+        managedRaster = await this._addOverlay(basemap, resolvedRasterTiles);
       } else {
         const styleUrl = this._resolveStyleUrl(basemap);
         resolvedStyleUrl = styleUrl;
@@ -2780,6 +2797,23 @@ class BasemapControl {
   // missing-credential error, so the two never drift (#837).
   _providerFieldDefs() {
     return [
+      {
+        provider: "carto",
+        label: "CARTO",
+        has: this._hasCartoBasemaps(),
+        fields: [
+          {
+            className: "basemap-control-carto-key",
+            type: "password",
+            placeholder: "CARTO API key",
+            ariaLabel: "CARTO API key",
+            value: this._cartoApiKey,
+            onInput: (value) => {
+              this._cartoApiKey = value;
+            }
+          }
+        ]
+      },
       {
         provider: "maptiler",
         label: "MapTiler",
@@ -3121,6 +3155,7 @@ class BasemapControl {
     row.appendChild(
       this._createSelect(
         "Provider",
+        "All providers",
         this._state.providerFilter,
         providers.map((provider) => ({ value: provider.id, label: provider.name })),
         (value) => {
@@ -3134,6 +3169,7 @@ class BasemapControl {
     row.appendChild(
       this._createSelect(
         "Category",
+        "All categories",
         this._state.categoryFilter,
         categories.map((category) => ({ value: category, label: category })),
         (value) => {
@@ -3146,13 +3182,13 @@ class BasemapControl {
     );
     return row;
   }
-  _createSelect(label, value, options, onChange) {
+  _createSelect(label, allLabel, value, options, onChange) {
     const select = document.createElement("select");
     select.className = "basemap-control-select";
     select.setAttribute("aria-label", label);
     const all = document.createElement("option");
     all.value = "";
-    all.textContent = `All ${label.toLowerCase()}s`;
+    all.textContent = allLabel;
     select.appendChild(all);
     options.forEach((option) => {
       const element = document.createElement("option");
@@ -3281,6 +3317,9 @@ class BasemapControl {
   _hasProtomapsBasemaps() {
     return this._basemaps.some((basemap) => basemap.provider === "protomaps");
   }
+  _hasCartoBasemaps() {
+    return this._basemaps.some((basemap) => basemap.provider === "carto");
+  }
   _hasStadiaBasemaps() {
     return this._basemaps.some((basemap) => basemap.provider === "stadia");
   }
@@ -3303,7 +3342,7 @@ class BasemapControl {
     );
   }
   _hasProviderSettings() {
-    return this._hasMapTilerBasemaps() || this._hasAmazonBasemaps() || this._hasMapboxBasemaps() || this._hasProtomapsBasemaps() || this._hasStadiaBasemaps() || this._hasTiandituBasemaps() || this._hasTomTomBasemaps() || this._hasHereBasemaps() || this._hasGoogleApiKeyBasemaps();
+    return this._hasMapTilerBasemaps() || this._hasCartoBasemaps() || this._hasAmazonBasemaps() || this._hasMapboxBasemaps() || this._hasProtomapsBasemaps() || this._hasStadiaBasemaps() || this._hasTiandituBasemaps() || this._hasTomTomBasemaps() || this._hasHereBasemaps() || this._hasGoogleApiKeyBasemaps();
   }
   _resolveStyleUrl(basemap) {
     if (basemap.source.type !== "style" && basemap.source.type !== "vector-style") {
@@ -3450,15 +3489,15 @@ class BasemapControl {
   }
   // Add a stackable overlay (raster tiles or a vector overlay) to the map,
   // resolving any provider credentials first.
-  async _addOverlay(basemap) {
+  async _addOverlay(basemap, resolvedRasterTiles) {
     if (basemap.source.type === "vector-overlay") {
       return this._addVectorOverlay(basemap, basemap.source);
     }
-    return this._addRasterBasemap(basemap);
+    return this._addRasterBasemap(basemap, resolvedRasterTiles);
   }
-  async _addRasterBasemap(basemap) {
+  async _addRasterBasemap(basemap, resolvedTiles) {
     if (!this._map || basemap.source.type !== "raster") return void 0;
-    const tiles = await this._resolveRasterTiles(basemap);
+    const tiles = resolvedTiles ?? await this._resolveRasterTiles(basemap);
     const sourceId = `${CONTROL_SOURCE_PREFIX}-${basemap.id}`;
     const layerId = [CONTROL_LAYER_PREFIX, basemap.id].filter(Boolean).join("-");
     const beforeId = this._getBasemapInsertBeforeId();
@@ -3560,6 +3599,7 @@ class BasemapControl {
     return tiles.map((tile) => tile.split(API_KEY_PLACEHOLDER).join(encoded));
   }
   _rasterApiKeyFor(provider) {
+    if (provider === "carto") return this._cartoApiKey.trim();
     if (provider === "tomtom") return this._tomtomApiKey.trim();
     if (provider === "here") return this._hereApiKey.trim();
     if (provider === "stadia") return this._stadiaApiKey.trim();
@@ -3825,4 +3865,4 @@ exports.createBasemapCatalog = createBasemapCatalog;
 exports.filterBasemaps = filterBasemaps;
 exports.getBasemapCategories = getBasemapCategories;
 exports.resolveBasemapProviders = resolveBasemapProviders;
-//# sourceMappingURL=BasemapControl-DgR3c4ci.cjs.map
+//# sourceMappingURL=BasemapControl-CD6PSvCv.cjs.map