Add story maps

packages/base/package.json

@@ -68,6 +68,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@rjsf/core": "^4.2.0",
@@ -93,6 +94,7 @@
     "proj4-list": "1.0.4",
     "react": "^18.0.1",
     "react-day-picker": "^9.7.0",
+    "react-markdown": "^10.1.0",
     "shpjs": "^6.1.0",
     "styled-components": "^5.3.6",
     "three": "^0.135.0",

packages/base/src/commands/BaseCommandIDs.ts

@@ -65,3 +65,6 @@ export const showFiltersTab = 'jupytergis:showFiltersTab';
 export const showObjectPropertiesTab = 'jupytergis:showObjectPropertiesTab';
 export const showAnnotationsTab = 'jupytergis:showAnnotationsTab';
 export const showIdentifyPanelTab = 'jupytergis:showIdentifyPanelTab';
+
+// Story maps
+export const addLandmark = 'jupytergis:addLandmark';

packages/base/src/commands/index.ts

@@ -1,10 +1,13 @@
 import {
   IDict,
   IJGISFormSchemaRegistry,
+  IJGISLayer,
   IJGISLayerBrowserRegistry,
   IJGISLayerGroup,
   IJGISLayerItem,
+  IJGISStoryMap,
   IJupyterGISModel,
+  ILandmarkLayer,
   JgisCoordinates,
   LayerType,
   SelectionType,
@@ -16,7 +19,7 @@ import { ICompletionProviderManager } from '@jupyterlab/completer';
 import { IStateDB } from '@jupyterlab/statedb';
 import { ITranslator } from '@jupyterlab/translation';
 import { CommandRegistry } from '@lumino/commands';
-import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
+import { ReadonlyPartialJSONObject, UUID } from '@lumino/coreutils';
 import { Coordinate } from 'ol/coordinate';
 import { fromLonLat } from 'ol/proj';
 
@@ -1055,6 +1058,68 @@ export function addCommands(
     ...icons.get(CommandIDs.addMarker),
   });
 
+  commands.addCommand(CommandIDs.addLandmark, {
+    label: trans.__('Add Landmark'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.model.sharedModel.editable
+        : false;
+    },
+    execute: args => {
+      const storyMapId = UUID.uuid4();
+      const newLandmarkId = UUID.uuid4();
+      const current = tracker.currentWidget;
+      if (!current) {
+        return;
+      }
+      const { zoom, extent } = current.model.getOptions();
+
+      if (!zoom || !extent) {
+        console.log('No extent or zoom found');
+        return;
+      }
+
+      const layerParams: ILandmarkLayer = { extent, zoom };
+      const layerModel: IJGISLayer = {
+        type: 'LandmarkLayer',
+        visible: true,
+        name: 'Landmark',
+        parameters: layerParams,
+      };
+
+      current.model.addLayer(newLandmarkId, layerModel);
+
+      // check for stories
+      const isStoriesExist =
+        Object.keys(current.model.sharedModel.storiesMap).length !== 0;
+
+      // if not stories, then just add simple
+      if (!isStoriesExist) {
+        const title = 'New Story';
+        const storyType = 'guided';
+        const landmarks = [newLandmarkId];
+
+        const storyMap: IJGISStoryMap = { title, storyType, landmarks };
+
+        current.model.sharedModel.addStoryMap(storyMapId, storyMap);
+      } else {
+        // else need to update stories
+        const { story } = current.model.getSelectedStory();
+        if (!story) {
+          console.log('No story found, something went wrong');
+          return;
+        }
+        const newStory: IJGISStoryMap = {
+          ...story,
+          landmarks: [...(story.landmarks ?? []), newLandmarkId],
+        };
+
+        current.model.sharedModel.updateStoryMap(storyMapId, newStory);
+      }
+    },
+    ...icons.get(CommandIDs.addLandmark),
+  });
+
   loadKeybindings(commands, keybindings);
 }
 

packages/base/src/constants.ts

@@ -58,6 +58,7 @@ const iconObject = {
   [CommandIDs.identify]: { icon: infoIcon },
   [CommandIDs.temporalController]: { icon: clockIcon },
   [CommandIDs.addMarker]: { icon: markerIcon },
+  [CommandIDs.addLandmark]: { iconClass: 'fa fa-landmark' },
 };
 
 /**

packages/base/src/formbuilder/formselectors.ts

@@ -3,6 +3,7 @@ import { LayerType, SourceType } from '@jupytergis/schema';
 import {
   HeatmapLayerPropertiesForm,
   HillshadeLayerPropertiesForm,
+  LandmarkLayerPropertiesForm,
   LayerPropertiesForm,
   VectorLayerPropertiesForm,
   WebGlLayerPropertiesForm,
@@ -33,6 +34,11 @@ export function getLayerTypeForm(
       break;
     case 'HeatmapLayer':
       LayerForm = HeatmapLayerPropertiesForm;
+      break;
+    case 'LandmarkLayer':
+      LayerForm = LandmarkLayerPropertiesForm;
+      break;
+
     // ADD MORE FORM TYPES HERE
   }
 

packages/base/src/formbuilder/objectform/layer/index.ts

@@ -3,3 +3,4 @@ export * from './hillshadeLayerForm';
 export * from './layerform';
 export * from './vectorlayerform';
 export * from './webGlLayerForm';
+export * from './landmarkLayerForm';

packages/base/src/formbuilder/objectform/layer/landmarkLayerForm.ts

@@ -0,0 +1,25 @@
+import { IDict } from '@jupytergis/schema';
+
+import { LayerPropertiesForm } from './layerform';
+
+/**
+ * The form to modify a hillshade layer.
+ */
+export class LandmarkLayerPropertiesForm extends LayerPropertiesForm {
+  protected processSchema(
+    data: IDict<any> | undefined,
+    schema: IDict,
+    uiSchema: IDict,
+  ) {
+    super.processSchema(data, schema, uiSchema);
+    uiSchema['content'] = {
+      ...uiSchema['content'],
+      markdown: {
+        'ui:widget': 'textarea',
+        'ui:options': {
+          rows: 10,
+        },
+      },
+    };
+  }
+}

packages/base/src/mainview/mainView.tsx

@@ -33,6 +33,7 @@ import {
   JgisCoordinates,
   JupyterGISModel,
   IMarkerSource,
+  ILandmarkLayer,
 } from '@jupytergis/schema';
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
@@ -53,6 +54,7 @@ import Feature, { FeatureLike } from 'ol/Feature';
 import { FullScreen, ScaleLine } from 'ol/control';
 import { Coordinate } from 'ol/coordinate';
 import { singleClick } from 'ol/events/condition';
+import { getCenter } from 'ol/extent';
 import { GeoJSON, MVT } from 'ol/format';
 import { Geometry, Point } from 'ol/geom';
 import { DragAndDrop, Select } from 'ol/interaction';
@@ -995,7 +997,8 @@ export class MainView extends React.Component<IProps, IStates> {
     let sourceId: string | undefined;
     let source: IJGISSource | undefined;
 
-    if (layer.type !== 'StacLayer') {
+    // Sourceless layers
+    if (!['StacLayer', 'LandmarkLayer'].includes(layer.type)) {
       sourceId = layer.parameters?.source;
       if (!sourceId) {
         return;
@@ -1119,6 +1122,11 @@ export class MainView extends React.Component<IProps, IStates> {
 
         break;
       }
+
+      case 'LandmarkLayer': {
+        // Special layer not for this
+        return;
+      }
     }
 
     // OpenLayers doesn't have name/id field so add it
@@ -1200,7 +1208,6 @@ export class MainView extends React.Component<IProps, IStates> {
           item => item.id === id && item.error === error.message,
         )
       ) {
-        this._loadingLayers.delete(id);
         return;
       }
 
@@ -1214,7 +1221,9 @@ export class MainView extends React.Component<IProps, IStates> {
         error: error.message || 'invalid file path',
         index,
       });
+    } finally {
       this._loadingLayers.delete(id);
+      this.setState(old => ({ ...old, loadingLayer: false }));
     }
   }
 
@@ -1656,7 +1665,7 @@ export class MainView extends React.Component<IProps, IStates> {
         const { x, y } = remoteViewport.value.coordinates;
         const zoom = remoteViewport.value.zoom;
 
-        this._moveToPosition({ x, y }, zoom, 0);
+        this._flyToPosition({ x, y }, zoom, 0);
       }
     } else {
       // If we are unfollowing a remote user, we reset our center and zoom to their previous values
@@ -1668,7 +1677,7 @@ export class MainView extends React.Component<IProps, IStates> {
         const viewportState = localState.viewportState?.value;
 
         if (viewportState) {
-          this._moveToPosition(viewportState.coordinates, viewportState.zoom);
+          this._flyToPosition(viewportState.coordinates, viewportState.zoom);
         }
       }
     }
@@ -1790,7 +1799,7 @@ export class MainView extends React.Component<IProps, IStates> {
         view.getProjection(),
       );
 
-      this._moveToPosition({ x: centerCoord[0], y: centerCoord[1] }, zoom || 0);
+      this._flyToPosition({ x: centerCoord[0], y: centerCoord[1] }, zoom || 0);
 
       // Save the extent if it does not exists, to allow proper export to qgis.
       if (!options.extent) {
@@ -2022,6 +2031,7 @@ export class MainView extends React.Component<IProps, IStates> {
     });
   }
 
+  // TODO this and flyToPosition need a rework
   private _onZoomToPosition(_: IJupyterGISModel, id: string) {
     // Check if the id is an annotation
     const annotation = this._model.annotationModel?.getAnnotation(id);
@@ -2035,6 +2045,26 @@ export class MainView extends React.Component<IProps, IStates> {
     const layer = this.getLayer(id);
     const source = layer?.getSource();
 
+    // TODO: Landmark layers don't have an associated OL layer
+    // This could be better
+    if (!layer) {
+      const jgisLayer = this._model.getLayer(id);
+      const layerParams = jgisLayer?.parameters as ILandmarkLayer;
+      const coords = getCenter(layerParams.extent);
+
+      // TODO: Should pass args through signal??
+      const { story } = this._model.getSelectedStory();
+
+      this._flyToPosition(
+        { x: coords[0], y: coords[1] },
+        layerParams.zoom,
+        (story?.transition?.time ?? 1) * 1000, // second -> ms
+        story?.transition?.type,
+      );
+
+      return;
+    }
+
     if (source instanceof VectorSource) {
       extent = source.getExtent();
     }
@@ -2069,35 +2099,57 @@ export class MainView extends React.Component<IProps, IStates> {
     });
   }
 
-  private _moveToPosition(
+  private _flyToPosition(
     center: { x: number; y: number },
     zoom: number,
     duration = 1000,
+    transitionType?: 'linear' | 'immediate' | 'smooth',
   ) {
     const view = this._Map.getView();
 
-    view.setZoom(zoom);
-    view.setCenter([center.x, center.y]);
-    // Zoom needs to be set before changing center
-    if (!view.animate === undefined) {
-      view.animate({ zoom, duration });
+    // Cancel any in-progress animations before starting new ones
+    view.cancelAnimations();
+
+    const currentZoom = view.getZoom() || 0;
+    const targetCenter: Coordinate = [center.x, center.y];
+
+    if (transitionType === 'immediate') {
+      view.setCenter(targetCenter);
+      view.setZoom(zoom);
+      return;
+    }
+
+    if (transitionType === 'smooth') {
+      // Smooth: zoom out, center, and zoom in
+      // Centering takes full duration, zoom out completes halfway, zoom in starts halfway
+      const zoomOutLevel = Math.min(currentZoom, zoom) - 1;
+
+      // Start centering (full duration) and zoom out (50% duration) simultaneously
+      view.animate({
+        center: targetCenter,
+        duration: duration,
+      });
+      // Chain zoom out -> zoom in (zoom in starts when zoom out completes)
+      view.animate(
+        {
+          zoom: zoomOutLevel,
+          duration: duration * 0.5,
+        },
+        {
+          zoom: zoom,
+          duration: duration * 0.5,
+        },
+      );
+    } else {
+      // Linear: direct zoom
       view.animate({
-        center: [center.x, center.y],
+        center: targetCenter,
+        zoom: zoom,
         duration,
       });
     }
   }
 
-  private _flyToPosition(
-    center: { x: number; y: number },
-    zoom: number,
-    duration = 1000,
-  ) {
-    const view = this._Map.getView();
-    view.animate({ zoom, duration });
-    view.animate({ center: [center.x, center.y], duration });
-  }
-
   private _onPointerMove(e: MouseEvent) {
     const pixel = this._Map.getEventPixel(e);
     const coordinates = this._Map.getCoordinateFromPixel(pixel);