API Key console error clarification (#227)

* fix: api key console error

* fix: lint space

* fix: error warnings

* Update src/MaplibreGLLayer.js

Co-authored-by: Patrick Arlt <parlt@esri.com>

* fix: error message on v1 response

---------

Co-authored-by: Patrick Arlt <parlt@esri.com>
Co-authored-by: Kizito007 <nwakakelechi49gmail.com>

src/MaplibreGLLayer.js

@@ -168,6 +168,13 @@ export var MaplibreGLJSLayer = Layer.extend({
 
     this._glMap = new maplibregl.Map(options);
 
+    // Listen for style data error (401 Unauthorized)
+    this._glMap.on('error', function (error) {
+      if (error.error && error.error.status === 401) {
+        console.warn('Invalid or expired API key. Please check that API key is not expired and has the basemaps privilege assigned.');
+      }
+    });
+
     // Fire event for Maplibre "styledata" event.
     this._glMap.once(
       'styledata',

src/VectorBasemapLayer.js

@@ -67,6 +67,21 @@ export var VectorBasemapLayer = VectorTileLayer.extend({
     } else {
       styleUrl = getBasemapStyleUrl(this.options.key, this.options.apikey);
     }
+    // show error warning on successful response for previous version(1)
+    if (this.options.version && this.options.version === 1) {
+      fetch(styleUrl)
+        .then(response => {
+          return response.json();
+        })
+        .then(styleData => {
+          if (styleData.error) {
+            console.warn('Error:', styleData.error.message);
+          }
+        })
+        .catch(error => {
+          console.warn('Error:', error.message);
+        });
+    }
     this._createMaplibreLayer(styleUrl);
   },