Add ArcGIS Rest Service Layer UI

src/util/ArcGISRest.js

@@ -85,7 +85,40 @@ Ext.define('BasiGX.util.ArcGISRest', {
             }
 
             return url;
+        },
+
+        /**
+         * Creates the URL for a MapServer request.
+         *
+         * TODO: does not work for this URL yet:
+         *       https://gis.epa.ie/arcgis/rest/services
+         *
+         * @param {string} serviceUrl The URL of the service.
+         * @param {string} serverName The name of the MapServer.
+         * @param {string} format The output format.
+         * @return {string} The URL to the MapServer.
+         */
+        createMapServerUrl: function(serviceUrl, serverName, format) {
+            // TODO refactor with createFeatureServerUrl if code works
+            if (!BasiGX.util.ArcGISRest.isArcGISRestUrl(serviceUrl)) {
+                return;
+            }
+            var urlObj = new URL(serviceUrl);
+            var parts = urlObj.pathname.split('/');
+            if (parts[parts.length - 1] === '') {
+                parts.pop();
+            }
+            parts.pop();
+            parts.push(serverName);
+            parts.push('MapServer');
+            var path = parts.join('/');
+
+            var url = urlObj.origin + path;
+            if (format) {
+                url = BasiGX.util.Url.setQueryParam(url, 'f', format);
+            }
 
+            return url;
         },
 
         /**
@@ -139,8 +172,9 @@ Ext.define('BasiGX.util.ArcGISRest', {
          * @param {number} layerConfig.layer.id The id of a FeatureServer layer.
          * @param {string} layerConfig.layer.name The name of a FeatureServer
          * layer.
-         * @param {boolean} useDefaultHeader Whether to use the default
-         * Xhr header.
+         * @param {Ext.data.TreeStore}  layerConfig.subLayerStore The tree store containing the sublayers.
+         * @param {boolean} useDefaultHeader Whether to use the default Xhr
+         * header.
          * @return {Ext.Promise} A promise containing the olLayer.
          */
         createOlLayerFromArcGISRest: function(layerConfig, useDefaultHeader) {
@@ -152,6 +186,19 @@ Ext.define('BasiGX.util.ArcGISRest', {
                 Ext.log.warn('Provided URL is not a valid ArcGISRest URL');
                 return Ext.Promise.reject();
             }
+
+            // collect all sublayer indexes that the user has marked as visible
+            var visibleLayerIndexes = [];
+            layerConfig.subLayerStore.each(function(sublayer, layerIndex){
+                var visibility = sublayer.get('visibility');
+                var layerId = sublayer.get('layerId');
+                var layerIdValid = Ext.isNumeric(layerId) && layerId >= 0;
+
+                if (visibility && layerIdValid){
+                    visibleLayerIndexes.push(layerId);
+                }
+            });
+
             var serviceUrl = [rootUrl, service.name, service.type].join('/');
             var onReject = function() {
                 return Ext.Promise.reject();
@@ -172,7 +219,11 @@ Ext.define('BasiGX.util.ArcGISRest', {
                         source = new ol.source.TileArcGISRest({
                             url: serviceUrl,
                             projection: 'EPSG:' +
-                                serviceInfo.spatialReference.wkid
+                                serviceInfo.spatialReference.wkid,
+                            params: {
+                                'LAYERS': 'show:' + visibleLayerIndexes.join(',')
+                            }
+
                         });
                         layer = new ol.layer.Tile({
                             source: source,

src/view/form/AddArcGISRest.js

@@ -29,11 +29,16 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
         'Ext.form.FieldSet',
         'Ext.form.field.ComboBox',
         'Ext.form.CheckboxGroup',
+        'Ext.tree.Panel',
         'Ext.Promise',
+        'Ext.data.TreeStore',
+        'Ext.data.Model',
+        'Ext.data.proxy.Ajax',
         'BasiGX.util.Map',
         'BasiGX.util.MsgBox',
         'BasiGX.util.Url',
-        'BasiGX.util.ArcGISRest'
+        'BasiGX.util.ArcGISRest',
+        'BasiGX.view.tree.ArcGISRestServiceTree'
     ],
 
     viewModel: {
@@ -67,7 +72,9 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
             msgInvalidUrl: 'Die angegebene URL ist keine valide ArcGISRest URL',
             documentation: '<h2>ArcGISRest Layer hinzufügen</h2>• In ' +
                 'diesem Dialog können Sie mit Hilfe einer ArcGISRest-URL ' +
-                'einen beliebigen Kartendienst der Karte hinzufügen.'
+                'einen beliebigen Kartendienst der Karte hinzufügen.',
+            serviceLayersVisibility: {},
+            availableLayersFieldSetMaxHeight: null
         }
     },
 
@@ -105,7 +112,7 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
         /**
          * Default url for the textfield or combobox.
          */
-        defaultUrl: 'https://gis.epa.ie/arcgis/rest/services',
+        defaultUrl: 'https://gis.epa.ie/arcgis/rest/services/Copernicus',
 
         /**
          * Whether we will send the `X-Requested-With` header when fetching the
@@ -115,7 +122,12 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
          *
          * @type {Boolean}
          */
-        useDefaultXhrHeader: false
+        useDefaultXhrHeader: false,
+
+        /**
+         * Allow parent configure available layers fieldset maxHeight
+         */
+        availableLayersFieldSetMaxHeight: null
     },
 
     /**
@@ -127,18 +139,18 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
 
     defaultButton: 'requestLayersBtn',
 
+    layout: 'vbox',
+
     items: [
         {
             xtype: 'fieldset',
-            layout: 'anchor',
-            defaults: {
-                anchor: '100%'
-            },
+            width: '100%',
             bind: {
                 title: '{queryParamsFieldSetTitle}'
             },
             items: [{
                 xtype: 'textfield',
+                width: '100%',
                 bind: {
                     fieldLabel: '{arcGISUrlTextFieldLabel}'
                 },
@@ -183,19 +195,63 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
                         }
                     }
                 }
+            }, {
+                xtype: 'container',
+                layout: {
+                    type: 'hbox',
+                    pack: 'end'
+                },
+                items: [{
+                    xtype: 'button',
+                    name: 'resetFormBtn',
+                    bind: {
+                        text: '{resetBtnText}'
+                    },
+                    handler: function(btn) {
+                        var view = btn.up('basigx-form-addarcgisrest');
+                        view.getForm().reset();
+                        view.removeAddLayersComponents();
+                        view.resetState();
+                        var defaultValue = view.defaultUrl;
+                        var combo = view.down('combobox[name=urlCombo]');
+                        combo.setValue(defaultValue);
+                        var textfield = view.down('textfield[name=url]');
+                        textfield.setValue(defaultValue);
+                        var fs = view.down('[name=fs-available-layers]');
+                        fs.setHidden(true);
+                    }
+                }, {
+                    xtype: 'button',
+                    bind: {
+                        text: '{requestLayersBtnText}'
+                    },
+                    margin: '0 0 0 5',
+                    name: 'requestLayersBtn',
+                    reference: 'requestLayersBtn',
+                    formBind: true, // only enabled once the form is valid
+                    disabled: true,
+                    handler: function(btn) {
+                        var view = btn.up('basigx-form-addarcgisrest');
+                        view.resetState();
+                        view.requestLayers()
+                            .then(
+                                view.onGetServicesSuccess.bind(view),
+                                view.onGetServicesFailure.bind(view)
+                            );
+                    }
+                }]
             }]
         },
         {
             xtype: 'fieldset',
             name: 'fs-available-layers',
-            layout: 'anchor',
+            flex: 1,
+            width: '100%',
             scrollable: 'y',
-            maxHeight: 200,
-            defaults: {
-                anchor: '100%'
-            },
+            hidden: true,
             bind: {
-                title: '{availableLayersFieldSetTitle}'
+                title: '{availableLayersFieldSetTitle}',
+                maxHeight: '{availableLayersFieldSetMaxHeight}'
             },
             items: {
                 xtype: 'checkboxgroup',
@@ -214,46 +270,6 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
         }
     ],
 
-    // Reset and Submit buttons
-    buttons: [
-        {
-            name: 'resetFormBtn',
-            bind: {
-                text: '{resetBtnText}'
-            },
-            handler: function(btn) {
-                var view = btn.up('basigx-form-addarcgisrest');
-                view.getForm().reset();
-                view.removeAddLayersComponents();
-                view.resetState();
-                var defaultValue = view.defaultUrl;
-                var combo = view.down('combobox[name=urlCombo]');
-                combo.setValue(defaultValue);
-                var textfield = view.down('textfield[name=url]');
-                textfield.setValue(defaultValue);
-            }
-        },
-        '->',
-        {
-            bind: {
-                text: '{requestLayersBtnText}'
-            },
-            name: 'requestLayersBtn',
-            reference: 'requestLayersBtn',
-            formBind: true, // only enabled once the form is valid
-            disabled: true,
-            handler: function(btn) {
-                var view = btn.up('basigx-form-addarcgisrest');
-                view.resetState();
-                view.requestLayers()
-                    .then(
-                        view.onGetServicesSuccess.bind(view),
-                        view.onGetServicesFailure.bind(view)
-                    );
-            }
-        }
-    ],
-
     /**
      * Initializes the form and sets up the parser instance.
      */
@@ -360,16 +376,16 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
                 return layerConfig.service.type === 'FeatureServer';
             }
         );
+        var nonFeatureServers = Ext.Array.filter(
+            layerConfigs, function(layerConfig) {
+                return layerConfig.service.type !== 'FeatureServer';
+            }
+        );
         this.loadLayersOfFeatureServers(featureServers)
             .then(function(featureServerConfigs) {
-                layerConfigs = Ext.Array.filter(
-                    layerConfigs, function(layerConfig) {
-                        return layerConfig.service.type !== 'FeatureServer';
-                    }
-                );
-                layerConfigs = Ext.Array.merge(
-                    layerConfigs, featureServerConfigs);
-                this.fillAvailableLayersFieldset(layerConfigs);
+                var mergedConfigs = Ext.Array.merge(
+                    nonFeatureServers, featureServerConfigs);
+                this.fillAvailableLayersFieldset(mergedConfigs);
                 this.updateControlToolbarState();
                 this.setLoading(false);
             }.bind(this));
@@ -608,16 +624,14 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
         var cbGroup = fs.down('checkboxgroup');
         var checkBoxes = [];
         var candidatesInitiallyChecked = me.getCandidatesInitiallyChecked();
+
+        fs.setHidden(false);
+
         Ext.each(layers, function(layer) {
-            var boxLabel = layer.service.name;
-            if (layer.service.type === 'FeatureServer') {
-                boxLabel += '/' + layer.layer.name;
-            }
             checkBoxes.push({
-                xtype: 'checkbox',
-                boxLabel: boxLabel,
-                checked: candidatesInitiallyChecked,
-                arcGISLayerConfig: layer
+                xtype: 'basigx-tree-arcgisrestservicetree',
+                arcGISLayerConfig: layer,
+                checked: candidatesInitiallyChecked
             });
         });
         cbGroup.add(checkBoxes);
@@ -662,6 +676,7 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
         me.add({
             xtype: 'toolbar',
             name: 'interact-w-available-layers',
+            width: '100%',
             items: tbItems
         });
     },
@@ -687,11 +702,37 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
     addCheckedLayers: function() {
         var me = this;
         var fs = me.down('[name=fs-available-layers]');
-        var checkboxes = fs.query('checkbox[checked=true][disabled=false]');
+
+        // collect checked layers from form
+        var layerItems = [];
+        var layerConfigTrees = fs.query('basigx-tree-arcgisrestservicetree');
+        Ext.each(layerConfigTrees, function(layerConfig){
+            var store = layerConfig.getStore();
+            if (!store) {
+              return;
+            }
+
+            var root = store.getRoot();
+            if (!root) {
+              return;
+            }
+
+            if (root.get('checked')) {
+                layerItems.push(layerConfig)
+            }
+        });
+
         var map = BasiGX.util.Map.getMapComponent().getMap();
         var useDefaultHeader = me.getUseDefaultXhrHeader();
-        Ext.each(checkboxes, function(checkbox) {
-            var config = checkbox.arcGISLayerConfig;
+        Ext.each(layerItems, function(layerItem) {
+            var config = layerItem.arcGISLayerConfig;
+
+            var subLayerStore = layerItem.getStore();
+            if (!subLayerStore){
+                return;
+            }
+
+            config.subLayerStore = subLayerStore;
             BasiGX.util.ArcGISRest.createOlLayerFromArcGISRest(
                 config, useDefaultHeader
             )
@@ -702,7 +743,7 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
                     me.fireEvent('beforearcgisrestadd', layer);
                     map.addLayer(layer);
                     me.fireEvent('arcgisrestadd', layer);
-                    checkbox.setDisabled(true);
+                    layerItem.setDisabled(true);
                     me.updateControlToolbarState();
                 });
         });
@@ -728,5 +769,15 @@ Ext.define('BasiGX.view.form.AddArcGISRest', {
         Ext.each(checkboxes, function(checkbox) {
             checkbox.setValue(false);
         });
+    },
+
+    /**
+     * Set the viewModel property availableLayersFieldSetMaxHeight when the component
+     * config property availableLayersFieldSetMaxHeight changes to it can be used in a binding
+     */
+    updateAvailableLayersFieldSetMaxHeight: function(newValue) {
+        var me = this;
+        var vm = me.getViewModel();
+        vm.set('availableLayersFieldSetMaxHeight', newValue);
     }
 });