Allow adding markers (#965)

* Add add landmark option

* Use a type for modes

* Use const for identify cursor class

* Rename tool

* Implement add landmark option

* Rename landmark to marker

* Add Marker Source schema and new layer/source handling

* Temp icon

* Dont set style when creating marker

* Tidy up

* Create generic mode toggle method

* Use a marker icon

* Add marker source to sourceType

* Update Playwright Snapshots

* Add data to filter button for tests

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: gjmooney

packages/base/src/commands/BaseCommandIDs.ts

@@ -2,12 +2,14 @@
  *
  * See the documentation for more details.
  */
+// Toolbar
 export const createNew = 'jupytergis:create-new-jGIS-file';
 export const redo = 'jupytergis:redo';
 export const undo = 'jupytergis:undo';
 export const symbology = 'jupytergis:symbology';
 export const identify = 'jupytergis:identify';
 export const temporalController = 'jupytergis:temporalController';
+export const addMarker = 'jupytergis:addMarker';
 
 // geolocation
 export const getGeolocation = 'jupytergis:getGeolocation';

packages/base/src/commands/index.ts

@@ -33,6 +33,8 @@ import { getGeoJSONDataFromLayerSource, downloadFile } from '../tools';
 import { JupyterGISTracker } from '../types';
 import { JupyterGISDocumentWidget } from '../widget';
 
+const POINT_SELECTION_TOOL_CLASS = 'jGIS-point-selection-tool';
+
 interface ICreateEntry {
   tracker: JupyterGISTracker;
   formSchemaRegistry: IJGISFormSchemaRegistry;
@@ -163,7 +165,7 @@ export function addCommands(
 
       if (current.model.currentMode === 'identifying' && !canIdentify) {
         current.model.currentMode = 'panning';
-        current.node.classList.remove('jGIS-identify-tool');
+        current.node.classList.remove(POINT_SELECTION_TOOL_CLASS);
         return false;
       }
 
@@ -198,14 +200,14 @@ export function addCommands(
         const keysPressed = luminoEvent.keys as string[] | undefined;
         if (keysPressed?.includes('Escape')) {
           current.model.currentMode = 'panning';
-          current.node.classList.remove('jGIS-identify-tool');
+          current.node.classList.remove(POINT_SELECTION_TOOL_CLASS);
           commands.notifyCommandChanged(CommandIDs.identify);
           return;
         }
       }
 
-      current.node.classList.toggle('jGIS-identify-tool');
-      current.model.toggleIdentify();
+      current.node.classList.toggle(POINT_SELECTION_TOOL_CLASS);
+      current.model.toggleMode('identifying');
 
       commands.notifyCommandChanged(CommandIDs.identify);
     },
@@ -1039,6 +1041,34 @@ export function addCommands(
     },
   });
 
+  commands.addCommand(CommandIDs.addMarker, {
+    label: trans.__('Add Marker'),
+    isToggled: () => {
+      const current = tracker.currentWidget;
+      if (!current) {
+        return false;
+      }
+
+      return current.model.currentMode === 'marking';
+    },
+    isEnabled: () => {
+      // TODO should check if at least one layer exists?
+      return true;
+    },
+    execute: args => {
+      const current = tracker.currentWidget;
+      if (!current) {
+        return;
+      }
+
+      current.node.classList.toggle(POINT_SELECTION_TOOL_CLASS);
+      current.model.toggleMode('marking');
+
+      commands.notifyCommandChanged(CommandIDs.addMarker);
+    },
+    ...icons.get(CommandIDs.addMarker),
+  });
+
   loadKeybindings(commands, keybindings);
 }
 

packages/base/src/constants.ts

@@ -10,6 +10,7 @@ import {
   moundIcon,
   rasterIcon,
   vectorSquareIcon,
+  markerIcon,
 } from './icons';
 
 /**
@@ -56,6 +57,7 @@ const iconObject = {
   [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
   [CommandIDs.identify]: { icon: infoIcon },
   [CommandIDs.temporalController]: { icon: clockIcon },
+  [CommandIDs.addMarker]: { icon: markerIcon },
 };
 
 /**

packages/base/src/icons.ts

@@ -16,6 +16,7 @@ import logoSvgStr from '../style/icons/logo.svg';
 import logoMiniSvgStr from '../style/icons/logo_mini.svg';
 import logoMiniAlternativeSvgStr from '../style/icons/logo_mini_alternative.svg';
 import logoMiniQGZ from '../style/icons/logo_mini_qgz.svg';
+import markerSvgStr from '../style/icons/marker.svg';
 import moundSvgStr from '../style/icons/mound.svg';
 import nonVisibilitySvgStr from '../style/icons/nonvisibility.svg';
 import rasterSvgStr from '../style/icons/raster.svg';
@@ -109,3 +110,8 @@ export const targetWithCenterIcon = new LabIcon({
   name: 'jupytergis::targetWithoutCenter',
   svgstr: targetWithoutCenterSvgStr,
 });
+
+export const markerIcon = new LabIcon({
+  name: 'jupytergis::marker',
+  svgstr: markerSvgStr,
+});

packages/base/src/mainview/mainView.tsx

@@ -32,6 +32,7 @@ import {
   IWebGlLayer,
   JgisCoordinates,
   JupyterGISModel,
+  IMarkerSource,
 } from '@jupytergis/schema';
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
@@ -411,6 +412,7 @@ export class MainView extends React.Component<IProps, IStates> {
       });
 
       this._Map.on('click', this._identifyFeature.bind(this));
+      this._Map.on('click', this._addMarker.bind(this));
 
       this._Map
         .getViewport()
@@ -825,6 +827,20 @@ export class MainView extends React.Component<IProps, IStates> {
         });
         break;
       }
+
+      case 'MarkerSource': {
+        const parameters = source.parameters as IMarkerSource;
+
+        const point = new Point(parameters.feature.coords);
+        const marker = new Feature({
+          type: 'icon',
+          geometry: point,
+        });
+
+        newSource = new VectorSource({
+          features: [marker],
+        });
+      }
     }
 
     newSource.set('id', id);
@@ -2084,6 +2100,45 @@ export class MainView extends React.Component<IProps, IStates> {
     this._model.syncPointer(pointer);
   });
 
+  private _addMarker(e: MapBrowserEvent<any>) {
+    if (this._model.currentMode !== 'marking') {
+      return;
+    }
+
+    const coordinate = this._Map.getCoordinateFromPixel(e.pixel);
+    const sourceId = UUID.uuid4();
+    const layerId = UUID.uuid4();
+
+    const sourceParameters: IMarkerSource = {
+      feature: { coords: [coordinate[0], coordinate[1]] },
+    };
+
+    const layerParams: IVectorLayer = {
+      opacity: 1.0,
+      source: sourceId,
+      symbologyState: { renderType: 'Single Symbol' },
+    };
+
+    const sourceModel: IJGISSource = {
+      type: 'MarkerSource',
+      name: 'Marker',
+      parameters: sourceParameters,
+    };
+
+    const layerModel: IJGISLayer = {
+      type: 'VectorLayer',
+      visible: true,
+      name: 'Marker',
+      parameters: layerParams,
+    };
+
+    this.addSource(sourceId, sourceModel);
+    this._model.sharedModel.addSource(sourceId, sourceModel);
+
+    this.addLayer(layerId, layerModel, this.getLayerIDs().length);
+    this._model.addLayer(layerId, layerModel);
+  }
+
   private _identifyFeature(e: MapBrowserEvent<any>) {
     if (this._model.currentMode !== 'identifying') {
       return;

packages/base/src/panelview/components/filter-panel/Filter.tsx

@@ -237,6 +237,7 @@ const FilterComponent: React.FC<IFilterComponentProps> = ({ model }) => {
               <Button
                 className="jp-Dialog-button jp-mod-accept jp-mod-styled"
                 onClick={addFilterRow}
+                data-testid="add-filter-button"
               >
                 Add
               </Button>

packages/base/src/toolbar/widget.tsx

@@ -170,6 +170,14 @@ export class ToolbarWidget extends ReactiveToolbar {
       temporalControllerButton.node.dataset.testid =
         'temporal-controller-button';
 
+      const addMarkerButton = new CommandToolbarButton({
+        id: CommandIDs.addMarker,
+        label: '',
+        commands: options.commands,
+      });
+      this.addItem('addMarker', addMarkerButton);
+      addMarkerButton.node.dataset.testid = 'add-marker-controller-button';
+
       this.addItem('spacer', ReactiveToolbar.createSpacerItem());
 
       // Users

packages/base/style/icons/marker.svg

@@ -29,6 +29,7 @@ import {
   SourceType,
 } from './_interface/project/jgis';
 import { IRasterSource } from './_interface/project/sources/rasterSource';
+import { Modes } from './types';
 export { IGeoJSONSource } from './_interface/project/sources/geoJsonSource';
 
 export type JgisCoordinates = { x: number; y: number };
@@ -161,10 +162,7 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
   geolocation: JgisCoordinates;
   localState: IJupyterGISClientState | null;
   annotationModel?: IAnnotationModel;
-
-  // TODO Add more modes: "annotating"
-  currentMode: 'panning' | 'identifying';
-
+  currentMode: Modes;
   themeChanged: Signal<
     IJupyterGISModel,
     IChangedArgs<string, string | null, string>
@@ -246,7 +244,7 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
   removeMetadata(key: string): void;
   centerOnPosition(id: string): void;
 
-  toggleIdentify(): void;
+  toggleMode(mode: Modes): void;
 
   isTemporalControllerActive: boolean;
   toggleTemporalController(): void;

packages/schema/src/interfaces.ts

@@ -37,6 +37,7 @@ import {
   IJupyterGISSettings,
 } from './interfaces';
 import jgisSchema from './schema/project/jgis.json';
+import { Modes } from './types';
 
 const SETTINGS_ID = '@jupytergis/jupytergis-core:jupytergis-settings';
 
@@ -758,19 +759,20 @@ export class JupyterGISModel implements IJupyterGISModel {
     }
   }
 
-  toggleIdentify() {
-    if (this._currentMode === 'identifying') {
-      this._currentMode = 'panning';
-    } else {
-      this._currentMode = 'identifying';
-    }
+  /**
+   * Toggle a map interaction mode on or off.
+   * Toggleing off sets the mode to 'panning'.
+   * @param mode The mode to be toggled
+   */
+  toggleMode(mode: Modes) {
+    this._currentMode = this._currentMode === mode ? 'panning' : mode;
   }
 
-  get currentMode(): 'panning' | 'identifying' {
+  get currentMode(): Modes {
     return this._currentMode;
   }
 
-  set currentMode(value: 'panning' | 'identifying') {
+  set currentMode(value: Modes) {
     this._currentMode = value;
   }
 
@@ -869,7 +871,7 @@ export class JupyterGISModel implements IJupyterGISModel {
   private _settingsChanged: Signal<JupyterGISModel, string>;
   private _jgisSettings: IJupyterGISSettings;
 
-  private _currentMode: 'panning' | 'identifying';
+  private _currentMode: Modes;
 
   private _sharedModel: IJupyterGISDoc;
   private _filePath: string;