Time slider

examples/earthquakes.jGIS

@@ -1,117 +1,67 @@
 {
   "layerTree": [
-    "0959c04f-a841-4fa2-8b44-d262e89e4c9a",
-    "b116b76f-e040-4908-9098-a6fbea7ca5bc"
+    "8de7c2c0-6024-4716-b542-031a89fb87f9",
+    "3e21d680-406f-4099-bd9e-3a4edb9a2c8b"
   ],
   "layers": {
-    "0959c04f-a841-4fa2-8b44-d262e89e4c9a": {
-      "name": "OpenStreetMap.Mapnik Layer",
-      "parameters": {
-        "source": "a7ed9785-8797-4d6d-a6a9-062ce78ba7ba"
+    "3e21d680-406f-4099-bd9e-3a4edb9a2c8b": {
+      "filters": {
+        "appliedFilters": [],
+        "logicalOp": "all"
       },
-      "type": "RasterLayer",
-      "visible": true
-    },
-    "b116b76f-e040-4908-9098-a6fbea7ca5bc": {
-      "name": "earthquakes",
+      "name": "Custom GeoJSON Layer",
       "parameters": {
         "color": {
-          "circle-fill-color": [
-            "case",
-            [
-              "==",
-              [
-                "get",
-                "tsunami"
-              ],
-              0.0
-            ],
-            [
-              125.0,
-              0.0,
-              179.0,
-              1.0
-            ],
-            [
-              "==",
-              [
-                "get",
-                "tsunami"
-              ],
-              1.0
-            ],
-            [
-              147.0,
-              255.0,
-              0.0,
-              1.0
-            ],
-            [
-              0.0,
-              0.0,
-              0.0,
-              0.0
-            ]
-          ],
-          "circle-radius": [
-            "interpolate",
-            [
-              "linear"
-            ],
-            [
-              "get",
-              "mag"
-            ],
-            1.0,
-            1.0,
-            2.0,
-            2.0,
-            3.0,
-            3.0,
-            4.0,
-            4.0,
-            5.0,
-            5.0,
-            6.0,
-            6.0
-          ],
-          "circle-stroke-color": "#3399CC",
+          "circle-fill-color": "#f66151",
+          "circle-radius": 5.0,
+          "circle-stroke-color": "#62a0ea",
           "circle-stroke-line-cap": "round",
           "circle-stroke-line-join": "round",
           "circle-stroke-width": 1.25
         },
         "opacity": 1.0,
-        "source": "dc048820-75cd-4b8d-a1fb-91642901cd82",
+        "source": "348d85fa-3a71-447f-8a64-e283ec47cc7c",
         "symbologyState": {
-          "colorRamp": "cool",
-          "mode": "",
-          "nClasses": "",
-          "renderType": "Categorized",
-          "value": "tsunami"
+          "renderType": "Single Symbol"
         },
         "type": "circle"
       },
       "type": "VectorLayer",
       "visible": true
+    },
+    "8de7c2c0-6024-4716-b542-031a89fb87f9": {
+      "name": "OpenStreetMap.Mapnik Layer",
+      "parameters": {
+        "source": "b2ea427a-a51b-43ad-ae72-02cd900736d5"
+      },
+      "type": "RasterLayer",
+      "visible": true
     }
   },
   "metadata": {},
   "options": {
     "bearing": 0.0,
     "extent": [
-      -14291047.530673811,
-      -3536164.7121253638,
-      -9426274.876637986,
-      9088825.15152122
+      -14723872.80667293,
+      -4835119.4874388315,
+      -1931504.9042952778,
+      13305887.78837996
     ],
-    "latitude": 24.187972965810673,
-    "longitude": -106.52816608439294,
+    "latitude": 35.52446437432016,
+    "longitude": -74.80890180273175,
     "pitch": 0.0,
     "projection": "EPSG:3857",
-    "zoom": 3.8783091860507373
+    "zoom": 2.6670105136699993
   },
   "sources": {
-    "a7ed9785-8797-4d6d-a6a9-062ce78ba7ba": {
+    "348d85fa-3a71-447f-8a64-e283ec47cc7c": {
+      "name": "Custom GeoJSON Layer Source",
+      "parameters": {
+        "path": "../../examples/eq.json"
+      },
+      "type": "GeoJSONSource"
+    },
+    "b2ea427a-a51b-43ad-ae72-02cd900736d5": {
       "name": "OpenStreetMap.Mapnik",
       "parameters": {
         "attribution": "(C) OpenStreetMap contributors",
@@ -122,13 +72,6 @@
         "urlParameters": {}
       },
       "type": "RasterSource"
-    },
-    "dc048820-75cd-4b8d-a1fb-91642901cd82": {
-      "name": "Custom GeoJSON Layer Source",
-      "parameters": {
-        "path": "eq.json"
-      },
-      "type": "GeoJSONSource"
     }
   }
 }

packages/base/package.json

@@ -68,6 +68,7 @@
     "ajv": "^8.14.0",
     "colormap": "^2.3.2",
     "d3-color": "^3.1.0",
+    "date-fns": "^4.1.0",
     "gdal3.js": "^2.8.1",
     "geojson-vt": "^4.0.2",
     "geotiff": "^2.1.3",

packages/base/src/commands.ts

@@ -170,6 +170,55 @@ export function addCommands(
     ...icons.get(CommandIDs.identify)
   });
 
+  commands.addCommand(CommandIDs.temporalController, {
+    label: trans.__('Temporal Controller'),
+    isToggled: () => {
+      return tracker.currentWidget?.model.isTemporalControllerActive || false;
+    },
+    isEnabled: () => {
+      const model = tracker.currentWidget?.model;
+      if (!model) {
+        return false;
+      }
+
+      const selectedLayers = model.localState?.selected?.value;
+      if (!selectedLayers) {
+        return false;
+      }
+
+      const layerId = Object.keys(selectedLayers)[0];
+      const layerType = model.getLayer(layerId)?.type;
+      if (!layerType) {
+        return false;
+      }
+
+      // Selection should only be one vector or heatmap layer
+      const isSelectionValid =
+        Object.keys(selectedLayers).length === 1 &&
+        !model.getSource(layerId) &&
+        ['VectorLayer', 'HeatmapLayer'].includes(layerType);
+
+      if (!isSelectionValid && model.isTemporalControllerActive) {
+        model.toggleTemporalController();
+        commands.notifyCommandChanged(CommandIDs.temporalController);
+
+        return false;
+      }
+
+      return true;
+    },
+    execute: () => {
+      const current = tracker.currentWidget;
+      if (!current) {
+        return;
+      }
+
+      current.model.toggleTemporalController();
+      commands.notifyCommandChanged(CommandIDs.temporalController);
+    },
+    ...icons.get(CommandIDs.temporalController)
+  });
+
   /**
    * SOURCES and LAYERS creation commands.
    */

packages/base/src/constants.ts

@@ -10,6 +10,7 @@ export namespace CommandIDs {
   export const undo = 'jupytergis:undo';
   export const symbology = 'jupytergis:symbology';
   export const identify = 'jupytergis:identify';
+  export const temporalController = 'jupytergis:temporalController';
 
   // Layers and sources creation commands
   export const openLayerBrowser = 'jupytergis:openLayerBrowser';
@@ -99,7 +100,8 @@ const iconObject = {
   [CommandIDs.newShapefileLayer]: { iconClass: 'fa fa-file' },
   [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
   [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
-  [CommandIDs.identify]: { iconClass: 'fa fa-info' }
+  [CommandIDs.identify]: { iconClass: 'fa fa-info' },
+  [CommandIDs.temporalController]: { iconClass: 'fa fa-clock' }
 };
 
 /**

packages/base/src/dialogs/symbology/hooks/useGetProperties.ts

@@ -10,7 +10,7 @@ interface IUseGetPropertiesProps {
 }
 
 interface IUseGetPropertiesResult {
-  featureProps: Record<string, Set<any>>;
+  featureProperties: Record<string, Set<any>>;
   isLoading: boolean;
   error?: Error;
 }
@@ -19,7 +19,7 @@ export const useGetProperties = ({
   layerId,
   model
 }: IUseGetPropertiesProps): IUseGetPropertiesResult => {
-  const [featureProps, setFeatureProps] = useState<any>({});
+  const [featureProperties, setFeatureProperties] = useState<any>({});
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | undefined>(undefined);
 
@@ -51,17 +51,15 @@ export const useGetProperties = ({
       data.features.forEach((feature: GeoJSONFeature1) => {
         if (feature.properties) {
           Object.entries(feature.properties).forEach(([key, value]) => {
-            if (typeof value !== 'string') {
-              if (!(key in result)) {
-                result[key] = new Set();
-              }
-              result[key].add(value);
+            if (!(key in result)) {
+              result[key] = new Set();
             }
+            result[key].add(value);
           });
         }
       });
 
-      setFeatureProps(result);
+      setFeatureProperties(result);
       setIsLoading(false);
     } catch (err) {
       setError(err as Error);
@@ -73,5 +71,5 @@ export const useGetProperties = ({
     getProperties();
   }, [model, layerId]);
 
-  return { featureProps, isLoading, error };
+  return { featureProperties, isLoading, error };
 };

packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx

@@ -2,6 +2,7 @@ import { IVectorLayer } from '@jupytergis/schema';
 import { ReadonlyJSONObject } from '@lumino/coreutils';
 import { ExpressionValue } from 'ol/expr/expression';
 import React, { useEffect, useRef, useState } from 'react';
+import { getNumericFeatureAttributes } from '../../../../tools';
 import ColorRamp from '../../components/color_ramp/ColorRamp';
 import StopContainer from '../../components/color_stops/StopContainer';
 import { useGetProperties } from '../../hooks/useGetProperties';
@@ -25,6 +26,7 @@ const Categorized = ({
   const [colorRampOptions, setColorRampOptions] = useState<
     ReadonlyJSONObject | undefined
   >();
+  const [features, setFeatures] = useState<Record<string, Set<number>>>({});
 
   if (!layerId) {
     return;
@@ -33,7 +35,7 @@ const Categorized = ({
   if (!layer?.parameters) {
     return;
   }
-  const { featureProps } = useGetProperties({
+  const { featureProperties } = useGetProperties({
     layerId,
     model: model
   });
@@ -55,22 +57,23 @@ const Categorized = ({
   }, []);
 
   useEffect(() => {
-    populateOptions();
-  }, [featureProps]);
+    // We only want number values here
+    const numericFeatures = getNumericFeatureAttributes(featureProperties);
 
-  useEffect(() => {
-    selectedValueRef.current = selectedValue;
-    stopRowsRef.current = stopRows;
-    colorRampOptionsRef.current = colorRampOptions;
-  }, [selectedValue, stopRows, colorRampOptions]);
+    setFeatures(numericFeatures);
 
-  const populateOptions = async () => {
     const layerParams = layer.parameters as IVectorLayer;
     const value =
-      layerParams.symbologyState?.value ?? Object.keys(featureProps)[0];
+      layerParams.symbologyState?.value ?? Object.keys(numericFeatures)[0];
 
     setSelectedValue(value);
-  };
+  }, [featureProperties]);
+
+  useEffect(() => {
+    selectedValueRef.current = selectedValue;
+    stopRowsRef.current = stopRows;
+    colorRampOptionsRef.current = colorRampOptions;
+  }, [selectedValue, stopRows, colorRampOptions]);
 
   const buildColorInfoFromClassification = (
     selectedMode: string,
@@ -85,7 +88,7 @@ const Categorized = ({
       selectedMode: ''
     });
 
-    const stops = Array.from(featureProps[selectedValue]).sort((a, b) => a - b);
+    const stops = Array.from(features[selectedValue]).sort((a, b) => a - b);
 
     const valueColorPairs = Utils.getValueColorPairs(
       stops,
@@ -145,7 +148,7 @@ const Categorized = ({
   return (
     <div className="jp-gis-layer-symbology-container">
       <ValueSelect
-        featureProperties={featureProps}
+        featureProperties={features}
         selectedValue={selectedValue}
         setSelectedValue={setSelectedValue}
       />