@jupytergis/base 0.4.4 → 0.5.0

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/menus.d.ts

@@ -0,0 +1,4 @@
+import { Menu } from '@lumino/widgets';
+import { CommandRegistry } from '@lumino/commands';
+export declare const vectorSubMenu: (commands: CommandRegistry) => Menu;
+export declare const rasterSubMenu: (commands: CommandRegistry) => Menu;

package/lib/menus.js

@@ -0,0 +1,45 @@
+import { Menu } from '@lumino/widgets';
+import { CommandIDs } from './constants';
+import { rasterIcon } from './icons';
+export const vectorSubMenu = (commands) => {
+    const subMenu = new Menu({ commands });
+    subMenu.title.label = 'Add Vector Layer';
+    subMenu.title.iconClass = 'fa fa-vector-square';
+    subMenu.id = 'jp-gis-toolbar-vector-menu';
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newVectorTileEntry
+    });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newGeoJSONEntry
+    });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newShapefileEntry
+    });
+    return subMenu;
+};
+export const rasterSubMenu = (commands) => {
+    const subMenu = new Menu({ commands });
+    subMenu.title.label = 'Add Raster Layer';
+    subMenu.title.icon = rasterIcon;
+    subMenu.id = 'jp-gis-toolbar-raster-menu';
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newRasterEntry
+    });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newHillshadeEntry
+    });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newImageEntry
+    });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newGeoTiffEntry
+    });
+    return subMenu;
+};

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/leftpanel.js

@@ -1,6 +1,5 @@
 import { SidePanel } from '@jupyterlab/ui-components';
 import { LayersPanel } from './components/layers';
-import { SourcesPanel } from './components/sources';
 import { ControlPanelHeader } from './header';
 import { FilterPanel } from './components/filter-panel/Filter';
 import { CommandIDs } from '../constants';
@@ -62,13 +61,6 @@ export class LeftPanelWidget extends SidePanel {
         this._commands = options.commands;
         const header = new ControlPanelHeader();
         this.header.addWidget(header);
-        const sourcesPanel = new SourcesPanel({
-            model: this._model,
-            onSelect: this._onSelect
-        });
-        sourcesPanel.title.caption = 'Sources';
-        sourcesPanel.title.label = 'Sources';
-        this.addWidget(sourcesPanel);
         const layerTree = new LayersPanel({
             model: this._model,
             state: this._state,

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,10 @@
 import { CommandToolbarButton } from '@jupyterlab/apputils';
-import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, redoIcon, terminalIcon, undoIcon } from '@jupyterlab/ui-components';
-import { Menu, Widget } from '@lumino/widgets';
+import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, redoIcon, undoIcon } from '@jupyterlab/ui-components';
+import { Widget } from '@lumino/widgets';
 import * as React from 'react';
 import { CommandIDs } from '../constants';
-import { rasterIcon } from '../icons';
+import { terminalToolbarIcon } from '../icons';
+import { rasterSubMenu, vectorSubMenu } from '../menus';
 import { UsersItem } from './usertoolbaritem';
 export const TOOLBAR_SEPARATOR_CLASS = 'jGIS-Toolbar-Separator';
 export const TOOLBAR_GROUPNAME_CLASS = 'jGIS-Toolbar-GroupName';
@@ -21,75 +22,48 @@ 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({
-                id: CommandIDs.newRasterEntry,
-                label: '',
-                commands: options.commands
-            }));
-            this.addItem('newVectorTileEntry', new CommandToolbarButton({
-                id: CommandIDs.newVectorTileEntry,
-                label: '',
-                commands: options.commands
-            }));
-            // vector sub menu
-            const vectorSubMenu = new Menu({ commands: options.commands });
-            vectorSubMenu.title.label = 'Add Vector Layer';
-            vectorSubMenu.title.iconClass = 'fa fa-vector-square';
-            vectorSubMenu.id = 'jp-gis-toolbar-vector-menu';
-            vectorSubMenu.addItem({
-                type: 'command',
-                command: CommandIDs.newGeoJSONEntry
-            });
-            vectorSubMenu.addItem({
-                type: 'command',
-                command: CommandIDs.newShapefileLayer
-            });
-            //raster submenu
-            const rasterSubMenu = new Menu({ commands: options.commands });
-            rasterSubMenu.title.label = 'Add Raster Layer';
-            rasterSubMenu.title.icon = rasterIcon;
-            rasterSubMenu.id = 'jp-gis-toolbar-raster-menu';
-            rasterSubMenu.addItem({
-                type: 'command',
-                command: CommandIDs.newHillshadeEntry
-            });
-            rasterSubMenu.addItem({
-                type: 'command',
-                command: CommandIDs.newImageEntry
-            });
-            rasterSubMenu.addItem({
-                type: 'command',
-                command: CommandIDs.newGeoTiffEntry
             });
+            this.addItem('openLayerBrowser', openLayersBrowserButton);
+            openLayersBrowserButton.node.dataset.testid = 'open-layers-browser';
             const NewSubMenu = new MenuSvg({ commands: options.commands });
             NewSubMenu.title.label = 'Add Layer';
-            NewSubMenu.addItem({ type: 'submenu', submenu: rasterSubMenu });
-            NewSubMenu.addItem({ type: 'submenu', submenu: vectorSubMenu });
+            NewSubMenu.addItem({
+                type: 'submenu',
+                submenu: rasterSubMenu(options.commands)
+            });
+            NewSubMenu.addItem({
+                type: 'submenu',
+                submenu: vectorSubMenu(options.commands)
+            });
             const NewEntryButton = new ToolbarButton({
                 icon: addIcon,
                 noFocusOnClick: false,
@@ -101,18 +75,31 @@ 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 geolocationButton = new CommandToolbarButton({
+                id: CommandIDs.getGeolocation,
+                commands: options.commands,
+                label: ''
+            });
+            this.addItem('Geolocation', geolocationButton);
+            geolocationButton.node.dataset.testid = 'geolocation-button';
+            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/lib/tools.d.ts

@@ -65,7 +65,7 @@ export declare const getFromIndexedDB: (key: string) => Promise<{
  */
 export declare const loadGeoTiff: (sourceInfo: {
     url?: string | undefined;
-}, file?: Contents.IModel | null) => Promise<{
+}, model: IJupyterGISModel, file?: Contents.IModel | null) => Promise<{
     file: any;
     metadata: any;
     sourceUrl: string;

package/lib/tools.js

@@ -301,11 +301,19 @@ export const getFromIndexedDB = async (key) => {
         request.onerror = () => reject(request.error);
     });
 };
-const fetchWithProxies = async (url, parseResponse) => {
+const fetchWithProxies = async (url, model, parseResponse) => {
+    let settings = null;
+    try {
+        settings = await model.getSettings();
+    }
+    catch (e) {
+        console.warn('Failed to get settings from model. Falling back.', e);
+    }
+    const proxyUrl = settings && settings.proxyUrl ? settings.proxyUrl : 'https://corsproxy.io';
     const proxyUrls = [
         url, // Direct fetch
         `/jupytergis_core/proxy?url=${encodeURIComponent(url)}`, // Internal proxy
-        `https://corsproxy.io/?url=${encodeURIComponent(url)}` // External proxy
+        `${proxyUrl}/?url=${encodeURIComponent(url)}` // External proxy
     ];
     for (const proxyUrl of proxyUrls) {
         try {
@@ -328,7 +336,7 @@ const fetchWithProxies = async (url, parseResponse) => {
  * @param sourceInfo object containing the URL of the GeoTIFF file.
  * @returns A promise that resolves to the file as a Blob, or undefined .
  */
-export const loadGeoTiff = async (sourceInfo, file) => {
+export const loadGeoTiff = async (sourceInfo, model, file) => {
     if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
         return null;
     }
@@ -347,7 +355,7 @@ export const loadGeoTiff = async (sourceInfo, file) => {
     }
     let fileBlob = null;
     if (!file) {
-        fileBlob = await fetchWithProxies(url, async (response) => response.blob());
+        fileBlob = await fetchWithProxies(url, model, async (response) => response.blob());
         if (!fileBlob) {
             showErrorMessage('Network error', `Failed to fetch ${url}`);
             throw new Error(`Failed to fetch ${url}`);
@@ -403,7 +411,7 @@ export const loadFile = async (fileInfo) => {
                 if (cached) {
                     return cached.file;
                 }
-                const geojson = await fetchWithProxies(filepath, async (response) => {
+                const geojson = await fetchWithProxies(filepath, model, async (response) => {
                     const arrayBuffer = await response.arrayBuffer();
                     return shp(arrayBuffer);
                 });
@@ -419,7 +427,7 @@ export const loadFile = async (fileInfo) => {
                 if (cached) {
                     return cached.file;
                 }
-                const geojson = await fetchWithProxies(filepath, async (response) => response.json());
+                const geojson = await fetchWithProxies(filepath, model, async (response) => response.json());
                 if (geojson) {
                     await saveToIndexedDB(filepath, geojson);
                     return geojson;
@@ -476,7 +484,7 @@ export const loadFile = async (fileInfo) => {
             }
             case 'GeoTiffSource': {
                 if (typeof file.content === 'string') {
-                    const tiff = loadGeoTiff({ url: filepath }, file);
+                    const tiff = loadGeoTiff({ url: filepath }, model, file);
                     return tiff;
                 }
                 else {

package/lib/widget.d.ts

@@ -53,6 +53,7 @@ export declare class JupyterGISPanel extends SplitPanel {
     dispose(): void;
     get currentViewModel(): MainViewModel;
     get consolePanel(): ConsolePanel | undefined;
+    get consoleOpened(): boolean;
     executeConsole(): void;
     removeConsole(): void;
     toggleConsole(jgisPath: string): Promise<void>;

package/lib/widget.js

@@ -116,6 +116,9 @@ export class JupyterGISPanel extends SplitPanel {
         var _a;
         return (_a = this._consoleView) === null || _a === void 0 ? void 0 : _a.consolePanel;
     }
+    get consoleOpened() {
+        return this._consoleOpened;
+    }
     executeConsole() {
         if (this._consoleView) {
             this._consoleView.execute();