Merge remote-tracking branch 'origin/development' into ac-fix-symlink

API/Backend/Config/routes/configs.js

@@ -694,7 +694,7 @@ function addLayer(req, res, next, cb, forceConfig, caller = "addLayer") {
     mission: "{mission_name}",
     layer: {
       name: "{new_layer_name}",
-      type: "header || vector || vectortile || query || model || tile || data",
+      type: "header || vector || vectortile || query || model || tile || data || image",
       "more...": "...",
     },
     "placement?": {

API/Backend/Config/validate.js

@@ -89,6 +89,12 @@ const validateLayers = (config) => {
         // Check model params (pos, rot, scale)
         errs = errs.concat(isValidModelParams(layer));
         break;
+      case "image":
+        // Check url
+        errs = errs.concat(isValidUrl(layer));
+        // Check zooms
+        errs = errs.concat(isValidZooms(layer));
+        break;
       default:
         errs = errs.concat(
           err(`Unknown layer type: '${layer.type}'`, ["layers[layer].type"])
@@ -316,6 +322,10 @@ const fillInMissingFieldsWithDefaults = (layer) => {
       layer.style = layer.style || {};
       layer.style.className = layer.name.replace(/ /g, "").toLowerCase();
       break;
+    case "image":
+      layer.style = layer.style || {};
+      layer.style.className = layer.name.replace(/ /g, "").toLowerCase();
+      break;
     case "model":
       break;
     default:

API/Backend/Draw/routes/draw.js

@@ -204,7 +204,7 @@ const clipOver = function (
           historyIndex: lastHistory[0].history_id + 1,
           history: lastHistory[0].history,
         };
-      } else return { historyIndex: 0, history: [] };
+      } else return { historyIndex: 0, history: null };
     })
     .then((historyObj) => {
       let history = historyObj.history;
@@ -335,7 +335,7 @@ const clipUnder = function (
           historyIndex: lastHistory[0].history_id + 1,
           history: lastHistory[0].history,
         };
-      } else return { historyIndex: 0, history: [] };
+      } else return { historyIndex: 0, history: null };
     })
     .then((historyObj) => {
       let history = historyObj.history;

API/Backend/Utils/routes/utils.js

@@ -296,6 +296,25 @@ router.post("/getbands", function (req, res) {
   );
 });
 
+//utils getminmax
+router.post("/getminmax", function (req, res) {
+  const path = encodeURIComponent(req.body.path);
+  const bands = encodeURIComponent(req.body.bands);
+
+  execFile(
+    "python",
+    ["private/api/gdalinfoMinMax.py", path, bands],
+    function (error, stdout, stderr) {
+      if (error) {
+        logger("warn", error);
+        res.status(400).send();
+      } else {
+        res.send(stdout);
+      }
+    }
+  );
+});
+
 //utils ll2aerll
 router.post("/ll2aerll", function (req, res) {
   const lng = encodeURIComponent(req.body.lng);

configuration/env.js

@@ -109,6 +109,7 @@ function getClientEnvironment(publicUrl) {
         THIRD_PARTY_COOKIES: process.env.THIRD_PARTY_COOKIES || "",
         SKIP_CLIENT_INITIAL_LOGIN: process.env.SKIP_CLIENT_INITIAL_LOGIN || "",
         IS_DOCKER: process.env.IS_DOCKER,
+        WITH_TITILER: process.env.WITH_TITILER,
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin

configuration/webpack.config.js

@@ -381,7 +381,7 @@ module.exports = function (webpackEnv) {
             // Process any JS outside of the app with Babel.
             // Unlike the application JS, we only compile the standard ES features.
             {
-              test: /\.(js|mjs)$/,
+              test: /\.(js|mjs|cjs)$/,
               exclude: /@babel(?:\/|\\{1,2})runtime/,
               loader: require.resolve("babel-loader"),
               options: {

configure/src/components/Tabs/Layers/Layers.js

@@ -29,6 +29,7 @@ import LanguageIcon from "@mui/icons-material/Language"; // Tile
 import GridViewIcon from "@mui/icons-material/GridView"; // Vector tile
 import ViewInArIcon from "@mui/icons-material/ViewInAr"; // Model
 import AirIcon from "@mui/icons-material/Air"; // Velocity
+import ImageIcon from '@mui/icons-material/Image'; // Image
 import AddIcon from "@mui/icons-material/Add";
 
 import VisibilityIcon from "@mui/icons-material/Visibility";
@@ -386,6 +387,9 @@ export default function Layers() {
                     case "velocity":
                       iconType = <AirIcon fontSize="small" />;
                       color = "#24807c";
+                    case "image":
+                      iconType = <ImageIcon fontSize="small" />;
+                      color = "#b0518f";
                       break;
                     default:
                   }

configure/src/components/Tabs/Layers/Modals/LayerModal/LayerModal.js

@@ -45,6 +45,7 @@ import tileConfig from "../../../../../metaconfigs/layer-tile-config.json";
 import vectorConfig from "../../../../../metaconfigs/layer-vector-config.json";
 import vectortileConfig from "../../../../../metaconfigs/layer-vectortile-config.json";
 import velocityConfig from "../../../../../metaconfigs/layer-velocity-config.json";
+import imageConfig from "../../../../../metaconfigs/layer-image-config.json";
 
 const useStyles = makeStyles((theme) => ({
   Modal: {
@@ -196,6 +197,10 @@ const LayerModal = (props) => {
       config = velocityConfig;
       break;
 
+    case "image":
+      config = imageConfig;
+      break;
+
     default:
       break;
   }

configure/src/core/Maker.js

@@ -256,6 +256,9 @@ const getComponent = (
           }}
           value={value != null ? value : getIn(directConf, com.field, "")}
           onChange={(e) => {
+            updateConfiguration(forceField || com.field, e.target.value, layer);
+          }}
+          onBlur={(e) => {
             let v = e.target.value;
             // remove surrounding whitespace, " hi " -> "hi"
             if (typeof v === "string") v = v.trim();
@@ -280,6 +283,39 @@ const getComponent = (
           )}
         </div>
       );
+    case "textnotrim":
+      inner = (
+        <TextField
+          className={c.text}
+          label={com.name}
+          variant="filled"
+          size="small"
+          inputProps={{
+            autoComplete: "off",
+          }}
+          value={value != null ? value : getIn(directConf, com.field, "")}
+          onChange={(e) => {
+            updateConfiguration(forceField || com.field, e.target.value, layer);
+          }}
+        />
+      );
+      return (
+        <div>
+          {inlineHelp ? (
+            <>
+              {inner}
+              <div
+                className={c.subtitle2}
+                dangerouslySetInnerHTML={{ __html: com.description || "" }}
+              ></div>
+            </>
+          ) : (
+            <Tooltip title={com.description || ""} placement="top" arrow>
+              {inner}
+            </Tooltip>
+          )}
+        </div>
+      );
     case "button":
       inner = (
         <Button
@@ -685,31 +721,96 @@ const getComponent = (
         </FormControl>
       );
 
+      let domain =
+      window.mmgisglobal.NODE_ENV === "development"
+        ? "http://localhost:8888/"
+        : window.mmgisglobal.ROOT_PATH || "";
+      if (domain.length > 0 && !domain.endsWith("/")) domain += "/";
+
+      let colormap_html
+      if (window.mmgisglobal.WITH_TITILER === "true") {
+        // Get colors from TiTiler if it is available
+        colormap_html = (
+          <div style={{width: "100%"}}>
+            <img id="titlerCogColormapImage" style={{height: "20px", width: "100%"}} src={`${domain}titiler/colorMaps/${dropdown_value.toLowerCase()}?format=png`} />
+          </div>
+        )
+      } else {
+        let colormap = dropdown_value
+        // js-colormaps data object only contains the non reversed color so we need to track if the color is reversed
+        let reverse = false
+
+        // TiTiler colormap variables are all lower case so we need to format them correctly for js-colormaps
+        if (colormap.toLowerCase().endsWith('_r')) {
+            colormap = colormap.substring(0, colormap.length - 2)
+            reverse = true
+        }
+
+        let index = Object.keys(colormapData).findIndex(v => {
+          return v.toLowerCase() === colormap.toLowerCase();
+        });
+
+        if (index > -1) {
+          colormap = Object.keys(colormapData)[index]
+        } else {
+          console.warn(`The colormap '${colormap}' does not exist`);
+        }
+
+        if (colormap in colormapData) {
+          colormap_html = colormapData[colormap].colors.map(
+            (hex) => {
+              return (
+                <div
+                  className={c.colorDropdownArrayHex}
+                  style={{ background: `rgb(${hex.map(v => {return Math.floor(v * 255)}).join(',')})` }}
+                ></div>
+              );
+            }
+          )
+
+          if (reverse === true) {
+            colormap_html.reverse()
+          }
+        } else if (colormap === 'DEFAULT') {
+          // Default color for velocity layer
+          const defaultColors = [
+            'rgb(36,104, 180)',
+            'rgb(60,157, 194)',
+            'rgb(128,205,193 )',
+            'rgb(151,218,168 )',
+            'rgb(198,231,181)',
+            'rgb(238,247,217)',
+            'rgb(255,238,159)',
+            'rgb(252,217,125)',
+            'rgb(255,182,100)',
+            'rgb(252,150,75)',
+            'rgb(250,112,52)',
+            'rgb(245,64,32)',
+            'rgb(237,45,28)',
+            'rgb(220,24,32)',
+            'rgb(180,0,35)',
+          ]
+
+          colormap_html = defaultColors.map(
+            (hex) => {
+              return (
+                <div
+                  className={c.colorDropdownArrayHex}
+                  style={{ background: `${hex}`}}
+                ></div>
+              );
+            }
+          )
+        }
+      }
+
       return (
         <div>
           {inlineHelp ? (
             <>
               {inner}
               <div className={c.textArrayHexes}>
-                {typeof dropdown_value === "string"
-                  ? colormapData[dropdown_value] &&
-                    colormapData[dropdown_value].colors
-                    ? colormapData[dropdown_value].colors.map((hex) => {
-                        return (
-                          <div
-                            className={c.colorDropdownArrayHex}
-                            style={{
-                              background: `rgb(${hex
-                                .map((v) => {
-                                  return Math.floor(v * 255);
-                                })
-                                .join(",")})`,
-                            }}
-                          ></div>
-                        );
-                      })
-                    : null
-                  : null}
+                {colormap_html || null}
               </div>
               <Typography className={c.subtitle2}>
                 {com.description || ""}