@nextgis/ngw-map 1.9.6 → 1.11.2

package/lib/index.d.ts

@@ -206,7 +206,7 @@ export declare interface NgwMapOptions<C = any> extends MapOptions<C> {
      *
      * @example
      * ```javascript
-     *   var ngwMap = new NgwMap({webmapId: [3985, 'my-webmap']});
+     *   const ngwMap = new NgwMap({webmapId: [3985, 'my-webmap']});
      *   ngwMap.hideLayer('my-webmap');
      * ```
      */
@@ -219,25 +219,52 @@ export declare interface NgwMapOptions<C = any> extends MapOptions<C> {
      *
      * @example
      * ```javascript
-     *   var ngwMap = new NgwMap({qmsId: [465, 'qms-basemap']});
+     *   const ngwMap = new NgwMap({qmsId: [465, 'qms-basemap']});
      *   ngwMap.hideLayer('qms-basemap');
      * ```
      */
-    resources?: NgwResourceDefinition[];
     qmsId?: number | [number, string];
     /**
-     * Shortcut to add OSM baselayer
-     */
-    osm?: boolean;
-    /**
-     * Set default paint for vector layers geometry objects.
+     * List of NGW resources to be displayed on the map.
+     *
+     * The resources list may include:
+     *
+     * - number - resource id; // also for resource
+     * - string - resource keyname; // also for resource
+     * - object - configuration of the layer to be added
+     * with the one required parameter `resource` (the comment "also for resource" above refers to it)
+     *
+     * @example
+     * ```javascript
+     * NgwMap.create({
+     *   baseUrl: "https://demo.nextgis.com",
+     *   target: "map",
+     *   resources: [
+     *     // Basemap resource
+     *     1665,
+     *     // Digital Elevation Model (DEM)-style
+     *     4117,
+     *     // Hillshade-style
+     *     { resource: 4115, adapter: "TILE", opacity: 0.3 },
+     *     // Elevation contours-style
+     *     'contours-style',
+     *     // Vector from Order boundary-style
+     *     {
+     *       resource: 4111,
+     *       fit: true,
+     *       adapter: "GEOJSON",
+     *       adapterOptions: { paint: { color: "red", fill: false, weight: 4 } },
+     *     },
+     *   ],
+     * });
+     * ```
      */
+    resources?: NgwResourceDefinition[];
     /**
-     * Get information from NGW webmap layers by click.
-     *
-     * @defaultValue false
+     * Shortcut to add OSM baselayer.
      */
-    identification?: boolean;
+    osm?: boolean;
+    /* Excluded from this release type: identification */
     whitlabel?: boolean;
     companyLogoOptions?: CompanyLogoOptions;
     pixelRadius?: number;

package/lib/ngw-map.cjs.js

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/ngw-map; version: 1.9.6; author: NextGIS */
+/** Bundle of @nextgis/ngw-map; version: 1.11.2; author: NextGIS */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/lib/ngw-map.cjs.prod.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("events"),t=require("@nextgis/cancelable-promise"),s=require("@nextgis/utils"),r=require("@nextgis/webmap"),i=require("@nextgis/ngw-kit"),o=require("@nextgis/icons"),n=require("@nextgis/ngw-connector"),a=require("@nextgis/qms-kit");function c(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var h=c(t),d=c(n);function u(e,t,s,r){if("number"==typeof t||"string"==typeof t)t=Number(t),e.push({...s,resource:t});else if(Array.isArray(t)){const[i,o]=t;e.push({...s,resource:i,id:o,...r})}else"object"==typeof t&&e.push({...s,...t,...r})}const l={target:"map",baseUrl:"",whitlabel:!1,controls:["ZOOM","ATTRIBUTION"],controlsOptions:{ZOOM:{position:"top-left"},ATTRIBUTION:{position:"bottom-right",customAttribution:['<a href="https://nextgis.com" target="_blank">©NextGIS</a>']}},pixelRadius:10};class y extends r.WebMap{constructor(t){super(function(e){const t=[new a.QmsKit];return e.starterKits&&e.starterKits.forEach((e=>{t.push(e)})),e.connector?e.connector&&(e.baseUrl=e.connector.options.baseUrl):e.connector=new d({baseUrl:e.baseUrl||"",auth:e.auth}),(e=s.deepmerge(l,e)).center||e.bounds||(e.bounds=[-179,-90,180,90]),e.connector&&t.push(new i.NgwKit({connector:e.connector,auth:e.auth})),{...e,starterKits:t,create:!1}}(t)),this.emitter=new e.EventEmitter,this._ngwLayers={},this._promises={select:[],identify:[]},t.connector&&(this.connector=t.connector),this._createWebMap().then((()=>{const e=this.getContainer();e&&e.classList.add("ngw-map-container"),this.options.whitlabel&&this._whiteLabel()}))}async addControl(e,t,s){return await this.onLoad("controls:create"),super.addControl(e,t,s)}async addNgwLayer(e){await this.onMapLoad();const{keyname:t,resourceId:r}=e;(t||void 0!==r)&&s.deprecatedWarn("set `resource` options instead of `keyname` or `resourceId`");const o=e.resource;if(!t&&!r&&!o)throw new Error("resource, resourceId or keyname is required parameter to add NGW layer");if(s.defined(this.options.baseUrl))try{s.defined(this.options.setViewDelay)&&(e.adapterOptions=e.adapterOptions||{},s.defined(e.adapterOptions.setViewDelay)||(e.adapterOptions.setViewDelay=this.options.setViewDelay));const t=i.createNgwLayerAdapter(e,this,this.connector),r={visibility:!0,...e,...e.adapterOptions},o=await this.addLayer(t,r),n=o&&this.getLayerId(o);if(o&&n&&(this._ngwLayers[n]={layer:o,resourceId:o.resourceId},o.options.name=o.options.name||o.item&&o.item.resource.display_name,o.options.baselayer)){if(this.getActiveBaseLayer())return o}return o}catch(e){const i=s.isObject(o)&&"id"in o?o.id:t||r||o;console.error(`Can't add NGW layer ${i}.`,e)}}fit(){const{center:e,zoom:t,bounds:s}=this.options;e?(this.setCenter(e),t&&this.setZoom(t)):s&&this.fitBounds(s)}fetchNgwLayerItem(e){return i.fetchNgwLayerItem({connector:this.connector,...e})}fetchNgwLayerItems(e){return i.fetchNgwLayerItems({connector:this.connector,...e})}fetchNgwLayerFeature(e){return i.fetchNgwLayerFeature({connector:this.connector,...e})}fetchNgwLayerFeatures(e){return i.fetchNgwLayerFeatureCollection({connector:this.connector,...e})}fetchIdentifyItem(e,t){const s=i.fetchIdentifyItem({identify:e,connector:this.connector,requestOptions:t});return this._addPromise("identify",s),s}fetchIdentifyGeoJson(e,t=!1){const s=i.fetchIdentifyGeoJson({identify:e,connector:this.connector,multiple:t});return s&&"then"in s?(this._addPromise("identify",s),s):h.resolve(s)}getIdentifyGeoJson(e,t=!1){return this.fetchIdentifyGeoJson(e,t)}async getNgwLayers(){return await this.onLoad(),this._ngwLayers}async getNgwLayerByResourceId(e){for(const t in this._ngwLayers){const s=this._ngwLayers[t];if(s.resourceId===e)return s&&s.layer;if(s.layer.getIdentificationIds){const t=await s.layer.getIdentificationIds();if(t&&t.some((t=>t===e)))return s.layer}if(s.layer.getDependLayers){const t=s.layer.getDependLayers().find((t=>t.item&&t.item.parentId===e));if(t)return t.layer}}}async fitLayer(e,t){let s;s="string"==typeof e||"number"==typeof e?String(s):e.id;const r=s&&this._ngwLayers[s];if(r)if(r.layer.getBounds){const e=await r.layer.getBounds();e&&this.fitBounds(e,t)}else{let e;if(r.layer.item)e=r.layer.item;else{const t=r.resourceId;e=await this.connector.getResource(t)}e&&i.fetchNgwResourceExtent(e,this.connector).then((e=>{e&&this.fitBounds(e,t)}))}else super.fitLayer(e,t)}async zoomToLayer(e){return this.fitLayer(e)}onLoad(e="ngw-map:create"){return super.onLoad(e)}removeLayer(e){const t=this.getLayer(e);if(t){const e=this.getLayerId(t);e&&delete this._ngwLayers[e],super.removeLayer(t)}}enableSelection(){this.$$selectFromNgwRaster||(this.$$selectFromNgwRaster=e=>{this.emitter.listenerCount("ngw:select")&&this._selectFromNgwRaster(e)},this.$$selectFromNgwVector=e=>{this.emitter.listenerCount("ngw:select")&&this._selectFromNgwVector(e)},this.emitter.on("click",this.$$selectFromNgwRaster),this.emitter.on("layer:click",this.$$selectFromNgwVector))}disableSelection(){this.$$selectFromNgwRaster&&(this.emitter.removeListener("click",this.$$selectFromNgwRaster),this.emitter.removeListener("click",this._selectFromNgwVector),this.$$selectFromNgwRaster=void 0,this.$$selectFromNgwVector=void 0)}getNgwLayerItem(e){return this.fetchNgwLayerItem(e)}getNgwLayerItems(e){return this.fetchNgwLayerItems(e)}getNgwLayerFeature(e){return this.fetchNgwLayerFeature(e)}getNgwLayerFeatures(e){return this.fetchNgwLayerFeatures(e)}cancelPromise(...e){this.cancelPromises(...e)}cancelPromises(...e){e.length||(e=Object.keys(this._promises)),e.forEach((e=>{const t=this._promises[e];t&&(t.forEach((e=>e.cancel())),this._promises[e]=[])}))}_addPromise(e,t){const s=this._promises[e];if(s&&-1===s.indexOf(t)){const e=()=>{const e=s.indexOf(t);-1!==e&&s.splice(e,1)};t.then(e),t.catch(e),s.push(t)}}_isFitFromResource(){const e=this._initMapState;return!e.zoom||!e.center}async _createWebMap(){await this.create(),this.options.qmsId&&this._addQmsBaseLayer(),this.options.osm&&this._addOsmBaseLayer();const e=[],t=this._isFitFromResource();if(this.options.webmapId&&u(e,this.options.webmapId,{fit:t}),this.options.resources&&Array.isArray(this.options.resources))for(const s of this.options.resources){const r={};t||(r.fit=!1),u(e,s,{},r)}for(const t of e)try{await this.addNgwLayer(t)}catch(e){console.warn(e)}this._emitStatusEvent("ngw-map:create",this),this.enableSelection()}_addOsmBaseLayer(){this.addBaseLayer("OSM")}_addQmsBaseLayer(){let e,t;Array.isArray(this.options.qmsId)?(e=this.options.qmsId[0],t=this.options.qmsId[1]):e=Number(this.options.qmsId);const s={qmsId:e};t&&(s.id=t),this.addBaseLayer("QMS",s)}_selectFromNgwVector(e){const t=e.layer,s=t.item&&t.item.resource.id,r=e.feature;if(void 0!==s&&r){const e=r.id;if(e){const t={featureCount:1,[s]:{featureCount:1,features:[{id:Number(e),fields:r.properties||{},label:`#${s}`,layerId:Number(s),parent:"",geom:r.geometry}]}};return this._emitStatusEvent("ngw:select",this._prepareToIdentify({...t,resources:[s],sourceType:"vector"})),t}}}async _selectFromNgwRaster(e){this._emitStatusEvent("ngw:preselect");const t=[],s=Object.values(this._ngwLayers);s.sort(((e,t)=>e.layer.order&&t.layer.order?t.layer.order-e.layer.order:1)),s.forEach((e=>{const s=e.layer,r="function"==typeof s.getIdentificationIds&&s.getIdentificationIds;r&&s.options.selectable&&this.isLayerVisible(s)&&t.push(r.call(s))}));const r=Promise.all(t),o=await r,n=[];if(o.forEach((e=>{e&&e.forEach((e=>n.push(e)))})),!n.length)return void this._emitStatusEvent("ngw:select",null);const a=this.options.pixelRadius||10,c=this.getCenter();let h=this.getZoom();if(h=void 0!==h?h:20,!c||!h)return void this._emitStatusEvent("ngw:select",null);const d=function(e,t,s){return(s=null!=s?s:10)*(40075016.686*Math.abs(Math.cos(180*e[1]/Math.PI))/Math.pow(2,t+8))*5e-4}(c,h,a),u=i.sendIdentifyRequest(e,{layers:n,connector:this.connector,radius:d}).then((t=>(this._emitStatusEvent("ngw:select",this._prepareToIdentify({...t,resources:n,sourceType:"raster",event:e})),t)));return this._addPromise("select",u),u}_prepareToIdentify(e){return{...e,getIdentifyItems:()=>i.getIdentifyItems(e,!0).map((e=>i.createIdentifyItem({feature:e.feature,connector:this.connector})))}}async _whiteLabel(){const e=this.getContainer();if(e){const t=await i.getCompanyLogo(this.connector,this.options.companyLogoOptions);t&&e.appendChild(t)}}}for(var m in y.getIcon=o.getIcon,exports.NgwMap=y,exports.createNgwMap=async function(e){return new y(e).onLoad()},r)"default"===m||exports.hasOwnProperty(m)||(exports[m]=r[m]);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("events"),t=require("@nextgis/cancelable-promise"),s=require("@nextgis/utils"),r=require("@nextgis/webmap"),i=require("@nextgis/ngw-kit"),o=require("@nextgis/icons"),n=require("@nextgis/ngw-connector"),a=require("@nextgis/qms-kit");function c(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var h=c(t),d=c(n);function u(e,t,s,r){if("number"==typeof t||"string"==typeof t)t=Number(t),e.push({...s,resource:t});else if(Array.isArray(t)){const[i,o]=t;e.push({...s,resource:i,id:o,...r})}else"object"==typeof t&&e.push({...s,...t,...r})}const l={target:"map",baseUrl:"",whitlabel:!1,controls:["ZOOM","ATTRIBUTION"],controlsOptions:{ZOOM:{position:"top-left"},ATTRIBUTION:{position:"bottom-right",customAttribution:['<a href="https://nextgis.com" target="_blank">©NextGIS</a>']}},pixelRadius:10};class y extends r.WebMap{constructor(t){super(function(e){const t=[new a.QmsKit];return e.starterKits&&e.starterKits.forEach((e=>{t.push(e)})),e.connector?e.connector&&(e.baseUrl=e.connector.options.baseUrl):e.connector=new d({baseUrl:e.baseUrl||"",auth:e.auth}),(e=s.deepmerge(l,e)).center||e.bounds||(e.bounds=[-179,-90,180,90]),e.connector&&t.push(new i.NgwKit({connector:e.connector,auth:e.auth})),{...e,starterKits:t,create:!1}}(t)),this.emitter=new e.EventEmitter,this._ngwLayers={},this._promises={select:[],identify:[]},t.connector&&(this.connector=t.connector),this._createWebMap().then((()=>{const e=this.getContainer();e&&e.classList.add("ngw-map-container"),this.options.whitlabel&&this._whiteLabel()}))}async addControl(e,t,s){return await this.onLoad("controls:create"),super.addControl(e,t,s)}async addNgwLayer(e){await this.onMapLoad();const{keyname:t,resourceId:r}=e;(t||void 0!==r)&&s.deprecatedWarn("set `resource` options instead of `keyname` or `resourceId`");const o=e.resource;if(!t&&!r&&!o)throw new Error("resource, resourceId or keyname is required parameter to add NGW layer");if(s.defined(this.options.baseUrl))try{s.defined(this.options.setViewDelay)&&(e.adapterOptions=e.adapterOptions||{},s.defined(e.adapterOptions.setViewDelay)||(e.adapterOptions.setViewDelay=this.options.setViewDelay));const t=i.createNgwLayerAdapter(e,this,this.connector),r={visibility:!0,...e,...e.adapterOptions},o=await this.addLayer(t,r),n=o&&this.getLayerId(o);if(o&&n&&(this._ngwLayers[n]={layer:o,resourceId:o.resourceId},o.options.name=o.options.name||o.item&&o.item.resource.display_name,o.options.baselayer)){if(this.getActiveBaseLayer())return o}return o}catch(n){const e=s.isObject(o)&&"id"in o?o.id:t||r||o;console.error(`Can't add NGW layer ${e}.`,n)}}fit(){const{center:e,zoom:t,bounds:s}=this.options;e?(this.setCenter(e),t&&this.setZoom(t)):s&&this.fitBounds(s)}fetchNgwLayerItem(e){return i.fetchNgwLayerItem({connector:this.connector,...e})}fetchNgwLayerItems(e){return i.fetchNgwLayerItems({connector:this.connector,...e})}fetchNgwLayerFeature(e){return i.fetchNgwLayerFeature({connector:this.connector,...e})}fetchNgwLayerFeatures(e){return i.fetchNgwLayerFeatureCollection({connector:this.connector,...e})}fetchIdentifyItem(e,t){const s=i.fetchIdentifyItem({identify:e,connector:this.connector,requestOptions:t});return this._addPromise("identify",s),s}fetchIdentifyGeoJson(e,t=!1){const s=i.fetchIdentifyGeoJson({identify:e,connector:this.connector,multiple:t});return s&&"then"in s?(this._addPromise("identify",s),s):h.resolve(s)}getIdentifyGeoJson(e,t=!1){return this.fetchIdentifyGeoJson(e,t)}async getNgwLayers(){return await this.onLoad(),this._ngwLayers}async getNgwLayerByResourceId(e){for(const t in this._ngwLayers){const s=this._ngwLayers[t];if(s.resourceId===e)return s&&s.layer;if(s.layer.getIdentificationIds){const t=await s.layer.getIdentificationIds();if(t&&t.some((t=>t===e)))return s.layer}if(s.layer.getDependLayers){const t=s.layer.getDependLayers().find((t=>t.item&&t.item.parentId===e));if(t)return t.layer}}}async fitLayer(e,t){let s;s="string"==typeof e||"number"==typeof e?String(s):e.id;const r=s&&this._ngwLayers[s];if(r)if(r.layer.getBounds){const e=await r.layer.getBounds();e&&this.fitBounds(e,t)}else{let e;if(r.layer.item)e=r.layer.item;else{const t=r.resourceId;e=await this.connector.getResource(t)}e&&i.fetchNgwResourceExtent(e,this.connector).then((e=>{e&&this.fitBounds(e,t)}))}else super.fitLayer(e,t)}async zoomToLayer(e){return this.fitLayer(e)}onLoad(e="ngw-map:create"){return super.onLoad(e)}removeLayer(e){const t=this.getLayer(e);if(t){const e=this.getLayerId(t);e&&delete this._ngwLayers[e],super.removeLayer(t)}}enableSelection(){this.$$selectFromNgwRaster||(this.$$selectFromNgwRaster=e=>{this.emitter.listenerCount("ngw:select")&&this._selectFromNgwRaster(e)},this.$$selectFromNgwVector=e=>{this.emitter.listenerCount("ngw:select")&&this._selectFromNgwVector(e)},this.emitter.on("click",this.$$selectFromNgwRaster),this.emitter.on("layer:click",this.$$selectFromNgwVector))}disableSelection(){this.$$selectFromNgwRaster&&(this.emitter.removeListener("click",this.$$selectFromNgwRaster),this.emitter.removeListener("click",this._selectFromNgwVector),this.$$selectFromNgwRaster=void 0,this.$$selectFromNgwVector=void 0)}getNgwLayerItem(e){return this.fetchNgwLayerItem(e)}getNgwLayerItems(e){return this.fetchNgwLayerItems(e)}getNgwLayerFeature(e){return this.fetchNgwLayerFeature(e)}getNgwLayerFeatures(e){return this.fetchNgwLayerFeatures(e)}cancelPromise(...e){this.cancelPromises(...e)}cancelPromises(...e){e.length||(e=Object.keys(this._promises)),e.forEach((e=>{const t=this._promises[e];t&&(t.forEach((e=>e.cancel())),this._promises[e]=[])}))}_addPromise(e,t){const s=this._promises[e];if(s&&-1===s.indexOf(t)){const e=()=>{const e=s.indexOf(t);-1!==e&&s.splice(e,1)};t.then(e),t.catch(e),s.push(t)}}_isFitFromResource(){const e=this._initMapState;return!e.zoom||!e.center}async _createWebMap(){await this.create(),this.options.qmsId&&this._addQmsBaseLayer(),this.options.osm&&this._addOsmBaseLayer();const e=[],t=this._isFitFromResource();if(this.options.webmapId&&u(e,this.options.webmapId,{fit:t}),this.options.resources&&Array.isArray(this.options.resources))for(const r of this.options.resources){const s={};t||(s.fit=!1),u(e,r,{},s)}for(const r of e)try{await this.addNgwLayer(r)}catch(s){console.warn(s)}this._emitStatusEvent("ngw-map:create",this),this.enableSelection()}_addOsmBaseLayer(){this.addBaseLayer("OSM")}_addQmsBaseLayer(){let e,t;Array.isArray(this.options.qmsId)?(e=this.options.qmsId[0],t=this.options.qmsId[1]):e=Number(this.options.qmsId);const s={qmsId:e};t&&(s.id=t),this.addBaseLayer("QMS",s)}_selectFromNgwVector(e){const t=e.layer,s=t.item&&t.item.resource.id,r=e.feature;if(void 0!==s&&r){const e=r.id;if(e){const t={featureCount:1,[s]:{featureCount:1,features:[{id:Number(e),fields:r.properties||{},label:`#${s}`,layerId:Number(s),parent:"",geom:r.geometry}]}};return this._emitStatusEvent("ngw:select",this._prepareToIdentify({...t,resources:[s],sourceType:"vector"})),t}}}async _selectFromNgwRaster(e){this._emitStatusEvent("ngw:preselect");const t=[],s=Object.values(this._ngwLayers);s.sort(((e,t)=>e.layer.order&&t.layer.order?t.layer.order-e.layer.order:1)),s.forEach((e=>{const s=e.layer,r="function"==typeof s.getIdentificationIds&&s.getIdentificationIds;r&&s.options.selectable&&this.isLayerVisible(s)&&t.push(r.call(s))}));const r=Promise.all(t),o=await r,n=[];if(o.forEach((e=>{e&&e.forEach((e=>n.push(e)))})),!n.length)return void this._emitStatusEvent("ngw:select",null);const a=this.options.pixelRadius||10,c=this.getCenter();let h=this.getZoom();if(h=void 0!==h?h:20,!c||!h)return void this._emitStatusEvent("ngw:select",null);const d=function(e,t,s){return(s=null!=s?s:10)*(40075016.686*Math.abs(Math.cos(180*e[1]/Math.PI))/Math.pow(2,t+8))*5e-4}(c,h,a),u=i.sendIdentifyRequest(e,{layers:n,connector:this.connector,radius:d}).then((t=>(this._emitStatusEvent("ngw:select",this._prepareToIdentify({...t,resources:n,sourceType:"raster",event:e})),t)));return this._addPromise("select",u),u}_prepareToIdentify(e){return{...e,getIdentifyItems:()=>i.getIdentifyItems(e,!0).map((e=>i.createIdentifyItem({feature:e.feature,connector:this.connector})))}}async _whiteLabel(){const e=this.getContainer();if(e){const t=await i.getCompanyLogo(this.connector,this.options.companyLogoOptions);t&&e.appendChild(t)}}}for(var m in y.getIcon=o.getIcon,exports.NgwMap=y,exports.createNgwMap=async function(e){return new y(e).onLoad()},r)"default"===m||exports.hasOwnProperty(m)||(exports[m]=r[m]);
 //# sourceMappingURL=ngw-map.cjs.prod.js.map

package/lib/ngw-map.esm-browser.js

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/ngw-map; version: 1.9.6; author: NextGIS */
+/** Bundle of @nextgis/ngw-map; version: 1.11.2; author: NextGIS */
 var events = {exports: {}};
 
 var R = typeof Reflect === 'object' ? Reflect : null;
@@ -1686,7 +1686,7 @@ const OPTIONS$1 = {
     minZoom: 0,
     maxZoom: 20,
     paint: {
-        color: 'blue',
+        color: '#0000ff',
         opacity: 0.4,
         strokeOpacity: 1,
         stroke: true,
@@ -1694,7 +1694,7 @@ const OPTIONS$1 = {
         weight: 1,
     },
     selectedPaint: {
-        color: 'darkblue',
+        color: '#00008b',
         opacity: 0.4,
         strokeOpacity: 1,
         stroke: true,
@@ -2844,6 +2844,30 @@ class WebMapLayers extends WebMapMain {
             adapter.clearLayer(cb);
         }
     }
+    setLayerPaint(layerDef, paint) {
+        const layer = this.getLayer(layerDef);
+        if (paint && layer && layer.setPaint) {
+            layer.setPaint(paint);
+        }
+    }
+    setLayerSelectedPaint(layerDef, paint) {
+        const layer = this.getLayer(layerDef);
+        if (paint && layer && layer.setSelectedPaint) {
+            layer.setSelectedPaint(paint);
+        }
+    }
+    updateLayerPaint(layerDef, paint) {
+        const layer = this.getLayer(layerDef);
+        if (paint && layer && layer.updatePaint) {
+            layer.updatePaint(paint);
+        }
+    }
+    updateLayerSelectedPaint(layerDef, paint) {
+        const layer = this.getLayer(layerDef);
+        if (paint && layer && layer.updateSelectedPaint) {
+            layer.updateSelectedPaint(paint);
+        }
+    }
     getAttributions(options) {
         const attributions = [];
         for (const l in this._layers) {
@@ -3587,6 +3611,10 @@ class NetworkError extends Error {
     }
 }
 
+function isObject(val) {
+    return Object.prototype.toString.call(val) === '[object Object]';
+}
+
 let loadData;
 // @ts-ignore
 {
@@ -3620,7 +3648,7 @@ let loadData;
             }
         };
         xhr.onload = () => {
-            if ([401, 403, 404, 500].indexOf(xhr.status) !== -1) {
+            if ([401, 403, 404, 422, 500].indexOf(xhr.status) !== -1) {
                 error(new NgwError(getResponseText()));
             }
             processingResponse();
@@ -3675,7 +3703,7 @@ let loadData;
             data = new FormData();
             data.append('file', options.file);
             if (options.data) {
-                for (const d in data) {
+                for (const d in options.data) {
                     data.append(d, data[d]);
                 }
             }
@@ -3761,10 +3789,6 @@ function removeConnector(connector) {
     }
 }
 
-function isObject(val) {
-    return Object.prototype.toString.call(val) === '[object Object]';
-}
-
 const exclude = ['description'];
 /**
  * @remarks
@@ -3989,7 +4013,7 @@ class ResourcesControl {
         }
     }
     _fetchResourceById(id, requestOptions) {
-        const promise = () => this.connector.get('resource.item', requestOptions, { id }).catch();
+        const promise = () => this.connector.get('resource.item', requestOptions, { id });
         return this.cache
             .add('resource.item', promise, {
             id,
@@ -4191,7 +4215,7 @@ class NgwConnector$1 {
             headers: this.getAuthorizationHeaders(credentials),
             // withCredentials: true
         };
-        // Do not use request('auth.current_user') to avoid circular-references
+        // Do not use apiRequest('auth.current_user') to avoid circular-references
         return this.makeQuery('/api/component/auth/current_user', {}, options)
             .then((data) => {
             this.user = data;
@@ -6179,8 +6203,17 @@ class NgwWebmapLayerAdapter {
         }
     }
     async addLayer(options) {
+        var _a, _b;
         this.options = { ...this.options, ...options };
         this.layer = await this._getWebMapLayerItem();
+        const extentConstrained = (_b = (_a = this.response) === null || _a === void 0 ? void 0 : _a.webmap) === null || _b === void 0 ? void 0 : _b.extent_constrained;
+        if (this.options.useExtentConstrained &&
+            this._extent &&
+            extentConstrained) {
+            this.options.webMap.setView({ maxBounds: this._extent });
+            // @ts-ignore
+            window.webmap = this.options.webMap;
+        }
         return this.layer;
     }
     removeLayer() {
@@ -6199,6 +6232,9 @@ class NgwWebmapLayerAdapter {
                 this.options.webMap.showLayer(this._lastActiveBaselayer);
             }
         }
+        if (this.options.useExtentConstrained && this._extent) {
+            this.options.webMap.setView({ maxBounds: null });
+        }
         delete this.layer;
         delete this.response;
         delete this._webmapLayersIds;
@@ -6321,7 +6357,24 @@ class NgwWebmapLayerAdapter {
         if (data) {
             this.response = data;
             const webmap = data[this.webmapClassName];
-            const webMap = this.options.webMap;
+            this._setupBaselayers(data);
+            if (webmap) {
+                this._extent = [
+                    webmap.extent_left,
+                    webmap.extent_bottom,
+                    webmap.extent_right,
+                    webmap.extent_top,
+                ];
+                this._updateItemsParams(webmap.root_item, this.options.webMap, data);
+                return webmap;
+            }
+        }
+    }
+    _setupBaselayers(data) {
+        var _a;
+        const webMap = this.options.webMap;
+        const basemap = (_a = this.options.useBasemap) !== null && _a !== void 0 ? _a : true;
+        if (basemap) {
             if (data.basemap_webmap && data.basemap_webmap.basemaps.length) {
                 const activeBaselayer = webMap.getActiveBaseLayer();
                 this._lastActiveBaselayer = activeBaselayer
@@ -6335,16 +6388,6 @@ class NgwWebmapLayerAdapter {
                     name: 'OpenStreetMap',
                 });
             }
-            if (webmap) {
-                this._extent = [
-                    webmap.extent_left,
-                    webmap.extent_bottom,
-                    webmap.extent_right,
-                    webmap.extent_top,
-                ];
-                this._updateItemsParams(webmap.root_item, this.options.webMap, data);
-                return webmap;
-            }
         }
     }
     _setBasemaps(baseWebmap) {