@jupytergis/base 0.9.2 → 0.10.1

package/lib/dialogs/symbology/symbologyUtils.d.ts

@@ -1,9 +1,10 @@
 import { IJGISLayer } from '@jupytergis/schema';
+import { ColorRampName } from './colorRampUtils';
 import { IStopRow } from './symbologyDialog';
 export declare namespace VectorUtils {
     const buildColorInfo: (layer: IJGISLayer) => IStopRow[];
     const buildRadiusInfo: (layer: IJGISLayer) => IStopRow[];
 }
 export declare namespace Utils {
-    const getValueColorPairs: (stops: number[], selectedRamp: string, nClasses: number, reverse?: boolean) => IStopRow[];
+    const getValueColorPairs: (stops: number[], selectedRamp: ColorRampName, nClasses: number, reverse?: boolean) => IStopRow[];
 }

package/lib/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.js

@@ -1,7 +1,7 @@
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 import { GeoTiffClassifications } from "../../classificationModes";
-import ColorRamp from "../../components/color_ramp/ColorRamp";
+import ColorRampControls from "../../components/color_ramp/ColorRampControls";
 import StopRow from "../../components/color_stops/StopRow";
 import useGetBandInfo from "../../hooks/useGetBandInfo";
 import { Utils } from "../../symbologyUtils";
@@ -17,7 +17,11 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
         return;
     }
     const functions = ['discrete', 'linear', 'exact'];
-    const modeOptions = ['continuous', 'equal interval', 'quantile'];
+    const modeOptions = [
+        'continuous',
+        'equal interval',
+        'quantile',
+    ];
     const stateDb = GlobalStateDbManager.getInstance().getStateDb();
     const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
     const [layerState, setLayerState] = useState();
@@ -223,7 +227,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
         const currentBand = bandRows[selectedBand - 1];
         const source = model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
         const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
-        const nClasses = selectedMode === 'continuous' ? 52 : +numberOfShades;
+        const nClasses = selectedMode === 'continuous' ? 52 : numberOfShades;
         setIsLoading(true);
         switch (selectedMode) {
             case 'quantile':
@@ -270,7 +274,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
                 React.createElement("select", { name: "function-select", id: "function-select", className: "jp-mod-styled", value: selectedFunction, style: { textTransform: 'capitalize' }, onChange: event => {
                         setSelectedFunction(event.target.value);
                     } }, functions.map((func, funcIndex) => (React.createElement("option", { key: func, value: func, style: { textTransform: 'capitalize' } }, func)))))),
-        bandRows.length > 0 && (React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: true })),
+        bandRows.length > 0 && (React.createElement(ColorRampControls, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: true })),
         React.createElement("div", { className: "jp-gis-stop-container" },
             React.createElement("div", { className: "jp-gis-stop-labels", style: { display: 'flex', gap: 6 } },
                 React.createElement("span", { style: { flex: '0 0 18%' } },

package/lib/dialogs/symbology/vector_layer/VectorRendering.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useGetProperties } from "../hooks/useGetProperties";
-import { getColorCodeFeatureAttributes, getNumericFeatureAttributes, objectEntries, } from "../../../tools";
+import { getColorCodeFeatureAttributes, getFeatureAttributes, getNumericFeatureAttributes, objectEntries, } from "../../../tools";
 import Canonical from './types/Canonical';
 import Categorized from './types/Categorized';
 import Graduated from './types/Graduated';
@@ -26,7 +26,7 @@ const RENDER_TYPE_OPTIONS = {
     },
     Categorized: {
         component: Categorized,
-        attributeChecker: getNumericFeatureAttributes,
+        attributeChecker: getFeatureAttributes,
         supportedLayerTypes: ['VectorLayer', 'VectorTileLayer', 'HeatmapLayer'],
         isTabbed: true,
     },

package/lib/dialogs/symbology/vector_layer/types/Categorized.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import ColorRamp from "../../components/color_ramp/ColorRamp";
+import ColorRampControls from "../../components/color_ramp/ColorRampControls";
 import StopContainer from "../../components/color_stops/StopContainer";
 import { Utils, VectorUtils } from "../../symbologyUtils";
 import ValueSelect from "../components/ValueSelect";
@@ -82,8 +82,8 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
         setColorRampOptions({
             selectedFunction: '',
             selectedRamp,
-            numberOfShades: '',
-            selectedMode: '',
+            numberOfShades,
+            selectedMode,
         });
         const stops = Array.from(selectableAttributesAndValues[selectedAttribute]).sort((a, b) => a - b);
         const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, stops.length, reverseRamp);
@@ -141,7 +141,6 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
         }
         const newStyle = Object.assign({}, layer.parameters.color);
         if (method === 'color') {
-            console.log('delecol');
             delete newStyle['fill-color'];
             delete newStyle['stroke-color'];
             delete newStyle['circle-fill-color'];
@@ -195,7 +194,7 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
                         React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
                         "Reverse Color Ramp"))),
                 React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-                    React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false, showRampSelector: symbologyTab === 'color' }),
+                    React.createElement(ColorRampControls, { layerParams: layer.parameters, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false, showRampSelector: symbologyTab === 'color' }),
                     React.createElement(StopContainer, { selectedMethod: '', stopRows: stopRows, setStopRows: setStopRows }))));
         }
     })();

package/lib/dialogs/symbology/vector_layer/types/Graduated.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { VectorClassifications } from "../../classificationModes";
-import ColorRamp from "../../components/color_ramp/ColorRamp";
+import ColorRampControls from "../../components/color_ramp/ColorRampControls";
 import StopContainer from "../../components/color_stops/StopContainer";
 import { Utils, VectorUtils } from "../../symbologyUtils";
 import ValueSelect from "../components/ValueSelect";
@@ -22,7 +22,6 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
     const [radiusStopRows, setRadiusStopRows] = useState([]);
     const [colorRampOptions, setColorRampOptions] = useState();
     const [colorManualStyle, setColorManualStyle] = useState({
-        fillColor: '#3399CC',
         strokeColor: '#3399CC',
         strokeWidth: 1.25,
     });
@@ -53,17 +52,10 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
     useEffect(() => {
         var _a;
         if ((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.color) {
-            const fillColor = layer.parameters.color['fill-color'];
-            const circleFillColor = layer.parameters.color['circle-fill-color'];
             const strokeColor = layer.parameters.color['stroke-color'];
             const circleStrokeColor = layer.parameters.color['circle-stroke-color'];
             const isSimpleColor = (val) => typeof val === 'string' && /^#?[0-9A-Fa-f]{3,8}$/.test(val);
             setColorManualStyle({
-                fillColor: isSimpleColor(fillColor)
-                    ? fillColor
-                    : isSimpleColor(circleFillColor)
-                        ? circleFillColor
-                        : '#3399CC',
                 strokeColor: isSimpleColor(strokeColor)
                     ? strokeColor
                     : isSimpleColor(circleStrokeColor)
@@ -131,11 +123,10 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
             newStyle['circle-stroke-color'] = colorExpr;
         }
         else {
-            newStyle['fill-color'] = undefined;
-            newStyle['circle-fill-color'] = undefined;
-            newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
-            newStyle['circle-stroke-color'] = colorManualStyleRef.current.strokeColor;
+            // use manual style
         }
+        newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
+        newStyle['circle-stroke-color'] = colorManualStyleRef.current.strokeColor;
         newStyle['stroke-width'] = colorManualStyleRef.current.strokeWidth;
         newStyle['circle-stroke-width'] = colorManualStyleRef.current.strokeWidth;
         // Apply radius symbology
@@ -180,19 +171,19 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
         const values = Array.from(selectableAttributesAndValues[selectedAttribute]);
         switch (selectedMode) {
             case 'quantile':
-                stops = VectorClassifications.calculateQuantileBreaks(values, +numberOfShades);
+                stops = VectorClassifications.calculateQuantileBreaks(values, numberOfShades);
                 break;
             case 'equal interval':
-                stops = VectorClassifications.calculateEqualIntervalBreaks(values, +numberOfShades);
+                stops = VectorClassifications.calculateEqualIntervalBreaks(values, numberOfShades);
                 break;
             case 'jenks':
-                stops = VectorClassifications.calculateJenksBreaks(values, +numberOfShades);
+                stops = VectorClassifications.calculateJenksBreaks(values, numberOfShades);
                 break;
             case 'pretty':
-                stops = VectorClassifications.calculatePrettyBreaks(values, +numberOfShades);
+                stops = VectorClassifications.calculatePrettyBreaks(values, numberOfShades);
                 break;
             case 'logarithmic':
-                stops = VectorClassifications.calculateLogarithmicBreaks(values, +numberOfShades);
+                stops = VectorClassifications.calculateLogarithmicBreaks(values, numberOfShades);
                 break;
             default:
                 console.warn('No mode selected');
@@ -200,7 +191,7 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
         }
         const stopOutputPairs = symbologyTab === 'radius'
             ? stops.map(v => ({ stop: v, output: v }))
-            : Utils.getValueColorPairs(stops, selectedRamp, +numberOfShades, reverseRamp);
+            : Utils.getValueColorPairs(stops, selectedRamp, numberOfShades, reverseRamp);
         if (symbologyTab === 'radius') {
             setRadiusStopRows(stopOutputPairs);
         }
@@ -214,9 +205,7 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
         }
         const newStyle = Object.assign({}, layer.parameters.color);
         if (method === 'color') {
-            delete newStyle['fill-color'];
             delete newStyle['stroke-color'];
-            delete newStyle['circle-fill-color'];
             setColorStopRows([]);
             setColorRampOptions(undefined);
         }
@@ -237,12 +226,11 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
                 React.createElement(ValueSelect, { featureProperties: selectableAttributesAndValues, selectedValue: selectedAttribute, setSelectedValue: setSelectedAttribute }),
                 React.createElement("div", { className: "jp-gis-layer-symbology-container" },
                     symbologyTab === 'color' && (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "jp-gis-symbology-row" },
-                            React.createElement("label", null, "Fill Color:"),
-                            React.createElement("input", { type: "color", className: "jp-mod-styled", value: colorManualStyle.fillColor, onChange: e => {
-                                    handleReset('color');
-                                    setColorManualStyle(Object.assign(Object.assign({}, colorManualStyle), { fillColor: e.target.value }));
-                                } })),
+                        React.createElement("p", { className: "jp-info-text" },
+                            "Fill color is automatically controlled by the color ramp. To control fill manually, switch to ",
+                            React.createElement("strong", null, "Simple"),
+                            ' ',
+                            "symbology."),
                         React.createElement("div", { className: "jp-gis-symbology-row" },
                             React.createElement("label", null, "Stroke Color:"),
                             React.createElement("input", { type: "color", className: "jp-mod-styled", value: colorManualStyle.strokeColor, onChange: e => {
@@ -263,7 +251,7 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
                     React.createElement("label", null,
                         React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
                         "Reverse Color Ramp"))),
-                React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: symbologyTab === 'color' }),
+                React.createElement(ColorRampControls, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: symbologyTab === 'color' }),
                 React.createElement(StopContainer, { selectedMethod: symbologyTab || 'color', stopRows: symbologyTab === 'color' ? colorStopRows : radiusStopRows, setStopRows: symbologyTab === 'color' ? setColorStopRows : setRadiusStopRows })));
         }
     })();

package/lib/dialogs/symbology/vector_layer/types/Heatmap.js

@@ -1,6 +1,6 @@
 import colormap from 'colormap';
 import React, { useEffect, useRef, useState } from 'react';
-import CanvasSelectComponent from "../../components/color_ramp/CanvasSelectComponent";
+import ColorRampSelector from "../../components/color_ramp/ColorRampSelector";
 const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
     if (!layerId) {
         return;
@@ -9,7 +9,7 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
-    const [selectedRamp, setSelectedRamp] = useState('');
+    const [selectedRamp, setSelectedRamp] = useState('viridis');
     const [heatmapOptions, setHetamapOptions] = useState({
         radius: 8,
         blur: 15,
@@ -74,7 +74,7 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
         React.createElement("p", null, "Represent features based on their density using a heatmap."),
         React.createElement("div", { className: "jp-gis-symbology-row jp-gis-heatmap" },
             React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
-            React.createElement(CanvasSelectComponent, { selectedRamp: selectedRamp, setSelected: setSelectedRamp })),
+            React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: setSelectedRamp })),
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", null,
                 React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),

package/lib/formbuilder/editform.js

@@ -20,8 +20,9 @@ export class EditForm extends React.Component {
         let layerSchema = undefined;
         let LayerForm = undefined;
         let layerData = undefined;
+        let layer = undefined;
         if (this.props.layer) {
-            const layer = this.props.model.getLayer(this.props.layer);
+            layer = this.props.model.getLayer(this.props.layer);
             if (!layer) {
                 return;
             }
@@ -53,12 +54,12 @@ export class EditForm extends React.Component {
         return (React.createElement("div", null,
             this.props.layer && LayerForm && (React.createElement("div", null,
                 React.createElement("h3", { style: { paddingLeft: '5px' } }, "Layer Properties"),
-                React.createElement(LayerForm, { formContext: "update", sourceType: (source === null || source === void 0 ? void 0 : source.type) || 'RasterSource', model: this.props.model, filePath: this.props.model.filePath, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
+                React.createElement(LayerForm, { key: `${this.props.layer}-${source === null || source === void 0 ? void 0 : source.type}`, formContext: "update", sourceType: (source === null || source === void 0 ? void 0 : source.type) || 'RasterSource', model: this.props.model, filePath: this.props.model.filePath, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
                         this.syncObjectProperties(this.props.layer, properties);
                     } }))),
             this.props.source && SourceForm && (React.createElement("div", null,
                 React.createElement("h3", { style: { paddingLeft: '5px' } }, "Source Properties"),
-                React.createElement(SourceForm, { formContext: "update", model: this.props.model, filePath: this.props.model.filePath, schema: sourceSchema, sourceData: sourceData, syncData: (properties) => {
+                React.createElement(SourceForm, { key: `${this.props.source}-${layer === null || layer === void 0 ? void 0 : layer.type}`, formContext: "update", model: this.props.model, filePath: this.props.model.filePath, schema: sourceSchema, sourceData: sourceData, syncData: (properties) => {
                         this.syncObjectProperties(this.props.source, properties);
                     }, formChangedSignal: this.sourceFormChangedSignal, sourceType: (source === null || source === void 0 ? void 0 : source.type) || 'RasterSource' })))));
     }

package/lib/formbuilder/objectform/layer/heatmapLayerForm.d.ts

@@ -1,10 +1,11 @@
 import { IDict, IHeatmapLayer } from '@jupytergis/schema';
-import { IChangeEvent } from '@rjsf/core';
+import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
 import { ILayerProps, LayerPropertiesForm } from './layerform';
 export declare class HeatmapLayerPropertiesForm extends LayerPropertiesForm {
     protected currentFormData: IHeatmapLayer;
     private features;
     constructor(props: ILayerProps);
+    protected onFormSubmit(e: ISubmitEvent<any>): void;
     protected onFormChange(e: IChangeEvent): void;
     protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
     private fetchFeatureNames;

package/lib/formbuilder/objectform/layer/heatmapLayerForm.js

@@ -13,6 +13,10 @@ export class HeatmapLayerPropertiesForm extends LayerPropertiesForm {
             });
         }
     }
+    onFormSubmit(e) {
+        e.formData.symbologyState = {};
+        return super.onFormSubmit(e);
+    }
     onFormChange(e) {
         super.onFormChange(e);
         const source = this.props.model.getSource(e.formData.source);

package/lib/formbuilder/objectform/layer/vectorlayerform.d.ts

@@ -1,5 +1,5 @@
 import { IDict, IVectorLayer } from '@jupytergis/schema';
-import { IChangeEvent } from '@rjsf/core';
+import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
 import { ILayerProps, LayerPropertiesForm } from './layerform';
 /**
  * The form to modify a vector layer.
@@ -8,6 +8,7 @@ export declare class VectorLayerPropertiesForm extends LayerPropertiesForm {
     protected currentFormData: IVectorLayer;
     private currentSourceId;
     constructor(props: ILayerProps);
+    protected onFormSubmit(e: ISubmitEvent<any>): void;
     protected onFormChange(e: IChangeEvent): void;
     protected processSchema(data: IVectorLayer | undefined, schema: IDict, uiSchema: IDict): void;
 }

package/lib/formbuilder/objectform/layer/vectorlayerform.js

@@ -6,6 +6,10 @@ export class VectorLayerPropertiesForm extends LayerPropertiesForm {
     constructor(props) {
         super(props);
     }
+    onFormSubmit(e) {
+        e.formData.symbologyState = {};
+        return super.onFormSubmit(e);
+    }
     onFormChange(e) {
         super.onFormChange(e);
         // We only force update if we just updated the source

package/lib/formbuilder/objectform/layer/webGlLayerForm.d.ts

@@ -1,8 +1,10 @@
 import { IDict } from '@jupytergis/schema';
+import { ISubmitEvent } from '@rjsf/core';
 import { LayerPropertiesForm } from './layerform';
 /**
  * The form to modify a hillshade layer.
  */
 export declare class WebGlLayerPropertiesForm extends LayerPropertiesForm {
+    protected onFormSubmit(e: ISubmitEvent<any>): void;
     protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
 }

package/lib/formbuilder/objectform/layer/webGlLayerForm.js

@@ -3,6 +3,10 @@ import { LayerPropertiesForm } from './layerform';
  * The form to modify a hillshade layer.
  */
 export class WebGlLayerPropertiesForm extends LayerPropertiesForm {
+    onFormSubmit(e) {
+        e.formData.symbologyState = {};
+        return super.onFormSubmit(e);
+    }
     processSchema(data, schema, uiSchema) {
         this.removeFormEntry('color', data, schema, uiSchema);
         this.removeFormEntry('symbologyState', data, schema, uiSchema);

package/lib/icons.d.ts

@@ -16,3 +16,4 @@ export declare const terminalToolbarIcon: LabIcon;
 export declare const geolocationIcon: LabIcon;
 export declare const targetWithoutCenterIcon: LabIcon;
 export declare const targetWithCenterIcon: LabIcon;
+export declare const markerIcon: LabIcon;

package/lib/icons.js

@@ -13,6 +13,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';
@@ -89,3 +90,7 @@ export const targetWithCenterIcon = new LabIcon({
     name: 'jupytergis::targetWithoutCenter',
     svgstr: targetWithoutCenterSvgStr,
 });
+export const markerIcon = new LabIcon({
+    name: 'jupytergis::marker',
+    svgstr: markerSvgStr,
+});

package/lib/index.d.ts

@@ -1,5 +1,4 @@
 export * from './annotations';
-export * from './classificationModes';
 export * from './commands/index';
 export * from './constants';
 export * from './dialogs/layerCreationFormDialog';

package/lib/index.js

@@ -1,5 +1,4 @@
 export * from './annotations';
-export * from './classificationModes';
 export * from './commands/index';
 export * from './constants';
 export * from './dialogs/layerCreationFormDialog';

package/lib/mainview/mainView.d.ts

@@ -175,6 +175,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _flyToPosition;
     private _onPointerMove;
     private _syncPointer;
+    private _addMarker;
     private _identifyFeature;
     private _triggerLayerUpdate;
     private _convertFeatureToMs;

package/lib/mainview/mainView.js

@@ -28,7 +28,7 @@ import { register } from 'ol/proj/proj4.js';
 import RenderFeature, { toGeometry } from 'ol/render/Feature';
 import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, Tile as TileSource, } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
-import { Circle, Fill, Stroke, Style } from 'ol/style';
+import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
 //@ts-expect-error no types for ol-pmtiles
 import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
 import StacLayer from 'ol-stac';
@@ -43,6 +43,7 @@ import { debounce, isLightTheme, loadFile, throttle } from "../tools";
 import CollaboratorPointers from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
+import { markerIcon } from '../icons';
 import { LeftPanel, RightPanel } from '../panelview';
 export class MainView extends React.Component {
     constructor(props) {
@@ -642,6 +643,7 @@ export class MainView extends React.Component {
                 }
             });
             this._Map.on('click', this._identifyFeature.bind(this));
+            this._Map.on('click', this._addMarker.bind(this));
             this._Map
                 .getViewport()
                 .addEventListener('pointermove', this._onPointerMove.bind(this));
@@ -860,6 +862,27 @@ export class MainView extends React.Component {
                 });
                 break;
             }
+            case 'MarkerSource': {
+                const parameters = source.parameters;
+                const point = new Point(parameters.feature.coords);
+                const marker = new Feature({
+                    type: 'icon',
+                    geometry: point,
+                });
+                // Replace color placeholder in SVG with the parameter color
+                const markerColor = parameters.color || '#3463a0';
+                const svgString = markerIcon.svgstr.replace('{{COLOR}}', markerColor);
+                const iconStyle = new Style({
+                    image: new Icon({
+                        src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`,
+                        scale: 0.25,
+                    }),
+                });
+                marker.setStyle(iconStyle);
+                newSource = new VectorSource({
+                    features: [marker],
+                });
+            }
         }
         newSource.set('id', id);
         // _sources is a list of OpenLayers sources
@@ -1429,15 +1452,11 @@ export class MainView extends React.Component {
             return;
         }
         const layer = this.getLayer(id);
-        let nextIndex = index;
         // should not be undefined since the id exists above
         if (layer === undefined) {
             return;
         }
         this._Map.getLayers().removeAt(currentIndex);
-        if (currentIndex < index) {
-            nextIndex -= 1;
-        }
         // Adjust index to ensure it's within bounds
         const numLayers = this._Map.getLayers().getLength();
         const safeIndex = Math.min(index, numLayers);
@@ -1587,6 +1606,37 @@ export class MainView extends React.Component {
         const coordinates = this._Map.getCoordinateFromPixel(pixel);
         this._syncPointer(coordinates);
     }
+    async _addMarker(e) {
+        if (this._model.currentMode !== 'marking') {
+            return;
+        }
+        const coordinate = this._Map.getCoordinateFromPixel(e.pixel);
+        const sourceId = UUID.uuid4();
+        const layerId = UUID.uuid4();
+        const sourceParameters = {
+            feature: { coords: [coordinate[0], coordinate[1]] },
+        };
+        const layerParams = {
+            opacity: 1.0,
+            source: sourceId,
+            symbologyState: { renderType: 'Single Symbol' },
+        };
+        const sourceModel = {
+            type: 'MarkerSource',
+            name: 'Marker',
+            parameters: sourceParameters,
+        };
+        const layerModel = {
+            type: 'VectorLayer',
+            visible: true,
+            name: 'Marker',
+            parameters: layerParams,
+        };
+        this._model.sharedModel.addSource(sourceId, sourceModel);
+        await this.addSource(sourceId, sourceModel);
+        this._model.addLayer(layerId, layerModel);
+        await this.addLayer(layerId, layerModel, this.getLayerIDs().length);
+    }
     _identifyFeature(e) {
         var _a, _b;
         if (this._model.currentMode !== 'identifying') {
@@ -1619,7 +1669,7 @@ export class MainView extends React.Component {
                     const rawProps = feature.getProperties();
                     const fid = (_b = (_a = feature.getId) === null || _a === void 0 ? void 0 : _a.call(feature)) !== null && _b !== void 0 ? _b : rawProps === null || rawProps === void 0 ? void 0 : rawProps.fid;
                     if (rawProps && Object.keys(rawProps).length > 1) {
-                        const { geometry } = rawProps, clean = __rest(rawProps, ["geometry"]);
+                        const clean = __rest(rawProps, []);
                         props = clean;
                         if (fid !== null) {
                             // TODO Clean the cache under some condition?
@@ -1684,7 +1734,7 @@ export class MainView extends React.Component {
         const { layerId, layer: jgisLayer } = json;
         const olLayer = this.getLayer(layerId);
         if (!jgisLayer || !olLayer) {
-            console.log('Layer not found');
+            console.error('Failed to update layer -- layer not found');
             return;
         }
         this.updateLayer(layerId, jgisLayer, olLayer);
@@ -1736,10 +1786,10 @@ export class MainView extends React.Component {
                     React.createElement("div", { ref: this.divRef, style: {
                             width: '100%',
                             height: '100%',
-                        } })),
-                React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })),
-            React.createElement("div", { className: "jgis-panels-wrapper" },
-                this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state })),
-                this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel })))));
+                        } },
+                        React.createElement("div", { className: "jgis-panels-wrapper" },
+                            this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state })),
+                            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel }))))),
+                React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale }))));
     }
 }

package/lib/panelview/annotationPanel.js

@@ -19,7 +19,7 @@ export class AnnotationsPanel extends Component {
             return React.createElement("div", null);
         }
         const annotations = annotationIds.map((id) => {
-            return (React.createElement("div", null,
+            return (React.createElement("div", { className: "jgis-annotation-panel" },
                 React.createElement(Annotation, { jgisModel: this._jgisModel, annotationModel: this._annotationModel, itemId: id }),
                 React.createElement("hr", { className: "jGIS-Annotations-Separator" })));
         });

package/lib/panelview/components/filter-panel/Filter.js

@@ -166,7 +166,7 @@ const FilterComponent = ({ model }) => {
                 React.createElement("div", { style: {
                         justifyContent: 'flex-start',
                     } },
-                    React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addFilterRow }, "Add"),
+                    React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addFilterRow, "data-testid": "add-filter-button" }, "Add"),
                     React.createElement(Button, { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: clearFilters }, "Clear")),
                 React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: submitFilter }, "Submit")))),
         !shouldDisplay && (React.createElement("div", { style: { textAlign: 'center' } }, "No layer selected"))));