@jupytergis/base 0.2.1 → 0.4.0

package/lib/mainview/mainviewmodel.d.ts

@@ -1,5 +1,6 @@
 import { IAnnotation, IJupyterGISModel } from '@jupytergis/schema';
 import { ObservableMap } from '@jupyterlab/observables';
+import { CommandRegistry } from '@lumino/commands';
 import { JSONValue } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
 export declare class MainViewModel implements IDisposable {
@@ -8,12 +9,14 @@ export declare class MainViewModel implements IDisposable {
     get id(): string;
     get jGISModel(): IJupyterGISModel;
     get viewSettingChanged(): import("@lumino/signaling").ISignal<ObservableMap<JSONValue>, import("@jupyterlab/observables").IObservableMap.IChangedArgs<JSONValue>>;
+    get commands(): CommandRegistry;
     dispose(): void;
     initSignal(): void;
     addAnnotation(value: IAnnotation): void;
     private _onsharedLayersChanged;
     private _jGISModel;
     private _viewSetting;
+    private _commands;
     private _id;
     private _isDisposed;
 }
@@ -21,5 +24,6 @@ export declare namespace MainViewModel {
     interface IOptions {
         jGISModel: IJupyterGISModel;
         viewSetting: ObservableMap<JSONValue>;
+        commands: CommandRegistry;
     }
 }

package/lib/mainview/mainviewmodel.js

@@ -4,6 +4,7 @@ export class MainViewModel {
         this._isDisposed = false;
         this._jGISModel = options.jGISModel;
         this._viewSetting = options.viewSetting;
+        this._commands = options.commands;
     }
     get isDisposed() {
         return this._isDisposed;
@@ -17,6 +18,9 @@ export class MainViewModel {
     get viewSettingChanged() {
         return this._viewSetting.changed;
     }
+    get commands() {
+        return this._commands;
+    }
     dispose() {
         if (this._isDisposed) {
             return;

package/lib/mainview/mainviewwidget.d.ts

@@ -3,8 +3,6 @@ import { MainViewModel } from './mainviewmodel';
 export declare class JupyterGISMainViewPanel extends ReactWidget {
     /**
      * Construct a `JupyterGISPanel`.
-     *
-     * @param context - The documents context.
      */
     constructor(options: {
         mainViewModel: MainViewModel;

package/lib/mainview/mainviewwidget.js

@@ -4,8 +4,6 @@ import { MainView } from './mainView';
 export class JupyterGISMainViewPanel extends ReactWidget {
     /**
      * Construct a `JupyterGISPanel`.
-     *
-     * @param context - The documents context.
      */
     constructor(options) {
         super();

package/lib/panelview/annotationPanel.js

@@ -9,12 +9,12 @@ export class AnnotationsPanel extends Component {
         };
         this._annotationModel = props.annotationModel;
         this._rightPanelModel = props.rightPanelModel;
-        this._annotationModel.contextChanged.connect(async () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            await ((_b = (_a = this._annotationModel) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.ready);
-            (_e = (_d = (_c = this._annotationModel) === null || _c === void 0 ? void 0 : _c.context) === null || _d === void 0 ? void 0 : _d.model) === null || _e === void 0 ? void 0 : _e.sharedMetadataChanged.disconnect(updateCallback);
+        this._annotationModel.modelChanged.connect(async () => {
+            // await this._annotationModel?.context?.ready;
+            var _a, _b, _c, _d;
+            (_b = (_a = this._annotationModel) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.sharedMetadataChanged.disconnect(updateCallback);
             this._annotationModel = props.annotationModel;
-            (_h = (_g = (_f = this._annotationModel) === null || _f === void 0 ? void 0 : _f.context) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.sharedMetadataChanged.connect(updateCallback);
+            (_d = (_c = this._annotationModel) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.sharedMetadataChanged.connect(updateCallback);
             this.forceUpdate();
         });
     }

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

@@ -2,7 +2,7 @@ import { Button, ReactWidget } from '@jupyterlab/ui-components';
 import { Panel } from '@lumino/widgets';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
-import { debounce, getLayerTileInfo } from '../../../tools';
+import { debounce, loadFile } from '../../../tools';
 import FilterRow from './FilterRow';
 /**
  * The filters panel widget.
@@ -28,7 +28,7 @@ const FilterComponent = (props) => {
     const [featuresInLayer, setFeaturesInLayer] = useState({});
     const [model, setModel] = useState(props.model.jGISModel);
     (_a = props.model) === null || _a === void 0 ? void 0 : _a.documentChanged.connect((_, widget) => {
-        setModel(widget === null || widget === void 0 ? void 0 : widget.context.model);
+        setModel(widget === null || widget === void 0 ? void 0 : widget.model);
     });
     // Reset state values when current widget changes
     useEffect(() => {
@@ -107,13 +107,12 @@ const FilterComponent = (props) => {
         featuresInLayerRef.current = featuresInLayer;
     }, [featuresInLayer]);
     const buildFilterObject = async (currentLayer) => {
-        var _a, _b, _c, _d;
+        var _a, _b;
         if (!model) {
             return;
         }
         const layer = model.getLayer(currentLayer !== null && currentLayer !== void 0 ? currentLayer : selectedLayer);
         const source = model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
-        const { latitude, longitude, extent, zoom } = model.getOptions();
         if (!source || !layer) {
             return;
         }
@@ -130,27 +129,12 @@ const FilterComponent = (props) => {
             });
         }
         switch (source.type) {
-            case 'VectorTileSource': {
-                try {
-                    const tile = await getLayerTileInfo((_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.url, {
-                        latitude,
-                        longitude,
-                        extent,
-                        zoom
-                    });
-                    const layerValue = tile.layers[(_c = layer.parameters) === null || _c === void 0 ? void 0 : _c.sourceLayer];
-                    for (let i = 0; i < layerValue.length; i++) {
-                        const feature = layerValue.feature(i);
-                        addFeatureValue(feature.properties, aggregatedProperties);
-                    }
-                }
-                catch (error) {
-                    console.warn(`Error fetching tile info: ${error}`);
-                }
-                break;
-            }
             case 'GeoJSONSource': {
-                const data = await (model === null || model === void 0 ? void 0 : model.readGeoJSON((_d = source.parameters) === null || _d === void 0 ? void 0 : _d.path));
+                const data = await loadFile({
+                    filepath: (_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path,
+                    type: 'GeoJSONSource',
+                    model: model
+                });
                 data === null || data === void 0 ? void 0 : data.features.forEach((feature) => {
                     feature.properties &&
                         addFeatureValue(feature.properties, aggregatedProperties);

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

@@ -26,7 +26,7 @@ const IdentifyPanelComponent = ({ controlPanelModel, tracker }) => {
      * Update the model when it changes.
      */
     controlPanelModel === null || controlPanelModel === void 0 ? void 0 : controlPanelModel.documentChanged.connect((_, widget) => {
-        setJgisModel(widget === null || widget === void 0 ? void 0 : widget.context.model);
+        setJgisModel(widget === null || widget === void 0 ? void 0 : widget.model);
     });
     // Reset state values when current widget changes
     useEffect(() => {

package/lib/panelview/components/layers.js

@@ -104,8 +104,8 @@ function LayersBodyComponent(props) {
      */
     (_b = props.model) === null || _b === void 0 ? void 0 : _b.documentChanged.connect((_, widget) => {
         var _a;
-        setModel(widget === null || widget === void 0 ? void 0 : widget.context.model);
-        setLayerTree(((_a = widget === null || widget === void 0 ? void 0 : widget.context.model) === null || _a === void 0 ? void 0 : _a.getLayerTree()) || []);
+        setModel(widget === null || widget === void 0 ? void 0 : widget.model);
+        setLayerTree(((_a = widget === null || widget === void 0 ? void 0 : widget.model) === null || _a === void 0 ? void 0 : _a.getLayerTree()) || []);
     });
     return (React.createElement("div", { id: "jp-gis-layer-tree" }, layerTree
         .slice()

package/lib/panelview/components/sources.js

@@ -55,7 +55,7 @@ function SourcesBodyComponent(props) {
      * Update the model when it changes.
      */
     (_b = props.model) === null || _b === void 0 ? void 0 : _b.documentChanged.connect((_, widget) => {
-        setModel(widget === null || widget === void 0 ? void 0 : widget.context.model);
+        setModel(widget === null || widget === void 0 ? void 0 : widget.model);
     });
     return (React.createElement("div", { id: "jp-gis-sources" }, sourceIds.map(sourceId => {
         return (React.createElement(SourceComponent, { key: `source-${sourceId}`, gisModel: model, sourceId: sourceId, onClick: onItemClick }));

package/lib/panelview/leftpanel.d.ts

@@ -4,6 +4,7 @@ import { SidePanel } from '@jupyterlab/ui-components';
 import { Message } from '@lumino/messaging';
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { IControlPanelModel } from '../types';
+import { CommandRegistry } from '@lumino/commands';
 /**
  * Options of the left panel widget.
  */
@@ -37,12 +38,14 @@ export declare class LeftPanelWidget extends SidePanel {
     private _lastSelectedNodeId;
     private _model;
     private _state;
+    private _commands;
 }
 export declare namespace LeftPanelWidget {
     interface IOptions {
         model: IControlPanelModel;
         tracker: IJupyterGISTracker;
         state: IStateDB;
+        commands: CommandRegistry;
     }
     interface IProps {
         filePath?: string;

package/lib/panelview/leftpanel.js

@@ -3,6 +3,7 @@ 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';
 export class LeftPanelWidget extends SidePanel {
     constructor(options) {
         super();
@@ -50,11 +51,13 @@ export class LeftPanelWidget extends SidePanel {
                 const updatedSelectedValue = Object.assign(Object.assign({}, selectedValue), { [item]: { type, selectedNodeId: nodeId } });
                 this._lastSelectedNodeId = nodeId;
                 jGISModel.syncSelected(updatedSelectedValue, this.id);
+                this._commands.notifyCommandChanged(CommandIDs.temporalController);
             }
         };
         this.addClass('jGIS-sidepanel-widget');
         this._model = options.model;
         this._state = options.state;
+        this._commands = options.commands;
         const header = new ControlPanelHeader();
         this.header.addWidget(header);
         const sourcesPanel = new SourcesPanel({
@@ -81,7 +84,7 @@ export class LeftPanelWidget extends SidePanel {
         this.addWidget(filterPanel);
         options.tracker.currentChanged.connect((_, changed) => {
             if (changed) {
-                header.title.label = changed.context.localPath;
+                header.title.label = changed.model.filePath;
             }
             else {
                 header.title.label = '-';
@@ -129,5 +132,6 @@ export class LeftPanelWidget extends SidePanel {
             this._lastSelectedNodeId = nodeId;
         }
         (_b = (_a = this._model) === null || _a === void 0 ? void 0 : _a.jGISModel) === null || _b === void 0 ? void 0 : _b.syncSelected(selection, this.id);
+        this._commands.notifyCommandChanged(CommandIDs.temporalController);
     }
 }

package/lib/panelview/model.js

@@ -8,23 +8,23 @@ export class ControlPanelModel {
     }
     get filePath() {
         var _a;
-        return (_a = this._tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.localPath;
+        return (_a = this._tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model.filePath;
     }
     get jGISModel() {
         var _a;
-        return (_a = this._tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model;
+        return (_a = this._tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
     }
     get sharedModel() {
         var _a;
-        return (_a = this._tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model.sharedModel;
+        return (_a = this._tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model.sharedModel;
     }
     disconnect(f) {
         this._tracker.forEach(w => {
-            w.context.model.sharedLayersChanged.disconnect(f);
-            w.context.model.sharedSourcesChanged.disconnect(f);
-            w.context.model.sharedOptionsChanged.disconnect(f);
+            w.model.sharedLayersChanged.disconnect(f);
+            w.model.sharedSourcesChanged.disconnect(f);
+            w.model.sharedOptionsChanged.disconnect(f);
         });
-        this._tracker.forEach(w => w.context.model.themeChanged.disconnect(f));
-        this._tracker.forEach(w => w.context.model.clientStateChanged.disconnect(f));
+        this._tracker.forEach(w => w.model.themeChanged.disconnect(f));
+        this._tracker.forEach(w => w.model.clientStateChanged.disconnect(f));
     }
 }

package/lib/panelview/objectproperties.js

@@ -45,7 +45,7 @@ class ObjectPropertiesReact extends React.Component {
             }
         };
         this.state = {
-            context: (_a = props.tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context,
+            model: (_a = props.tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model,
             clientId: null,
             id: uuid()
         };
@@ -55,14 +55,14 @@ class ObjectPropertiesReact extends React.Component {
             if (changed) {
                 this.props.cpModel.disconnect(this._sharedJGISModelChanged);
                 this.props.cpModel.disconnect(this._onClientSharedStateChanged);
-                changed.context.model.sharedLayersChanged.connect(this._sharedJGISModelChanged);
-                changed.context.model.sharedSourcesChanged.connect(this._sharedJGISModelChanged);
-                changed.context.model.clientStateChanged.connect(this._onClientSharedStateChanged);
-                this.setState(old => (Object.assign(Object.assign({}, old), { context: changed.context, filePath: changed.context.localPath, clientId: changed.context.model.getClientId() })));
+                changed.model.sharedLayersChanged.connect(this._sharedJGISModelChanged);
+                changed.model.sharedSourcesChanged.connect(this._sharedJGISModelChanged);
+                changed.model.clientStateChanged.connect(this._onClientSharedStateChanged);
+                this.setState(old => (Object.assign(Object.assign({}, old), { model: changed.model, filePath: changed.model.filePath, clientId: changed.model.getClientId() })));
             }
             else {
                 this.setState({
-                    context: undefined,
+                    model: undefined,
                     selectedObject: undefined
                 });
             }
@@ -71,22 +71,22 @@ class ObjectPropertiesReact extends React.Component {
     render() {
         var _a;
         const selectedObject = this.state.selectedObject;
-        if (!selectedObject || !this.state.context) {
+        if (!selectedObject || !this.state.model) {
             return React.createElement("div", null);
         }
         let layerId = undefined;
         let sourceId = undefined;
-        const layer = this.state.context.model.getLayer(selectedObject);
+        const layer = this.state.model.getLayer(selectedObject);
         if (layer) {
             layerId = selectedObject;
             sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
         }
         else {
-            const source = this.state.context.model.getSource(selectedObject);
+            const source = this.state.model.getSource(selectedObject);
             if (source) {
                 sourceId = selectedObject;
             }
         }
-        return (React.createElement(EditForm, { layer: layerId, source: sourceId, formSchemaRegistry: this.props.formSchemaRegistry, context: this.state.context }));
+        return (React.createElement(EditForm, { layer: layerId, source: sourceId, formSchemaRegistry: this.props.formSchemaRegistry, model: this.state.model }));
     }
 }

package/lib/panelview/rightpanel.d.ts

@@ -4,7 +4,7 @@ import { IControlPanelModel } from '../types';
 export declare class RightPanelWidget extends SidePanel {
     constructor(options: RightPanelWidget.IOptions);
     dispose(): void;
-    private _currentContext;
+    private _currentModel;
     private _model;
     private _annotationModel;
 }

package/lib/panelview/rightpanel.js

@@ -31,12 +31,12 @@ export class RightPanelWidget extends SidePanel {
         this.addWidget(identifyPanel);
         this._model.documentChanged.connect((_, changed) => {
             if (changed) {
-                if (changed.context.model.sharedModel.editable) {
-                    header.title.label = changed.context.localPath;
+                if (changed.model.sharedModel.editable) {
+                    header.title.label = changed.model.filePath;
                     properties.show();
                 }
                 else {
-                    header.title.label = `${changed.context.localPath} - Read Only`;
+                    header.title.label = `${changed.model.filePath} - Read Only`;
                     properties.hide();
                 }
             }
@@ -47,16 +47,16 @@ export class RightPanelWidget extends SidePanel {
         options.tracker.currentChanged.connect(async (_, changed) => {
             var _a;
             if (changed) {
-                this._currentContext = changed.context;
-                header.title.label = this._currentContext.localPath;
-                this._annotationModel.context =
-                    ((_a = options.tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context) || undefined;
-                await changed.context.ready;
+                this._currentModel = changed.model;
+                header.title.label = this._currentModel.filePath;
+                this._annotationModel.model =
+                    ((_a = options.tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model) || undefined;
+                // await changed.context.ready;
             }
             else {
                 header.title.label = '-';
-                this._currentContext = null;
-                this._annotationModel.context = undefined;
+                this._currentModel = null;
+                this._annotationModel.model = undefined;
             }
         });
     }

package/lib/statusbar/StatusBar.d.ts

@@ -0,0 +1,13 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IStatusBarProps {
+    jgisModel: IJupyterGISModel;
+    loading?: boolean;
+    projection?: {
+        code: string;
+        units: string;
+    };
+    scale: number;
+}
+declare const StatusBar: ({ jgisModel, loading, projection, scale }: IStatusBarProps) => React.JSX.Element;
+export default StatusBar;

package/lib/statusbar/StatusBar.js

@@ -0,0 +1,52 @@
+import { faGlobe, faLocationDot, faRuler } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Progress } from '@jupyter/react-components';
+import React, { useEffect, useState } from 'react';
+import { version } from '../../package.json'; // Adjust the path as necessary
+const StatusBar = ({ jgisModel, loading, projection, scale }) => {
+    var _a;
+    const [coords, setCoords] = useState({ x: 0, y: 0 });
+    useEffect(() => {
+        const handleClientStateChanged = () => {
+            var _a, _b;
+            const pointer = (_b = (_a = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.localState) === null || _a === void 0 ? void 0 : _a.pointer) === null || _b === void 0 ? void 0 : _b.value;
+            if (!pointer) {
+                return;
+            }
+            setCoords({ x: pointer === null || pointer === void 0 ? void 0 : pointer.coordinates.x, y: pointer === null || pointer === void 0 ? void 0 : pointer.coordinates.y });
+        };
+        jgisModel.clientStateChanged.connect(handleClientStateChanged);
+        return () => {
+            jgisModel.clientStateChanged.disconnect(handleClientStateChanged);
+        };
+    }, [jgisModel]);
+    return (React.createElement("div", { className: "jgis-status-bar" },
+        loading && (React.createElement("div", { style: { width: '16%', padding: '0 6px' } },
+            React.createElement(Progress, { height: 14 }))),
+        React.createElement("div", { className: "jgis-status-bar-item" },
+            React.createElement("span", null,
+                "jgis: ",
+                version)),
+        React.createElement("div", { className: "jgis-status-bar-item jgis-status-bar-coords" },
+            React.createElement(FontAwesomeIcon, { icon: faLocationDot }),
+            React.createElement("span", null,
+                ' ',
+                "x: ",
+                Math.trunc(coords.x),
+                " y: ",
+                Math.trunc(coords.y))),
+        React.createElement("div", { className: "jgis-status-bar-item" },
+            React.createElement(FontAwesomeIcon, { icon: faRuler }),
+            ' ',
+            React.createElement("span", null,
+                "Scale: 1: ",
+                Math.trunc(scale))),
+        React.createElement("div", { className: "jgis-status-bar-item" },
+            React.createElement(FontAwesomeIcon, { icon: faGlobe }),
+            ' ',
+            React.createElement("span", null, (_a = projection === null || projection === void 0 ? void 0 : projection.code) !== null && _a !== void 0 ? _a : null)),
+        React.createElement("div", { className: "jgis-status-bar-item" },
+            "Units: ", projection === null || projection === void 0 ? void 0 :
+            projection.units)));
+};
+export default StatusBar;

package/lib/toolbar/widget.d.ts

@@ -1,5 +1,5 @@
 import { IJGISExternalCommand, JupyterGISModel } from '@jupytergis/schema';
-import { Toolbar, ReactiveToolbar } from '@jupyterlab/ui-components';
+import { ReactiveToolbar, Toolbar } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Widget } from '@lumino/widgets';
 export declare const TOOLBAR_SEPARATOR_CLASS = "jGIS-Toolbar-Separator";

package/lib/toolbar/widget.js

@@ -1,8 +1,9 @@
 import { CommandToolbarButton } from '@jupyterlab/apputils';
-import { ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, redoIcon, undoIcon, terminalIcon } from '@jupyterlab/ui-components';
+import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, redoIcon, terminalIcon, 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 { UsersItem } from './usertoolbaritem';
 export const TOOLBAR_SEPARATOR_CLASS = 'jGIS-Toolbar-Separator';
 export const TOOLBAR_GROUPNAME_CLASS = 'jGIS-Toolbar-GroupName';
@@ -55,57 +56,63 @@ export class ToolbarWidget extends ReactiveToolbar {
                 label: '',
                 commands: options.commands
             }));
-            const NewButton = new ToolbarButton({
+            // 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
+            });
+            const NewSubMenu = new MenuSvg({ commands: options.commands });
+            NewSubMenu.title.label = 'Add Layer';
+            NewSubMenu.addItem({ type: 'submenu', submenu: rasterSubMenu });
+            NewSubMenu.addItem({ type: 'submenu', submenu: vectorSubMenu });
+            const NewEntryButton = new ToolbarButton({
                 icon: addIcon,
                 noFocusOnClick: false,
                 onClick: () => {
                     if (!options.commands) {
                         return;
                     }
-                    const bbox = NewButton.node.getBoundingClientRect();
-                    const NewSubMenu = new Menu({ commands: options.commands });
-                    NewSubMenu.title.label = 'New Layer';
-                    NewSubMenu.addItem({
-                        type: 'command',
-                        command: CommandIDs.newHillshadeEntry
-                    });
-                    NewSubMenu.addItem({
-                        type: 'separator'
-                    });
-                    NewSubMenu.addItem({
-                        type: 'command',
-                        command: CommandIDs.newImageEntry
-                    });
-                    NewSubMenu.addItem({
-                        type: 'separator'
-                    });
-                    NewSubMenu.addItem({
-                        type: 'command',
-                        command: CommandIDs.newShapefileLayer
-                    });
-                    NewSubMenu.addItem({
-                        type: 'command',
-                        command: CommandIDs.newGeoTiffEntry
-                    });
-                    NewSubMenu.addItem({
-                        type: 'command',
-                        command: CommandIDs.newGeoJSONEntry
-                    });
+                    const bbox = NewEntryButton.node.getBoundingClientRect();
                     NewSubMenu.open(bbox.x, bbox.bottom);
                 }
             });
-            this.addItem('New', NewButton);
+            this.addItem('New', NewEntryButton);
             this.addItem('separator2', new Separator());
             this.addItem('identify', new CommandToolbarButton({
                 id: CommandIDs.identify,
                 label: '',
                 commands: options.commands
             }));
-            options.commands.addKeyBinding({
-                command: CommandIDs.identify,
-                keys: ['Escape'],
-                selector: '#main'
-            });
+            this.addItem('temporalController', new CommandToolbarButton({
+                id: CommandIDs.temporalController,
+                label: '',
+                commands: options.commands
+            }));
             this.addItem('spacer', ReactiveToolbar.createSpacerItem());
             // Users
             this.addItem('users', ReactWidget.create(React.createElement(UsersItem, { model: options.model })));