@jupytergis/base 0.4.4 → 0.4.5

package/lib/annotations/components/AnnotationFloater.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
 import { IAnnotationProps } from './Annotation';
-interface IAnnotationFloaterProps extends IAnnotationProps {
-    open: boolean;
-}
-declare const AnnotationFloater: ({ itemId, annotationModel: model, open }: IAnnotationFloaterProps) => React.JSX.Element;
+declare const AnnotationFloater: ({ itemId, annotationModel: model }: IAnnotationProps) => React.JSX.Element;
 export default AnnotationFloater;

package/lib/annotations/components/AnnotationFloater.js

@@ -2,21 +2,26 @@ import React, { useState } from 'react';
 import { faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Annotation from './Annotation';
-const AnnotationFloater = ({ itemId, annotationModel: model, open }) => {
-    const [isOpen, setIsOpen] = useState(open);
+const AnnotationFloater = ({ itemId, annotationModel: model }) => {
+    const annotation = model.getAnnotation(itemId);
+    const [isOpen, setIsOpen] = useState(annotation === null || annotation === void 0 ? void 0 : annotation.open);
     // Function that either
     // - opens the annotation if `open`
     // - removes the annotation if `!open` and the annotation is empty
     // - closes the annotation if `!open` and the annotation is not empty
     const setOpenOrDelete = (open) => {
-        var _a;
         if (open) {
+            model.updateAnnotation(itemId, { open: true });
             return setIsOpen(true);
         }
-        if (!((_a = model.getAnnotation(itemId)) === null || _a === void 0 ? void 0 : _a.contents.length)) {
-            return model.removeAnnotation(itemId);
+        const current = model.getAnnotation(itemId);
+        if (!(current === null || current === void 0 ? void 0 : current.contents.length)) {
+            model.removeAnnotation(itemId);
+        }
+        else {
+            model.updateAnnotation(itemId, { open: false });
+            setIsOpen(false);
         }
-        setIsOpen(false);
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "jGIS-Annotation-Handler", onClick: () => setOpenOrDelete(!isOpen) }),

package/lib/annotations/model.d.ts

@@ -12,6 +12,7 @@ export declare class AnnotationModel implements IAnnotationModel {
     getAnnotation(id: string): IAnnotation | undefined;
     getAnnotationIds(): string[];
     addAnnotation(key: string, value: IAnnotation): void;
+    updateAnnotation(id: string, updates: Partial<IAnnotation>): void;
     removeAnnotation(key: string): void;
     addContent(id: string, value: string): void;
     private _model;

package/lib/annotations/model.js

@@ -48,6 +48,15 @@ export class AnnotationModel {
         var _a;
         (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.setMetadata(`annotation_${key}`, JSON.stringify(value));
     }
+    updateAnnotation(id, updates) {
+        var _a;
+        const existing = this.getAnnotation(id);
+        if (!existing) {
+            return;
+        }
+        (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.setMetadata(id, JSON.stringify(Object.assign(Object.assign({}, existing), updates)));
+        this._updateSignal.emit(null);
+    }
     removeAnnotation(key) {
         var _a;
         (_a = this._model) === null || _a === void 0 ? void 0 : _a.removeMetadata(key);

package/lib/commands.js

@@ -8,6 +8,8 @@ import { JupyterGISDocumentWidget } from './widget';
 import { getGeoJSONDataFromLayerSource, downloadFile } from './tools';
 import { ProcessingFormDialog } from './dialogs/ProcessingFormDialog';
 import { getSingleSelectedLayer, selectedLayerIsOfType, processSelectedLayer } from './processing';
+import { fromLonLat } from 'ol/proj';
+import { targetWithCenterIcon } from './icons';
 function loadKeybindings(commands, keybindings) {
     keybindings.forEach(binding => {
         commands.addKeyBinding({
@@ -842,6 +844,36 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             downloadFile(geojsonString, `${exportFileName}.geojson`, 'application/geo+json');
         }
     });
+    commands.addCommand(CommandIDs.getGeolocation, {
+        label: trans.__('Center on Geolocation'),
+        execute: async () => {
+            var _a;
+            const viewModel = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
+            const options = {
+                enableHighAccuracy: true,
+                timeout: 5000,
+                maximumAge: 0
+            };
+            const success = (pos) => {
+                const location = fromLonLat([
+                    pos.coords.longitude,
+                    pos.coords.latitude
+                ]);
+                const Jgislocation = {
+                    x: location[0],
+                    y: location[1]
+                };
+                if (viewModel) {
+                    viewModel.geolocationChanged.emit(Jgislocation);
+                }
+            };
+            const error = (err) => {
+                console.warn(`ERROR(${err.code}): ${err.message}`);
+            };
+            navigator.geolocation.getCurrentPosition(success, error, options);
+        },
+        icon: targetWithCenterIcon
+    });
     loadKeybindings(commands, keybindings);
 }
 var Private;

package/lib/constants.d.ts

@@ -9,6 +9,7 @@ export declare namespace CommandIDs {
     const symbology = "jupytergis:symbology";
     const identify = "jupytergis:identify";
     const temporalController = "jupytergis:temporalController";
+    const getGeolocation = "jupytergis:getGeolocation";
     const openLayerBrowser = "jupytergis:openLayerBrowser";
     const newRasterEntry = "jupytergis:newRasterEntry";
     const newVectorTileEntry = "jupytergis:newVectorTileEntry";

package/lib/constants.js

@@ -1,5 +1,5 @@
 import { redoIcon, undoIcon } from '@jupyterlab/ui-components';
-import { geoJSONIcon, moundIcon, rasterIcon } from './icons';
+import { bookOpenIcon, clockIcon, geoJSONIcon, infoIcon, moundIcon, rasterIcon, vectorSquareIcon } from './icons';
 /**
  * The command IDs.
  */
@@ -11,6 +11,8 @@ export var CommandIDs;
     CommandIDs.symbology = 'jupytergis:symbology';
     CommandIDs.identify = 'jupytergis:identify';
     CommandIDs.temporalController = 'jupytergis:temporalController';
+    // geolocation
+    CommandIDs.getGeolocation = 'jupytergis:getGeolocation';
     // Layers and sources creation commands
     CommandIDs.openLayerBrowser = 'jupytergis:openLayerBrowser';
     // Layer and source
@@ -78,9 +80,9 @@ const iconObject = {
     VideoLayer: { iconClass: 'fa fa-video' },
     [CommandIDs.redo]: { icon: redoIcon },
     [CommandIDs.undo]: { icon: undoIcon },
-    [CommandIDs.openLayerBrowser]: { iconClass: 'fa fa-book-open' },
+    [CommandIDs.openLayerBrowser]: { icon: bookOpenIcon },
     [CommandIDs.newRasterEntry]: { icon: rasterIcon },
-    [CommandIDs.newVectorTileEntry]: { iconClass: 'fa fa-vector-square' },
+    [CommandIDs.newVectorTileEntry]: { icon: vectorSquareIcon },
     [CommandIDs.newGeoJSONEntry]: { icon: geoJSONIcon },
     [CommandIDs.newHillshadeEntry]: { icon: moundIcon },
     [CommandIDs.newImageEntry]: { iconClass: 'fa fa-image' },
@@ -88,8 +90,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.temporalController]: { iconClass: 'fa fa-clock' }
+    [CommandIDs.identify]: { icon: infoIcon },
+    [CommandIDs.temporalController]: { icon: clockIcon }
 };
 /**
  * The registered icons

package/lib/icons.d.ts

@@ -8,3 +8,11 @@ export declare const nonVisibilityIcon: LabIcon;
 export declare const geoJSONIcon: LabIcon;
 export declare const moundIcon: LabIcon;
 export declare const logoMiniIconQGZ: LabIcon;
+export declare const bookOpenIcon: LabIcon;
+export declare const vectorSquareIcon: LabIcon;
+export declare const infoIcon: LabIcon;
+export declare const clockIcon: LabIcon;
+export declare const terminalToolbarIcon: LabIcon;
+export declare const geolocationIcon: LabIcon;
+export declare const targetWithoutCenterIcon: LabIcon;
+export declare const targetWithCenterIcon: LabIcon;

package/lib/icons.js

@@ -13,6 +13,14 @@ import nonVisibilitySvgStr from '../style/icons/nonvisibility.svg';
 import geoJsonSvgStr from '../style/icons/geojson.svg';
 import moundSvgStr from '../style/icons/mound.svg';
 import logoMiniQGZ from '../style/icons/logo_mini_qgz.svg';
+import bookOpenSvgStr from '../style/icons/book_open.svg';
+import vectorSquareSvgStr from '../style/icons/vector_square.svg';
+import infoSvgStr from '../style/icons/info-solid.svg';
+import clockSvgStr from '../style/icons/clock-solid.svg';
+import terminalToolbarSvgStr from '../style/icons/terminal_toolbar.svg';
+import geolocationSvgStr from '../style/icons/geolocation.svg';
+import targetWithoutCenterSvgStr from '../style/icons/target_without_center.svg';
+import targetWithCenterSvgStr from '../style/icons/target_with_center.svg';
 export const logoIcon = new LabIcon({
     name: 'jupytergis::logo',
     svgstr: logoSvgStr
@@ -49,3 +57,35 @@ export const logoMiniIconQGZ = new LabIcon({
     name: 'jupytergis::logoQGZ',
     svgstr: logoMiniQGZ
 });
+export const bookOpenIcon = new LabIcon({
+    name: 'jupytergis::bookOpen',
+    svgstr: bookOpenSvgStr
+});
+export const vectorSquareIcon = new LabIcon({
+    name: 'jupytergis::vectorSquare',
+    svgstr: vectorSquareSvgStr
+});
+export const infoIcon = new LabIcon({
+    name: 'jupytergis::info',
+    svgstr: infoSvgStr
+});
+export const clockIcon = new LabIcon({
+    name: 'jupytergis::clock',
+    svgstr: clockSvgStr
+});
+export const terminalToolbarIcon = new LabIcon({
+    name: 'jupytergis::terminalToolbar',
+    svgstr: terminalToolbarSvgStr
+});
+export const geolocationIcon = new LabIcon({
+    name: 'jupytergis::geolocation',
+    svgstr: geolocationSvgStr
+});
+export const targetWithoutCenterIcon = new LabIcon({
+    name: 'jupytergis::targetWithCenter',
+    svgstr: targetWithCenterSvgStr
+});
+export const targetWithCenterIcon = new LabIcon({
+    name: 'jupytergis::targetWithoutCenter',
+    svgstr: targetWithoutCenterSvgStr
+});

package/lib/mainview/mainView.d.ts

@@ -33,7 +33,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     constructor(props: IProps);
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
-    generateScene(): Promise<void>;
+    generateScene(center: number[], zoom: number): Promise<void>;
     createSelectInteraction: () => void;
     addContextMenu: () => void;
     /**
@@ -110,6 +110,8 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * to work with the temporal controller
      */
     handleTemporalController: (id: string, layer: IJGISLayer) => void;
+    private flyToGeometry;
+    private highlightFeatureOnMap;
     /**
      * Wait for all layers to be loaded.
      */
@@ -165,11 +167,13 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _updateAnnotation;
     private _onZoomToPosition;
     private _moveToPosition;
+    private _flyToPosition;
     private _onPointerMove;
     private _syncPointer;
     private _identifyFeature;
     private _triggerLayerUpdate;
     private _convertFeatureToMs;
+    private _handleGeolocationChanged;
     private _handleThemeChange;
     private _handleWindowResize;
     render(): JSX.Element;
@@ -187,5 +191,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _contextMenu;
     private _loadingLayers;
     private _originalFeatures;
+    private _highlightLayer;
 }
 export {};

package/lib/mainview/mainView.js

@@ -6,6 +6,7 @@ import { ContextMenu } from '@lumino/widgets';
 import { Collection, Map as OlMap, View, getUid } from 'ol';
 //@ts-expect-error no types for ol-pmtiles
 import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
+import Feature from 'ol/Feature';
 import { ScaleLine } from 'ol/control';
 import { singleClick } from 'ol/events/condition';
 import { GeoJSON, MVT } from 'ol/format';
@@ -31,6 +32,7 @@ import CollaboratorPointers from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
 import { Spinner } from './spinner';
+import { Point } from 'ol/geom';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
@@ -114,7 +116,8 @@ export class MainView extends React.Component {
                         zoom: (_a = this._Map.getView().getZoom()) !== null && _a !== void 0 ? _a : 0,
                         label: 'New annotation',
                         contents: [],
-                        parent: this._Map.getViewport().id
+                        parent: this._Map.getViewport().id,
+                        open: true
                     });
                 },
                 label: 'Add annotation',
@@ -418,6 +421,17 @@ export class MainView extends React.Component {
         this._model.zoomToPositionSignal.connect(this._onZoomToPosition, this);
         this._model.updateLayerSignal.connect(this._triggerLayerUpdate, this);
         this._model.addFeatureAsMsSignal.connect(this._convertFeatureToMs, this);
+        this._model.geolocationChanged.connect(this._handleGeolocationChanged, this);
+        this._model.flyToGeometrySignal.connect(this.flyToGeometry, this);
+        this._model.highlightFeatureSignal.connect(this.highlightFeatureOnMap, this);
+        // Watch isIdentifying and clear the highlight when Identify Tool is turned off
+        this._model.sharedModel.awareness.on('change', () => {
+            var _a;
+            const isIdentifying = this._model.isIdentifying;
+            if (!isIdentifying && this._highlightLayer) {
+                (_a = this._highlightLayer.getSource()) === null || _a === void 0 ? void 0 : _a.clear();
+            }
+        });
         this.state = {
             id: this._mainViewModel.id,
             lightTheme: isLightTheme(),
@@ -439,7 +453,12 @@ export class MainView extends React.Component {
     }
     async componentDidMount() {
         window.addEventListener('resize', this._handleWindowResize);
-        await this.generateScene();
+        const options = this._model.getOptions();
+        const center = options.longitude !== undefined && options.latitude !== undefined
+            ? fromLonLat([options.longitude, options.latitude])
+            : [0, 0];
+        const zoom = options.zoom !== undefined ? options.zoom : 1;
+        await this.generateScene(center, zoom);
         this.addContextMenu();
         this._mainViewModel.initSignal();
         if (window.jupytergisMaps !== undefined && this._documentPath) {
@@ -457,14 +476,14 @@ export class MainView extends React.Component {
         this._model.clientStateChanged.disconnect(this._onClientSharedStateChanged, this);
         this._mainViewModel.dispose();
     }
-    async generateScene() {
+    async generateScene(center, zoom) {
         if (this.divRef.current) {
             this._Map = new OlMap({
                 target: this.divRef.current,
                 layers: [],
                 view: new View({
-                    center: [0, 0],
-                    zoom: 1
+                    center,
+                    zoom
                 }),
                 controls: [new ScaleLine()]
             });
@@ -1064,6 +1083,86 @@ export class MainView extends React.Component {
             }
         }
     }
+    flyToGeometry(sender, geometry) {
+        if (!geometry || typeof geometry.getExtent !== 'function') {
+            console.warn('Invalid geometry for flyToGeometry:', geometry);
+            return;
+        }
+        const view = this._Map.getView();
+        const extent = geometry.getExtent();
+        view.fit(extent, {
+            padding: [50, 50, 50, 50],
+            duration: 1000,
+            maxZoom: 16
+        });
+    }
+    highlightFeatureOnMap(sender, featureOrGeometry) {
+        const geometry = (featureOrGeometry === null || featureOrGeometry === void 0 ? void 0 : featureOrGeometry.geometry) ||
+            (featureOrGeometry === null || featureOrGeometry === void 0 ? void 0 : featureOrGeometry._geometry) ||
+            featureOrGeometry;
+        if (!geometry) {
+            console.warn('No geometry found in feature:', featureOrGeometry);
+            return;
+        }
+        const isOlGeometry = typeof geometry.getCoordinates === 'function';
+        const parsedGeometry = isOlGeometry
+            ? geometry
+            : new GeoJSON().readGeometry(geometry, {
+                featureProjection: this._Map.getView().getProjection()
+            });
+        const olFeature = new Feature(Object.assign({ geometry: parsedGeometry }, (geometry !== featureOrGeometry ? featureOrGeometry : {})));
+        if (!this._highlightLayer) {
+            this._highlightLayer = new VectorLayer({
+                source: new VectorSource(),
+                style: feature => {
+                    var _a;
+                    const geomType = (_a = feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType();
+                    switch (geomType) {
+                        case 'Point':
+                        case 'MultiPoint':
+                            return new Style({
+                                image: new Circle({
+                                    radius: 6,
+                                    fill: new Fill({ color: 'rgba(255, 255, 0, 0.8)' }),
+                                    stroke: new Stroke({ color: '#ff0', width: 2 })
+                                })
+                            });
+                        case 'LineString':
+                        case 'MultiLineString':
+                            return new Style({
+                                stroke: new Stroke({
+                                    color: 'rgba(255, 255, 0, 0.8)',
+                                    width: 3
+                                })
+                            });
+                        case 'Polygon':
+                        case 'MultiPolygon':
+                            return new Style({
+                                stroke: new Stroke({
+                                    color: '#f00',
+                                    width: 2
+                                }),
+                                fill: new Fill({
+                                    color: 'rgba(255, 255, 0, 0.8)'
+                                })
+                            });
+                        default:
+                            return new Style({
+                                stroke: new Stroke({
+                                    color: '#000',
+                                    width: 2
+                                })
+                            });
+                    }
+                },
+                zIndex: 999
+            });
+            this._Map.addLayer(this._highlightLayer);
+        }
+        const source = this._highlightLayer.getSource();
+        source === null || source === void 0 ? void 0 : source.clear();
+        source === null || source === void 0 ? void 0 : source.addFeature(olFeature);
+    }
     /**
      * Wait for all layers to be loaded.
      */
@@ -1302,7 +1401,7 @@ export class MainView extends React.Component {
         // Check if the id is an annotation
         const annotation = (_a = this._model.annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotation(id);
         if (annotation) {
-            this._moveToPosition(annotation.position, annotation.zoom);
+            this._flyToPosition(annotation.position, annotation.zoom);
             return;
         }
         // The id is a layer
@@ -1334,15 +1433,18 @@ export class MainView extends React.Component {
     }
     _moveToPosition(center, zoom, duration = 1000) {
         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 });
             view.animate({ center: [center.x, center.y], duration });
         }
-        else {
-            view.setZoom(zoom);
-            view.setCenter([center.x, center.y]);
-        }
+    }
+    _flyToPosition(center, zoom, duration = 1000) {
+        const view = this._Map.getView();
+        view.animate({ zoom, duration });
+        view.animate({ center: [center.x, center.y], duration });
     }
     _onPointerMove(e) {
         const pixel = this._Map.getEventPixel(e);
@@ -1378,6 +1480,10 @@ export class MainView extends React.Component {
                 // last element is alpha
                 bandValues['Alpha'] = data[data.length - 1];
                 this._model.syncIdentifiedFeatures([bandValues], this._mainViewModel.id);
+                const coordinate = this._Map.getCoordinateFromPixel(e.pixel);
+                const point = new Point(coordinate);
+                // trigger highlight via signal
+                this._model.highlightFeatureSignal.emit(point);
                 break;
             }
         }
@@ -1404,6 +1510,16 @@ export class MainView extends React.Component {
             feature.set(`${selectedFeature}ms`, parsedTime);
         });
     }
+    _handleGeolocationChanged(sender, newPosition) {
+        const view = this._Map.getView();
+        const zoom = view.getZoom();
+        if (zoom) {
+            this._flyToPosition(newPosition, zoom);
+        }
+        else {
+            throw new Error('Could not move to geolocation, because current zoom is not defined.');
+        }
+    }
     render() {
         return (React.createElement(React.Fragment, null,
             Object.entries(this.state.annotations).map(([key, annotation]) => {
@@ -1415,7 +1531,7 @@ export class MainView extends React.Component {
                         left: screenPosition.x,
                         top: screenPosition.y
                     }, className: 'jGIS-Popup-Wrapper' },
-                    React.createElement(AnnotationFloater, { itemId: key, annotationModel: this._model.annotationModel, open: false }))));
+                    React.createElement(AnnotationFloater, { itemId: key, annotationModel: this._model.annotationModel }))));
             }),
             React.createElement("div", { className: "jGIS-Mainview-Container" },
                 this.state.displayTemporalController && (React.createElement(TemporalSlider, { model: this._model, filterStates: this.state.filterStates })),

package/lib/panelview/annotationPanel.js

@@ -29,14 +29,14 @@ export class AnnotationsPanel extends Component {
                 React.createElement(Annotation, { rightPanelModel: this._rightPanelModel, annotationModel: this._annotationModel, itemId: id }),
                 React.createElement("hr", { className: "jGIS-Annotations-Separator" })));
         });
-        return React.createElement("div", null, annotations);
+        return React.createElement("div", { className: "jgis-scrollable" }, annotations);
     }
 }
 export class Annotations extends PanelWithToolbar {
     constructor(options) {
         super({});
         this.title.label = 'Annotations';
-        this.addClass('jGIS-Annotations');
+        this.addClass('jgis-scrollable');
         this._annotationModel = options.annotationModel;
         this._rightPanelModel = options.rightPanelModel;
         this._widget = ReactWidget.create(React.createElement(AnnotationsPanel, { rightPanelModel: this._rightPanelModel, annotationModel: this._annotationModel }));

package/lib/panelview/components/identify-panel/IdentifyPanel.js

@@ -1,6 +1,8 @@
 import { LabIcon, ReactWidget, caretDownIcon } from '@jupyterlab/ui-components';
 import { Panel } from '@lumino/widgets';
 import React, { useEffect, useRef, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 export class IdentifyPanel extends Panel {
     constructor(options) {
         super();
@@ -9,6 +11,7 @@ export class IdentifyPanel extends Panel {
         this.id = 'jupytergis::identifyPanel';
         this.title.caption = 'Identify';
         this.title.label = 'Identify';
+        this.addClass('jgis-scrollable');
         this.addWidget(ReactWidget.create(React.createElement(IdentifyPanelComponent, { controlPanelModel: this._model, tracker: this._tracker })));
     }
 }
@@ -80,8 +83,13 @@ const IdentifyPanelComponent = ({ controlPanelModel, tracker }) => {
             jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.clientStateChanged.disconnect(handleClientStateChanged);
         };
     }, [jgisModel]);
+    const highlightFeatureOnMap = (feature) => {
+        var _a, _b;
+        (_a = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.highlightFeatureSignal) === null || _a === void 0 ? void 0 : _a.emit(feature);
+        const geometry = feature.geometry || feature._geometry;
+        (_b = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.flyToGeometrySignal) === null || _b === void 0 ? void 0 : _b.emit(geometry);
+    };
     const toggleFeatureVisibility = (index) => {
-        console.log('visibleFeatures', visibleFeatures);
         setVisibleFeatures(prev => (Object.assign(Object.assign({}, prev), { [index]: !prev[index] })));
     };
     return (React.createElement("div", { className: "jgis-identify-wrapper", style: {
@@ -90,14 +98,28 @@ const IdentifyPanelComponent = ({ controlPanelModel, tracker }) => {
                 : 'unset'
         } }, features &&
         Object.values(features).map((feature, featureIndex) => (React.createElement("div", { key: featureIndex, className: "jgis-identify-grid-item" },
-            React.createElement("div", { className: "jgis-identify-grid-item-header", onClick: () => toggleFeatureVisibility(featureIndex) },
-                React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: `jp-gis-layerGroupCollapser${visibleFeatures[featureIndex] ? ' jp-mod-expanded' : ''}`, tag: 'span' }),
-                React.createElement("span", null,
-                    "Feature ",
-                    featureIndex + 1,
-                    ":")),
+            React.createElement("div", { className: "jgis-identify-grid-item-header" },
+                React.createElement("span", { onClick: () => toggleFeatureVisibility(featureIndex) },
+                    React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: `jp-gis-layerGroupCollapser${visibleFeatures[featureIndex] ? ' jp-mod-expanded' : ''}`, tag: 'span' }),
+                    React.createElement("span", null,
+                        "Feature ",
+                        featureIndex + 1)),
+                (() => {
+                    const isRasterFeature = !feature.geometry &&
+                        !feature._geometry &&
+                        typeof (feature === null || feature === void 0 ? void 0 : feature.x) !== 'number' &&
+                        typeof (feature === null || feature === void 0 ? void 0 : feature.y) !== 'number';
+                    return (React.createElement("button", { className: "jgis-highlight-button", onClick: e => {
+                            e.stopPropagation();
+                            highlightFeatureOnMap(feature);
+                        }, title: isRasterFeature
+                            ? 'Highlight not available for raster features'
+                            : 'Highlight feature on map', disabled: isRasterFeature },
+                        React.createElement(FontAwesomeIcon, { icon: faMagnifyingGlass })));
+                })()),
             visibleFeatures[featureIndex] && (React.createElement(React.Fragment, null, Object.entries(feature)
                 .filter(([key, value]) => typeof value !== 'object' || value === null)
+                .sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
                 .map(([key, value]) => (React.createElement("div", { key: key, className: "jgis-identify-grid-body" },
                 React.createElement("strong", null,
                     key,

package/lib/panelview/components/layers.js

@@ -94,6 +94,7 @@ function LayersBodyComponent(props) {
         };
         model === null || model === void 0 ? void 0 : model.sharedModel.layersChanged.connect(updateLayers);
         model === null || model === void 0 ? void 0 : model.sharedModel.layerTreeChanged.connect(updateLayers);
+        updateLayers();
         return () => {
             model === null || model === void 0 ? void 0 : model.sharedModel.layersChanged.disconnect(updateLayers);
             model === null || model === void 0 ? void 0 : model.sharedModel.layerTreeChanged.disconnect(updateLayers);

package/lib/panelview/rightpanel.js

@@ -30,6 +30,7 @@ export class RightPanelWidget extends SidePanel {
         });
         identifyPanel.title.caption = 'Identify';
         identifyPanel.title.label = 'Identify';
+        identifyPanel.addClass('jgis-scrollable');
         this.addWidget(identifyPanel);
         this._model.documentChanged.connect((_, changed) => {
             if (changed) {

package/lib/toolbar/widget.js

@@ -1,9 +1,9 @@
 import { CommandToolbarButton } from '@jupyterlab/apputils';
-import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, redoIcon, terminalIcon, undoIcon } from '@jupyterlab/ui-components';
+import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, redoIcon, undoIcon } from '@jupyterlab/ui-components';
 import { Menu, Widget } from '@lumino/widgets';
 import * as React from 'react';
 import { CommandIDs } from '../constants';
-import { rasterIcon } from '../icons';
+import { rasterIcon, terminalToolbarIcon } from '../icons';
 import { UsersItem } from './usertoolbaritem';
 export const TOOLBAR_SEPARATOR_CLASS = 'jGIS-Toolbar-Separator';
 export const TOOLBAR_GROUPNAME_CLASS = 'jGIS-Toolbar-GroupName';
@@ -21,41 +21,58 @@ export class ToolbarWidget extends ReactiveToolbar {
         super();
         this.addClass('jGIS-toolbar-widget');
         if (options.commands) {
-            this.addItem('undo', new CommandToolbarButton({
+            const undoButton = new CommandToolbarButton({
                 id: CommandIDs.undo,
                 label: '',
                 icon: undoIcon,
                 commands: options.commands
-            }));
-            this.addItem('redo', new CommandToolbarButton({
+            });
+            this.addItem('undo', undoButton);
+            undoButton.node.dataset.testid = 'undo-button';
+            const redoButton = new CommandToolbarButton({
                 id: CommandIDs.redo,
                 label: '',
                 icon: redoIcon,
                 commands: options.commands
-            }));
+            });
+            this.addItem('redo', redoButton);
             this.addItem('separator0', new Separator());
-            this.addItem('Toggle console', new CommandToolbarButton({
+            const toggleConsoleButton = new CommandToolbarButton({
                 id: CommandIDs.toggleConsole,
                 commands: options.commands,
                 label: '',
-                icon: terminalIcon
-            }));
+                icon: terminalToolbarIcon
+            });
+            this.addItem('Toggle console', toggleConsoleButton);
+            toggleConsoleButton.node.dataset.testid = 'toggle-console-button';
             this.addItem('separator1', new Separator());
-            this.addItem('openLayerBrowser', new CommandToolbarButton({
+            const openLayersBrowserButton = new CommandToolbarButton({
                 id: CommandIDs.openLayerBrowser,
                 label: '',
                 commands: options.commands
-            }));
-            this.addItem('newRasterEntry', new CommandToolbarButton({
+            });
+            this.addItem('openLayerBrowser', openLayersBrowserButton);
+            openLayersBrowserButton.node.dataset.testid = 'open-layers-browser';
+            const newRasterEntryButton = new CommandToolbarButton({
                 id: CommandIDs.newRasterEntry,
                 label: '',
                 commands: options.commands
-            }));
-            this.addItem('newVectorTileEntry', new CommandToolbarButton({
+            });
+            this.addItem('newRasterEntry', newRasterEntryButton);
+            const newVectorTileEntryButton = new CommandToolbarButton({
                 id: CommandIDs.newVectorTileEntry,
                 label: '',
                 commands: options.commands
-            }));
+            });
+            this.addItem('newVectorTileEntry', newVectorTileEntryButton);
+            newRasterEntryButton.node.dataset.testid = 'new-raster-entry-button';
+            const geolocationButton = new CommandToolbarButton({
+                id: CommandIDs.getGeolocation,
+                commands: options.commands,
+                label: ''
+            });
+            this.addItem('Geolocation', geolocationButton);
+            geolocationButton.node.dataset.testid = 'geolocation-button';
             // vector sub menu
             const vectorSubMenu = new Menu({ commands: options.commands });
             vectorSubMenu.title.label = 'Add Vector Layer';
@@ -101,18 +118,24 @@ export class ToolbarWidget extends ReactiveToolbar {
                     NewSubMenu.open(bbox.x, bbox.bottom);
                 }
             });
+            NewEntryButton.node.dataset.testid = 'new-entry-button';
             this.addItem('New', NewEntryButton);
             this.addItem('separator2', new Separator());
-            this.addItem('identify', new CommandToolbarButton({
+            const identifyButton = new CommandToolbarButton({
                 id: CommandIDs.identify,
                 label: '',
                 commands: options.commands
-            }));
-            this.addItem('temporalController', new CommandToolbarButton({
+            });
+            this.addItem('identify', identifyButton);
+            identifyButton.node.dataset.testid = 'identify-button';
+            const temporalControllerButton = new CommandToolbarButton({
                 id: CommandIDs.temporalController,
                 label: '',
                 commands: options.commands
-            }));
+            });
+            this.addItem('temporalController', temporalControllerButton);
+            temporalControllerButton.node.dataset.testid =
+                'temporal-controller-button';
             this.addItem('spacer', ReactiveToolbar.createSpacerItem());
             // Users
             this.addItem('users', ReactWidget.create(React.createElement(UsersItem, { model: options.model })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -43,7 +43,7 @@
     "@fortawesome/react-fontawesome": "latest",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.4.4",
+    "@jupytergis/schema": "^0.4.5",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",

package/style/icons/book_open.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 576 512"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <defs
+      id="defs1" />
+   <!--!Font
+   Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License -
+   https://fontawesome.com/license/free -->
+   <path
+      id="path1"
+      d="M542.2 32.1c-54.8 3.1-163.7 14.4-231 55.6-4.6 2.8-7.3 7.9-7.3 13.2v363.9c0 11.6 12.6 18.9 23.3 13.5 69.2-34.8 169.2-44.3 218.7-46.9 16.9-.9 30-14.4 30-30.7V62.8c0-17.7-15.4-31.7-33.8-30.7zM264.7 87.6C197.5 46.5 88.6 35.2 33.8 32.1 15.4 31 0 45 0 62.8V400.6c0 16.2 13.1 29.8 30 30.7 49.5 2.6 149.6 12.1 218.8 47 10.6 5.4 23.2-1.9 23.2-13.5V100.6c0-5.3-2.6-10.1-7.3-13z"
+      fill="#616161"
+      class="jp-icon3"
+   />
+</svg>

package/style/icons/clock-solid.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <!--!FontAwesome Free 6.7.2 by @fontawesome - https://fontawesome.com License -https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+  <path
+     d="M 256,47.68 C 140.92,47.68 47.68,140.92 47.68,256 47.68,371.08 140.92,464.32 256,464.32 371.08,464.32 464.32,371.08 464.32,256 464.32,140.92 371.08,47.68 256,47.68 Z m 77.7,262.92 v 0 l -16.8,21 a 13.44,13.44 0 0 1 -18.9,2.1 v 0 l -56.28,-41.748 a 33.6,33.6 0 0 1 -12.6,-26.208 V 135.04 a 13.44,13.44 0 0 1 13.44,-13.44 h 26.88 a 13.44,13.44 0 0 1 13.44,13.44 V 256 l 48.72,35.7 a 13.44,13.44 0 0 1 2.1,18.9 z"
+     id="path1"
+     style="stroke-width:0.84"
+     fill="#616161"
+     class="jp-icon3" />
+</svg>

package/style/icons/geolocation.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 384 512"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+  <path
+     d="M172.3 501.7C27 291 0 269.4 0 192 0 86 86 0 192 0s192 86 192 192c0 77.4-27 99-172.3 309.7-9.5 13.8-29.9 13.8-39.5 0zM192 272c44.2 0 80-35.8 80-80s-35.8-80-80-80-80 35.8-80 80 35.8 80 80 80z"
+     id="path1"
+     style="fill:#616161;fill-opacity:1" />
+</svg>

package/style/icons/info-solid.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+    viewBox="0 0 192 512"
+    version="1.1"
+    id="svg1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg">
+    <defs
+        id="defs1" />
+    <!--!Font
+    Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License -
+    https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+    <path
+        d="m 35.2,390.56 h 16 V 275.04 h -16 c -8.8,0 -16,-7.2 -16,-16 V 220.8 c 0,-8.8 7.2,-16 16,-16 h 89.6 c 8.8,0 16,7.2 16,16 v 169.76 h 16 c 8.8,0 16,7.2 16,16 v 38.24 c 0,8.8 -7.2,16 -16,16 H 35.2 c -8.8,0 -16,-7.2 -16,-16 v -38.24 c 0,-8.8 7.2,-16 16,-16 z M 96,51.2 c -31.84,0 -57.6,25.76 -57.6,57.6 0,31.84 25.76,57.6 57.6,57.6 31.84,0 57.6,-25.76 57.6,-57.6 0,-31.84 -25.76,-57.6 -57.6,-57.6 z"
+        id="path1"
+        style="stroke-width:0.8"
+        fill="#616161"
+        class="jp-icon3"
+    />
+</svg>

package/style/icons/raster.svg

@@ -1,5 +1,6 @@
 <svg height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-  <g class="jp-icon2 jp-icon-selectable" fill="#e2e2e2">
-    <path d="M 22,8 H 2 v 1 h 20 z m 0,10.5 H 2 v 1 H 22 Z M 22,15 H 2 v 1 h 20 z m 0,-3.5 H 2 v 1 h 20 z m 0,-7 H 2 v 1 H 22 Z M 5.5,2 h -1 v 20 h 1 z M 9,2 H 8 v 20 h 1 z m 3.5,0 h -1 v 20 h 1 z M 16,2 h -1 v 20 h 1 z m 3.5,0 h -1 v 20 h 1 z"/>
+  <g class="jp-icon3 jp-icon-selectable" fill="#616161">
+    <path
+      d="M 22,8 H 2 v 1 h 20 z m 0,10.5 H 2 v 1 H 22 Z M 22,15 H 2 v 1 h 20 z m 0,-3.5 H 2 v 1 h 20 z m 0,-7 H 2 v 1 H 22 Z M 5.5,2 h -1 v 20 h 1 z M 9,2 H 8 v 20 h 1 z m 3.5,0 h -1 v 20 h 1 z M 16,2 h -1 v 20 h 1 z m 3.5,0 h -1 v 20 h 1 z" />
   </g>
 </svg>

package/style/icons/target_with_center.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font
+    Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License -
+    https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+    <path
+        d="M256 0c17.7 0 32 14.3 32 32l0 34.7C368.4 80.1 431.9 143.6 445.3 224l34.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-34.7 0C431.9 368.4 368.4 431.9 288 445.3l0 34.7c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-34.7C143.6 431.9 80.1 368.4 66.7 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l34.7 0C80.1 143.6 143.6 80.1 224 66.7L224 32c0-17.7 14.3-32 32-32zM128 256a128 128 0 1 0 256 0 128 128 0 1 0 -256 0zm128-80a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"
+        fill="#616161"
+        class="jp-icon3"
+    />
+</svg>

package/style/icons/target_without_center.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+  <path
+     d="m 256,0 c 17.7,0 32,14.3 32,32 V 66.7 C 368.4,80.1 431.9,143.6 445.3,224 H 480 c 17.7,0 32,14.3 32,32 0,17.7 -14.3,32 -32,32 H 445.3 C 431.9,368.4 368.4,431.9 288,445.3 V 480 c 0,17.7 -14.3,32 -32,32 -17.7,0 -32,-14.3 -32,-32 V 445.3 C 143.6,431.9 80.1,368.4 66.7,288 H 32 C 14.3,288 0,273.7 0,256 0,238.3 14.3,224 32,224 H 66.7 C 80.1,143.6 143.6,80.1 224,66.7 V 32 C 224,14.3 238.3,0 256,0 Z M 128,256 c 0,70.6925 57.30755,127.99994 128,127.99994 70.69245,0 128,-57.30744 128,-127.99994 0,-70.6925 -57.30755,-127.99994 -128,-127.99994 -70.69245,0 -128,57.30744 -128,127.99994 z"
+     id="path1"
+     fill="#616161"
+     class="jp-icon3"
+     />
+</svg>

package/style/icons/terminal_toolbar.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" viewBox="0 0 24 24">
+  <path
+    d="M2 2h20v20H2z"
+    fill="#616161"
+    class="jp-icon3"
+  />
+  <path
+    d="M9.01 14.762q0-.246-.077-.434a.9.9 0 0 0-.234-.351 1.6 1.6 0 0 0-.422-.288 5 5 0 0 0-.627-.263q-.592-.211-1.078-.446a3.5 3.5 0 0 1-.832-.544 2.2 2.2 0 0 1-.528-.721 2.4 2.4 0 0 1-.187-.985q0-.498.17-.908a2.1 2.1 0 0 1 .48-.72q.31-.306.75-.493.44-.188.979-.24V7.11h.937v1.272q.527.07.95.287.421.217.714.568.3.345.457.82.165.47.164 1.055H8.998q0-.709-.323-1.072-.322-.37-.873-.37-.299 0-.521.083a.9.9 0 0 0-.358.223.9.9 0 0 0-.21.334q-.066.194-.065.421 0 .23.064.41a.9.9 0 0 0 .229.329q.165.152.428.293.263.134.656.275.591.223 1.072.463.48.235.82.55.346.312.528.727.187.41.187.973 0 .515-.17.932-.17.41-.486.709t-.762.48a3.7 3.7 0 0 1-.996.229v1.148h-.931V17.1a4 4 0 0 1-.967-.217 2.6 2.6 0 0 1-.832-.504 2.4 2.4 0 0 1-.574-.826q-.217-.505-.217-1.207h1.635q0 .421.123.709.123.281.316.45.2.165.451.235.252.07.516.07.627 0 .949-.292a.98.98 0 0 0 .322-.756m8.36 3.51h-5.343V17h5.344z"
+    fill="#bdbdbd"
+    class="jp-icon-accent1"
+  />
+</svg>

package/style/icons/vector_square.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="jp-icon3"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <defs
+      id="defs1" />
+   <!--!Font
+   Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License -
+   https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+   <path
+      d="M 486.4,140.8 V 54.4 c 0,-15.93 -12.87,-28.8 -28.8,-28.8 h -86.4 c -15.93,0 -28.8,12.87 -28.8,28.8 H 169.6 c 0,-15.93 -12.87,-28.8 -28.8,-28.8 H 54.4 c -15.93,0 -28.8,12.87 -28.8,28.8 v 86.4 c 0,15.93 12.87,28.8 28.8,28.8 v 172.8 c -15.93,0 -28.8,12.87 -28.8,28.8 v 86.4 c 0,15.93 12.87,28.8 28.8,28.8 h 86.4 c 15.93,0 28.8,-12.87 28.8,-28.8 h 172.8 c 0,15.93 12.87,28.8 28.8,28.8 h 86.4 c 15.93,0 28.8,-12.87 28.8,-28.8 v -86.4 c 0,-15.93 -12.87,-28.8 -28.8,-28.8 V 169.6 c 15.93,0 28.8,-12.87 28.8,-28.8 z M 400,83.2 h 28.8 V 112 H 400 Z m -316.8,0 H 112 V 112 H 83.2 Z M 112,428.8 H 83.2 V 400 H 112 Z m 316.8,0 H 400 V 400 h 28.8 z M 400,342.4 h -28.8 c -15.93,0 -28.8,12.87 -28.8,28.8 V 400 H 169.6 v -28.8 c 0,-15.93 -12.87,-28.8 -28.8,-28.8 H 112 V 169.6 h 28.8 c 15.93,0 28.8,-12.87 28.8,-28.8 V 112 h 172.8 v 28.8 c 0,15.93 12.87,28.8 28.8,28.8 H 400 Z"
+      id="path1"
+      style="stroke-width:0.9"
+      fill="#616161"
+      class="jp-icon3"
+   />
+</svg>