maplibre-gl-basemap-control 0.14.0 → 0.14.3

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-CKgYscxI.js → BasemapControl-CSw9YZ4S.js}

@@ -661,10 +661,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"]
@@ -676,7 +676,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"]
   }),
@@ -688,7 +688,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"]
@@ -701,10 +701,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"]
@@ -716,7 +716,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"]
   }),
@@ -727,7 +727,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"]
   }),
@@ -739,10 +739,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"]
@@ -755,7 +755,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"]
@@ -768,7 +768,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"]
@@ -781,7 +781,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"]
@@ -1888,6 +1888,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"
@@ -1926,6 +1930,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",
@@ -1985,6 +1990,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", "");
@@ -2050,6 +2056,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) ?? "";
@@ -2174,6 +2181,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;
@@ -2317,12 +2330,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;
@@ -2779,6 +2796,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",
@@ -3280,6 +3314,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");
   }
@@ -3302,7 +3339,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") {
@@ -3449,15 +3486,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();
@@ -3559,6 +3596,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();
@@ -3826,4 +3864,4 @@ export {
   getBasemapCategories as g,
   resolveBasemapProviders as r
 };
-//# sourceMappingURL=BasemapControl-CKgYscxI.js.map
+//# sourceMappingURL=BasemapControl-CSw9YZ4S.js.map