diff --git a/src/MaplibreGLLayer.js b/src/MaplibreGLLayer.js index 096ccf0..713a675 100644 --- a/src/MaplibreGLLayer.js +++ b/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', diff --git a/src/VectorBasemapLayer.js b/src/VectorBasemapLayer.js index cb3f518..6726c31 100644 --- a/src/VectorBasemapLayer.js +++ b/src/VectorBasemapLayer.js @@ -65,6 +65,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); },