Visualize velocity data (e.g. wind) as streamlines and particles

API/Backend/Config/validate.js

@@ -78,7 +78,10 @@ const validateLayers = (config) => {
       case "vector":
         // Check url
         if (layer.controlled !== true) errs = errs.concat(isValidUrl(layer));
-
+        break;
+      case "velocity":
+        // Check url
+        if (layer.controlled !== true) errs = errs.concat(isValidUrl(layer));
         break;
       case "model":
         // Check url

config/js/config.js

@@ -1066,6 +1066,18 @@ function makeLayerBarAndModal(d, level, options) {
         xmlEl = "none"; bbEl = "none"; vtLayerEl = "none"; vtIdEl = "none"; vtKeyEl = "none"; vtLayerSetStylesEl = "none";
         timeEl = "block"; timeTypeEl = "block"; timeStartPropEl = "block"; timeEndPropEl = "block"; timeFormatEl = "block"; timeCompositeTileEl = "none"; timeRefreshEl = "none"; timeIncrementEl = "none"; shapeEl = "block";
       break;
+    case "velocity":
+        nameEl = "block"; kindEl = "block"; typeEl = "block"; urlEl = "block"; controlledEl = "block"; demtileurlEl = "none";  demparserEl = "none";
+        descriptionEl = "block"; tagsEl = "block"; legendEl = "block";
+        visEl = "block"; viscutEl = "block"; initOpacEl = "block"; togwheadEl = "none"; minzEl = "block"; layer3dEl = "block";
+        tileformatEl = "none";
+        modelLonEl = "none"; modelLatEl = "none"; modelElevEl = "none";
+        modelRotXEl = "none"; modelRotYEl = "none"; modelRotZEl = "none"; modelScaleEl = "none";
+        maxnzEl = "none"; maxzEl = "block"; strcolEl = "block"; filcolEl = "block";
+        weightEl = "block"; opacityEl = "block"; radiusEl = "block"; variableEl = "block";
+        xmlEl = "none"; bbEl = "none"; vtLayerEl = "none"; vtIdEl = "none"; vtKeyEl = "none"; vtLayerSetStylesEl = "none";
+        timeEl = "block"; timeTypeEl = "block"; timeStartPropEl = "block"; timeEndPropEl = "block"; timeFormatEl = "block"; timeCompositeTileEl = "none"; timeRefreshEl = "none"; timeIncrementEl = "none"; shapeEl = "block";
+      break;
     case "model":
         nameEl = "block"; kindEl = "none"; typeEl = "block"; urlEl = "block"; demtileurlEl = "none"; demparserEl = "none"; controlledEl = "none";
         descriptionEl = "block"; tagsEl = "block"; legendEl = "none";
@@ -1090,7 +1102,8 @@ function makeLayerBarAndModal(d, level, options) {
     dataSel = "",
     querySel = "",
     vectorSel = "",
-    modelSel = "";
+    modelSel = "",
+    velocitySel = "";
 
   switch (d.type) {
     case "header":
@@ -1121,6 +1134,10 @@ function makeLayerBarAndModal(d, level, options) {
       barColor = "rgb(189, 189, 15)";
       modelSel = "selected";
       break;
+    case "velocity":
+      barColor = "rgb(11, 187, 222)";
+      velocitySel = "selected";
+      break;
     default:
       console.warn(`Unknown layer type: ${d.type}`);
   }
@@ -1376,6 +1393,7 @@ function makeLayerBarAndModal(d, level, options) {
                   "<option value='query' " + querySel + ">Query</option>" +
                   "<option value='vector' " + vectorSel + ">Vector</option>" +
                   "<option value='model' " + modelSel + ">Model</option>" +
+                  "<option value='velocity' " + velocitySel + ">Velocity</option>" +
                 "</optgroup>" +
               "</select>" +
               "<label>Layer Type</label>" +
@@ -1868,6 +1886,18 @@ function mmgisLinkModalsToLayersTypeChange(e) {
         timeEl = 'block'; timeTypeEl = 'block'; timeStartPropEl = 'block'; timeEndPropEl = 'block'; timeFormatEl = 'block'; timeCompositeTileEl = 'none'; timeRefreshEl = 'none'; timeIncrementEl = 'none';
         shapeEl = 'block'; queryEndpointEl = "none"; queryTypeEl = "none";
       break;
+    case "vector": barColor = "rgb(11, 187, 222)";
+        nameEl = "block"; kindEl = "block"; typeEl = "block"; urlEl = "block"; demtileurlEl = "none"; demparserEl = "none"; controlledEl = "block";
+        descriptionEl = "block"; tagsEl = "block"; legendEl = "block";
+        tileformatEl = "none"; visEl = "block"; viscutEl = "block"; initOpacEl = "block"; togwheadEl = "none"; minzEl = "block"; maxnzEl = "none"; layer3dEl = "block";
+        modelLonEl = "none"; modelLatEl = "none"; modelElevEl = "none";
+        modelRotXEl = "none"; modelRotYEl = "none"; modelRotZEl = "none"; modelScaleEl = "none";
+        maxzEl = "block"; strcolEl = "block"; filcolEl = "block"; weightEl = "block";
+        opacityEl = "block"; radiusEl = "block"; variableEl = "block";
+        xmlEl = "none"; bbEl = "none"; vtLayerEl = "none"; vtIdEl = "none"; vtKeyEl = "none"; vtLayerSetStylesEl = "none";
+        timeEl = 'block'; timeTypeEl = 'block'; timeStartPropEl = 'block'; timeEndPropEl = 'block'; timeFormatEl = 'block'; timeCompositeTileEl = 'none'; timeRefreshEl = 'none'; timeIncrementEl = 'none';
+        shapeEl = 'block'; queryEndpointEl = "none"; queryTypeEl = "none";
+      break;
     case "model": barColor = "rgb(189, 189, 15)";
         nameEl = "block"; kindEl = "none"; typeEl = "block"; urlEl = "block"; demtileurlEl = "none"; demparserEl = "none"; controlledEl = "none";
         descriptionEl = "block"; tagsEl = "block"; legendEl = "none";

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

@@ -28,6 +28,7 @@ import TravelExploreIcon from "@mui/icons-material/TravelExplore"; // Query
 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 AddIcon from "@mui/icons-material/Add";
 
 import VisibilityIcon from "@mui/icons-material/Visibility";
@@ -378,6 +379,10 @@ export default function Layers() {
                       iconType = <ViewInArIcon fontSize="small" />;
                       color = "#a98732";
                       break;
+                    case "velocity":
+                      iconType = <AirIcon fontSize="small" />;
+                      color = "#24807c";
+                      break;
                     default:
                   }
 

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

@@ -40,6 +40,7 @@ import queryConfig from "../../../../../metaconfigs/layer-query-config.json";
 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";
 
 const useStyles = makeStyles((theme) => ({
   Modal: {
@@ -192,6 +193,10 @@ const LayerModal = (props) => {
       config = vectortileConfig;
       break;
 
+    case "velocity":
+      config = velocityConfig;
+      break;
+
     default:
       break;
   }

configure/src/core/Maker.js

@@ -46,6 +46,8 @@ import CodeMirror from "@uiw/react-codemirror";
 import { json } from "@codemirror/lang-json";
 import { Button } from "@mui/material";
 
+import { evaluate_cmap, data as colormapData } from '../external/js-colormaps.js'
+
 const useStyles = makeStyles((theme) => ({
   Maker: {
     width: "100%",
@@ -143,6 +145,12 @@ const useStyles = makeStyles((theme) => ({
     margin: "4px",
     borderRadius: "4px",
   },
+  colorDropdownArrayHex: {
+    width: "20px",
+    height: "20px",
+    margin: "0px",
+    borderRadius: "4px",
+  },
   dropdown: {
     width: "100%",
   },
@@ -617,6 +625,60 @@ const getComponent = (
           )}
         </div>
       );
+    case "colordropdown":
+      let dropdown_value = value || getIn(directConf, com.field, com.options?.[0]);
+      inner = (
+        <FormControl className={c.dropdown} variant="filled" size="small">
+          <InputLabel>{com.name}</InputLabel>
+          <Select
+            value={dropdown_value}
+            onChange={(e) => {
+              updateConfiguration(
+                forceField || com.field,
+                e.target.value,
+                layer
+              );
+            }}
+          >
+            {com.options?.map((o) => {
+              return <MenuItem value={o}>{o.toUpperCase()}</MenuItem>;
+            })}
+          </Select>
+        </FormControl>
+      );
+
+      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 }
+              </div>
+              <Typography className={c.subtitle2}>
+                {com.description || ""}
+              </Typography>
+            </>
+          ) : (
+            <Tooltip title={com.description || ""} placement="top" arrow>
+              {inner}
+            </Tooltip>
+          )}
+        </div>
+      );
     case "colorpicker":
       let color;
       if (tool) color = getIn(tool, com.field.split("."), { hex: "#000000" });

configure/src/metaconfigs/layer-data-config.json

@@ -19,7 +19,8 @@
                 "query",
                 "tile",
                 "vector",
-                "vectortile"
+                "vectortile",
+                "velocity"
               ]
             },
             {

configure/src/metaconfigs/layer-header-config.json

@@ -19,7 +19,8 @@
                 "query",
                 "tile",
                 "vector",
-                "vectortile"
+                "vectortile",
+                "velocity"
               ]
             },
             {

configure/src/metaconfigs/layer-model-config.json

@@ -19,7 +19,8 @@
                 "query",
                 "tile",
                 "vector",
-                "vectortile"
+                "vectortile",
+                "velocity"
               ]
             },
             {

configure/src/metaconfigs/layer-query-config.json

@@ -19,7 +19,8 @@
                 "query",
                 "tile",
                 "vector",
-                "vectortile"
+                "vectortile",
+                "velocity"
               ]
             },
             {

configure/src/metaconfigs/layer-tile-config.json

@@ -19,7 +19,8 @@
                 "query",
                 "tile",
                 "vector",
-                "vectortile"
+                "vectortile",
+                "velocity"
               ]
             },
             {

configure/src/metaconfigs/layer-vector-config.json

@@ -19,7 +19,8 @@
                 "query",
                 "tile",
                 "vector",
-                "vectortile"
+                "vectortile",
+                "velocity"
               ]
             },
             {

configure/src/metaconfigs/layer-vectortile-config.json

@@ -19,7 +19,8 @@
                 "query",
                 "tile",
                 "vector",
-                "vectortile"
+                "vectortile",
+                "velocity"
               ]
             },
             {