Merge ma dj2

visualize/static/js/events.js

@@ -6,8 +6,17 @@
 if (!app.wrapper.events.hasOwnProperty('clickOnArcRESTLayerEvent')) {
   app.wrapper.events.clickOnArcRESTLayerEvent = function(layer, evt){
     if (app.wrapper.map.getLayerParameter(layer, 'url')){
-      var identifyUrl = app.wrapper.map.getLayerParameter(layer, 'url')
-      .replace('export', app.wrapper.map.getLayerParameter(layer, 'arcgislayers') + '/query');
+
+      var identifyUrl = app.wrapper.map.getLayerParameter(layer, 'url');
+
+      if (identifyUrl.indexOf('export') >= 0) {
+        identifyUrl = identifyUrl.replace('export', app.wrapper.map.getLayerParameter(layer, 'arcgislayers') + '/query');
+      } else {
+        if (identifyUrl[identifyUrl.length-1] != "/") {
+          identifyUrl += '/'
+        }
+        identifyUrl += app.wrapper.map.getLayerParameter(layer, 'arcgislayers') + '/query';
+      }
     } else {
       var identifyUrl = '';
     }

visualize/static/js/models.js

@@ -44,6 +44,7 @@ function layerModel(options, parent) {
     self.data_download = ko.observable(options.data_download || null);
     self.metadata = ko.observable(options.metadata || null);
     self.source = ko.observable(options.source || null);
+    self.hasInfo = ko.observable(false);
 
     // if layer is loaded from hash, preserve opacity, etc...
     self.override_defaults = ko.observable(null);
@@ -236,6 +237,10 @@ function layerModel(options, parent) {
       self.source(options.source || null);
       self.tiles = options.tiles || null;
 
+      if (options.description || options.kml || options.data_download || options.metadata || options.source) {
+          self.hasInfo(true);
+      }
+
       if (self.type === 'checkbox') {
         self.isCheckBoxLayer(true);
       }
@@ -296,6 +301,17 @@ function layerModel(options, parent) {
 
 
     getArcGISJSONLegend = function(self, protocol) {
+
+      if (self.url.toLowerCase().indexOf('/export') < 0) {
+          var url_split = self.url.split('?');
+          if (url_split[0][url_split[0].length-1] == '/') {
+            url_split[0] = url_split[0] + "export";
+          } else {
+            url_split[0] = url_split[0] + "/export";
+          }
+          self.url = url_split.join('?');
+      }
+
       if (self.url.indexOf('?') < 0) {
         var url = self.url.replace('/export', '/legend/?f=pjson');
       } else {
@@ -305,17 +321,44 @@ function layerModel(options, parent) {
         url = url.replace('http:', 'https:');
       }
       $.ajax({
-          dataType: "jsonp",
+          dataType: "json",
           url: url,
           type: 'GET',
           crossDomain: true,
           success: function(data) {
+              // append '/export' if missing:
+              //    RDH 2020-09-17: I'm not sure why self.url wasn't already modified earlier in this function, but this step is necessary
+              //        as the '/export' seems to get dropped (a timeout may also have fixed the problem, but this is more absolute).
+              if (self.url.toLowerCase().indexOf('/export') < 0) {
+                  var url_split = self.url.split('?');
+                  if (url_split[0][url_split[0].length-1] == '/') {
+                    url_split[0] = url_split[0] + "export";
+                  } else {
+                    url_split[0] = url_split[0] + "/export";
+                  }
+                  self.url = url_split.join('?');
+              }
+
               if (data['layers']) {
+                  if (typeof(self.arcgislayers) == "number") {
+                      var requested_layers = [self.arcgislayers.toString()];
+                  } else if (typeof(self.arcgislayers) == "object") {
+                    var requested_layers = [];
+                    for (var i = 0; i < self.arcgislayers.length; i++) {
+                      requested_layers.push(self.arcgislayers[i].toString());
+                    }
+                  } else if (typeof(self.arcgislayers) == "string"){
+                      var requested_layers = self.arcgislayers.replace(/ /g,'').split(',');
+                  } else {
+                    // punt
+                    var requested_layers = self.arcgislayers;
+                  }
+
+                  self.legend = {'elements': []};
                   $.each(data['layers'], function(i, layerobj) {
-                      if (parseInt(layerobj['layerId'], 10) === parseInt(self.arcgislayers, 10)) {
-                          self.legend = {'elements': []};
+                      if (requested_layers.indexOf(parseInt(layerobj['layerId'], 10).toString()) >= 0) {
                           $.each(layerobj['legend'], function(j, legendobj) {
-                              var swatchURL = self.url.replace('/export', '/'+self.arcgislayers+'/images/'+legendobj['url']),
+                              var swatchURL = self.url.replace('/export', '/'+parseInt(layerobj['layerId'], 10)+'/images/'+legendobj['url']),
                                   label = legendobj['label'];
                               if (j < 1 && label === "") {
                                   label = layerobj['layerName'];
@@ -713,10 +756,6 @@ function layerModel(options, parent) {
           layer.override_defaults(true);
         }
 
-        if (app.wrapper.events.hasOwnProperty('addLayerLoadStart')) {
-          layer.loadStatus("loading");
-        }
-
         if (layer instanceof layerModel) {
           if (layer.fullyLoaded || layer.isMDAT || layer.isVTR || layer.wmsSession()) {
             if (!layer.hasOwnProperty('url') || !layer.url || layer.url.length < 1 || layer.hasOwnProperty('type') && layer.type == 'placeholder') {
@@ -726,7 +765,7 @@ function layerModel(options, parent) {
             // if legend is not provided, try using legend from web services
             if ( !self.legend && self.url && (self.arcgislayers !== -1) ) {
               setTimeout(function() {
-                if (self.url.indexOf('FeatureServer') >= 0) {
+                if ( self.url.indexOf('FeatureServer') >= 0) {
                   try {
                     getArcGISFeatureServerLegend(self, window.location.profotol);
                   } catch (err) {
@@ -1690,7 +1729,10 @@ function themeModel(options) {
           for (var i = 0; i < data.layers.length; i++) {
             new_layer = app.viewModel.getOrCreateLayer(data.layers[i], null, 'return', null);
             new_layer.themes.push(theme);
-            layer_objects.push(new_layer)
+            layer_objects.push(new_layer);
+            if (!new_layer.fullyLoaded) {
+              new_layer.getFullLayerRecord(null, null);
+            }
           }
           theme.layers(layer_objects);
         },
@@ -2094,7 +2136,7 @@ function viewModel() {
 
     // attribute data
     self.aggregatedAttributes = ko.observable(false);
-    self.aggregatedAttributesWidth = ko.observable('280px');
+    self.aggregatedAttributesWidth = ko.observable('30vw');
     self.aggregatedAttributes.subscribe( function() {
         self.updateAggregatedAttributesOverlayWidthAndScrollbar();
         self.showFeatureAttribution( self.featureAttribution() && !($.isEmptyObject(self.aggregatedAttributes())) );
@@ -2114,7 +2156,7 @@ function viewModel() {
             // var overlayWidth = (document.getElementById('aggregated-attribute-overlay-test').clientWidth+50),
             //     width = overlayWidth < 380 ? overlayWidth : 380;
             //console.log('setting overlay width to ' + width);
-            self.aggregatedAttributesWidth(280 + 'px');
+            self.aggregatedAttributesWidth('30vw');
         }, 500);
     };
 
@@ -2438,6 +2480,7 @@ function viewModel() {
       if (!app.map.measurementLayer) {
         app.addMeasurementLayerToMap();
       }
+
       if (app.wrapper.controls.hasOwnProperty('startLinearMeasurement')) {
         if ($('#linear-measurement i').hasClass('fa-ruler-vertical')) {
           app.wrapper.controls.startLinearMeasurement();

visualize/static/js/wrappers/ol6/ol6_controls.js

@@ -568,9 +568,31 @@ app.wrapper.controls.updateMeasurementText = function(event) {
 
 }
 
-app.wrapper.controls.startLinearMeasurement = function(event) {
-    app.wrapper.controls.measurementFeature = event.feature;
-    app.wrapper.controls.measurementListener = app.wrapper.controls.measurementFeature.getGeometry().on('change', app.wrapper.controls.updateMeasurementText)
+// app.wrapper.controls.startLinearMeasurement = function(event) {
+//     app.wrapper.controls.measurementFeature = event.feature;
+//     app.wrapper.controls.measurementListener = app.wrapper.controls.measurementFeature.getGeometry().on('change', app.wrapper.controls.updateMeasurementText)
+// }
+
+// Not sure why this function was written twice - overloading did not seem to work
+// However, later let's get that update logic from the other function (above) working
+// in this function. RDH 2/2/2021
+app.wrapper.controls.startLinearMeasurement = function() {
+  if (!app.wrapper.controls.linearMeasurementControl) {
+    app.wrapper.controls.createLinearControl();
+  } else {
+    app.wrapper.controls.linearMeasurementControl.setActive(true);
+  }
+
+  // Clear features from Measurement layer!
+  app.map.measurementLayer.getSource().clear();
+
+  // Activate drawing (linestring)
+  app.map.addInteraction(app.wrapper.controls.linearMeasurementControl);
+
+  $('#measurement-display').show();
+  // change $('#linear-measurement-button') to work as cancel/clear
+  $('#linear-measurement i').removeClass('fa-ruler-vertical');
+  $('#linear-measurement i').addClass('fa-times');
 }
 
 app.wrapper.controls.createLinearControl = function() {
@@ -601,24 +623,6 @@ app.wrapper.controls.createLinearControl = function() {
   });
 }
 
-app.wrapper.controls.startLinearMeasurement = function() {
-  if (!app.wrapper.controls.linearMeasurementControl) {
-    app.wrapper.controls.createLinearControl();
-  } else {
-    app.wrapper.controls.linearMeasurementControl.setActive(true);
-  }
-
-  // Clear features from Measurement layer!
-  app.map.measurementLayer.getSource().clear();
-
-  // Activate drawing (linestring)
-  app.map.addInteraction(app.wrapper.controls.linearMeasurementControl);
-
-  $('#measurement-display').show();
-  // change $('#linear-measurement-button') to work as cancel/clear
-  $('#linear-measurement i').removeClass('fa-ruler-vertical');
-  $('#linear-measurement i').addClass('fa-times');
-}
 
 app.wrapper.controls.clearLinearMeasurement = function() {
   $('#measurement-display').hide();

visualize/static/js/wrappers/ol6/ol6_events.js

@@ -38,6 +38,7 @@ app.wrapper.events.addFeatureClickEvent = function(){
   app.map.addInteraction(app.map.interactions.selectClick);
   app.map.interactions.selectClick.on('select', function(e) {
     var selected_features = app.map.getFeaturesAtPixel(e.mapBrowserEvent.pixel);
+    // var selected_features = e.selected;
     if (selected_features.length > 0) {
       for (var i = 0; i < selected_features.length; i++) {
         var layer = selected_features[i].getLayer(app.map);
@@ -345,7 +346,7 @@ app.wrapper.events.layerLoadStart = function(layerModel) {
   * @param {object} layerModel - the layerModel to add layer loading logic to
   */
 app.wrapper.events.addLayerLoadStart = function(layerModel) {
-  if (layerModel.layer.hasOwnProperty('url') && layerModel.layer.url && layerModel.layer.url.length > 0 && layerModel.type.toLowerCase() != 'placeholder') {
+  if (layerModel.hasOwnProperty('url') && layerModel.url && layerModel.url.length > 0 && layerModel.type.toLowerCase() != 'placeholder') {
     if (app.wrapper.events.tileSources.indexOf(layerModel.type) >= 0) {
       layerModel.layer.getSource().on('tileloadstart', function() {
         app.wrapper.events.layerLoadStart(layerModel);

visualize/static/visualize/css/attribute_report.css

@@ -1,5 +1,6 @@
 #aggregated-attribute-overlay {
   z-index: 1020 !important;
+  min-width: 280px;
 }
 
 .feature-attributes {

visualize/static/visualize/css/layer-nav.css

@@ -0,0 +1,6 @@
+body.template-visualize .layer-info .layer-text {
+  max-height: 114px;
+  overflow-y: auto;
+  border: 1px solid #CCC;
+  border-radius: 0.3rem;
+}

visualize/templates/visualize/includes/layer-row.html

@@ -2,14 +2,16 @@
     <tr>
         <td class="layer-info-icon">
         <!-- ko ifnot: $data.hasOwnProperty('isMDAT') && $data.isMDAT -->
-            <a class="btn btn-info-sign" data-bind="click: toggleDescription, css: { 'active': infoActive()}" data-toggle="tooltip" data-placement="right" data-title="More Info">
+          <div style="margin:0;padding:0;width:40.5px;height:33px">
+            <a class="btn btn-info-sign" data-bind="visible: hasInfo(), click: toggleDescription, css: { 'active': infoActive()}" data-toggle="tooltip" data-placement="right" data-title="More Info">
                 <i class="fa fa-info-circle"></i>
             </a>
+          </div>
         <!-- /ko -->
         <!-- ko if: $data.hasOwnProperty('isMDAT') && $data.isMDAT && $data.parentMDATDirectory -->
-            <a class="btn btn-info-sign" data-bind="attr: {'data-title': parentMDATDirectory.name }" data-toggle="tooltip" data-placement="right">
-                <i class="fa fa-info-circle"></i>
-            </a>
+              <a class="btn btn-info-sign" data-bind="attr: {'data-title': parentMDATDirectory.name }" data-toggle="tooltip" data-placement="right">
+                  <i class="fa fa-info-circle"></i>
+              </a>
         <!-- /ko -->
         </td>
         <!-- ko if: $data instanceof layerModel -->
@@ -106,8 +108,8 @@
             <!-- /ko -->
         </span>
     </div>
-    <div class="layer-text">
-        <span data-bind="truncatedText: description, maxTextLength: 200"></span>
+    <div class="layer-text" data-bind="visible: description">
+        <span data-bind="text: description" class="layer-description"></span>
         <!-- ko if: $data.hasOwnProperty('data_url') && $data.data_url -->
         <a data-bind="attr: {href: $data.data_url}" target="_blank">read more</a>.
         <!-- /ko -->

visualize/templates/visualize/planner.html

@@ -18,6 +18,7 @@
         <link href="{% static 'visualize/css/attribute_report.css' %}" rel="stylesheet">
         <link href="{% static 'visualize/css/linearmeasurement.css' %}" rel="stylesheet">
         <link href="{% static 'visualize/css/modals.css' %}" rel="stylesheet">
+        <link href="{% static 'visualize/css/layer-nav.css' %}" rel="stylesheet">
         <link href="{% static 'visualize/css/basemap.css' %}" rel="stylesheet">
         {% if MAP_LIBRARY == 'ol5' %}
           <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

visualize/templates/visualize/scenarios.html

@@ -156,9 +156,9 @@
                                                         </table>
                                                         <!-- ko if: $data.description -->
                                                         <div class="layer-info" data-bind="visible: infoActive()">
-                                                             <div class="layer-text">
-                                                                 <span data-bind="truncatedText: description, maxTextLength: 200"></span>
-                                                             </div>
+                                                            <div class="layer-text">
+                                                              <span data-bind="text: description" class="layer-description"></span>
+                                                            </div>
                                                         </div>
                                                         <!-- /ko -->
                                                     </li>
@@ -376,7 +376,7 @@
                                                         </span>
                                                     </div>
                                                     <div class="layer-text">
-                                                        <span data-bind="truncatedText: description, maxTextLength: 200"></span>
+                                                        <span data-bind="text: description" class="layer-description"></span>
                                                         <!-- ko if: $data.data_url -->
                                                         <a data-bind="attr: {href: $data.data_url}">read
                                                             more</a>.
@@ -576,7 +576,7 @@
                                                         </span>
                                                     </div>
                                                     <div class="layer-text">
-                                                        <span data-bind="truncatedText: description, maxTextLength: 200"></span>
+                                                        <span data-bind="text: description" class="layer-description"></span>
                                                         <!-- ko if: $data.data_url -->
                                                         <a data-bind="attr: {href: $data.data_url}">read
                                                             more</a>.
@@ -779,7 +779,7 @@
                                                         </span>
                                                     </div>
                                                     <div class="layer-text">
-                                                        <span data-bind="truncatedText: description, maxTextLength: 200"></span>
+                                                        <span data-bind="text: description" class="layer-description"></span>
                                                         <!-- ko if: $data.data_url -->
                                                         <a data-bind="attr: {href: $data.data_url}">read
                                                             more</a>.