@jupytergis/base 0.1.1

package/lib/panelview/model.js

@@ -0,0 +1,30 @@
+export class ControlPanelModel {
+    constructor(options) {
+        this._tracker = options.tracker;
+        this._documentChanged = this._tracker.currentChanged;
+    }
+    get documentChanged() {
+        return this._documentChanged;
+    }
+    get filePath() {
+        var _a;
+        return (_a = this._tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.localPath;
+    }
+    get jGISModel() {
+        var _a;
+        return (_a = this._tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model;
+    }
+    get sharedModel() {
+        var _a;
+        return (_a = this._tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.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);
+        });
+        this._tracker.forEach(w => w.context.model.themeChanged.disconnect(f));
+        this._tracker.forEach(w => w.context.model.clientStateChanged.disconnect(f));
+    }
+}

package/lib/panelview/objectproperties.d.ts

@@ -0,0 +1,17 @@
+import { IJGISFormSchemaRegistry, IJupyterGISTracker } from '@jupytergis/schema';
+import { PanelWithToolbar } from '@jupyterlab/ui-components';
+import { Panel } from '@lumino/widgets';
+import { IControlPanelModel } from '../types';
+export declare class ObjectProperties extends PanelWithToolbar {
+    constructor(params: ObjectProperties.IOptions);
+}
+export declare namespace ObjectProperties {
+    /**
+     * Instantiation options for `ObjectProperties`.
+     */
+    interface IOptions extends Panel.IOptions {
+        controlPanelModel: IControlPanelModel;
+        formSchemaRegistry: IJGISFormSchemaRegistry;
+        tracker: IJupyterGISTracker;
+    }
+}

package/lib/panelview/objectproperties.js

@@ -0,0 +1,92 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+import { PanelWithToolbar } from '@jupyterlab/ui-components';
+import * as React from 'react';
+import { v4 as uuid } from 'uuid';
+import { EditForm } from '../formbuilder/editform';
+export class ObjectProperties extends PanelWithToolbar {
+    constructor(params) {
+        super(params);
+        this.title.label = 'Objects Properties';
+        const body = ReactWidget.create(React.createElement(ObjectPropertiesReact, { cpModel: params.controlPanelModel, tracker: params.tracker, formSchemaRegistry: params.formSchemaRegistry }));
+        this.addWidget(body);
+        this.addClass('jGIS-sidebar-propertiespanel');
+    }
+}
+class ObjectPropertiesReact extends React.Component {
+    constructor(props) {
+        var _a, _b, _c;
+        super(props);
+        this._sharedJGISModelChanged = () => {
+            this.forceUpdate();
+        };
+        this._onClientSharedStateChanged = (sender, clients) => {
+            var _a, _b;
+            let newState;
+            const clientId = this.state.clientId;
+            const localState = clientId ? clients.get(clientId) : null;
+            if (localState &&
+                ((_a = localState.selected) === null || _a === void 0 ? void 0 : _a.emitter) &&
+                localState.selected.emitter !== this.state.id &&
+                ((_b = localState.selected) === null || _b === void 0 ? void 0 : _b.value)) {
+                newState = localState;
+            }
+            if (newState) {
+                const selection = newState.selected.value;
+                const selectedObjectIds = Object.keys(selection || {});
+                // Only show object properties if ONE object is selected
+                if (selection === undefined || selectedObjectIds.length !== 1) {
+                    this.setState(old => (Object.assign(Object.assign({}, old), { selectedObject: undefined })));
+                    return;
+                }
+                const selectedObject = selectedObjectIds[0];
+                if (selectedObject !== this.state.selectedObject) {
+                    this.setState(old => (Object.assign(Object.assign({}, old), { selectedObject })));
+                }
+            }
+        };
+        this.state = {
+            context: (_a = props.tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context,
+            clientId: null,
+            id: uuid()
+        };
+        (_b = this.props.cpModel.jGISModel) === null || _b === void 0 ? void 0 : _b.sharedLayersChanged.connect(this._sharedJGISModelChanged);
+        (_c = this.props.cpModel.jGISModel) === null || _c === void 0 ? void 0 : _c.sharedSourcesChanged.connect(this._sharedJGISModelChanged);
+        this.props.cpModel.documentChanged.connect((_, changed) => {
+            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() })));
+            }
+            else {
+                this.setState({
+                    context: undefined,
+                    selectedObject: undefined
+                });
+            }
+        });
+    }
+    render() {
+        var _a;
+        const selectedObject = this.state.selectedObject;
+        if (!selectedObject || !this.state.context) {
+            return React.createElement("div", null);
+        }
+        let layerId = undefined;
+        let sourceId = undefined;
+        const layer = this.state.context.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);
+            if (source) {
+                sourceId = selectedObject;
+            }
+        }
+        return (React.createElement(EditForm, { layer: layerId, source: sourceId, formSchemaRegistry: this.props.formSchemaRegistry, context: this.state.context }));
+    }
+}

package/lib/panelview/rightpanel.d.ts

@@ -0,0 +1,19 @@
+import { IJGISFormSchemaRegistry, IJupyterGISTracker, JupyterGISDoc } from '@jupytergis/schema';
+import { SidePanel } from '@jupyterlab/ui-components';
+import { IControlPanelModel } from '../types';
+export declare class RightPanelWidget extends SidePanel {
+    constructor(options: RightPanelWidget.IOptions);
+    dispose(): void;
+    private _model;
+}
+export declare namespace RightPanelWidget {
+    interface IOptions {
+        model: IControlPanelModel;
+        tracker: IJupyterGISTracker;
+        formSchemaRegistry: IJGISFormSchemaRegistry;
+    }
+    interface IProps {
+        filePath?: string;
+        sharedModel?: JupyterGISDoc;
+    }
+}

package/lib/panelview/rightpanel.js

@@ -0,0 +1,45 @@
+import { SidePanel } from '@jupyterlab/ui-components';
+import { FilterPanel } from './components/filter-panel/Filter';
+import { ControlPanelHeader } from './header';
+import { ObjectProperties } from './objectproperties';
+export class RightPanelWidget extends SidePanel {
+    constructor(options) {
+        super();
+        this.addClass('jGIS-sidepanel-widget');
+        this._model = options.model;
+        const header = new ControlPanelHeader();
+        this.header.addWidget(header);
+        const properties = new ObjectProperties({
+            controlPanelModel: this._model,
+            formSchemaRegistry: options.formSchemaRegistry,
+            tracker: options.tracker
+        });
+        this.addWidget(properties);
+        const filterPanel = new FilterPanel({
+            model: this._model,
+            tracker: options.tracker,
+            formSchemaRegistry: options.formSchemaRegistry
+        });
+        filterPanel.title.caption = 'Filters';
+        filterPanel.title.label = 'Filters';
+        this.addWidget(filterPanel);
+        this._model.documentChanged.connect((_, changed) => {
+            if (changed) {
+                if (changed.context.model.sharedModel.editable) {
+                    header.title.label = changed.context.localPath;
+                    properties.show();
+                }
+                else {
+                    header.title.label = `${changed.context.localPath} - Read Only`;
+                    properties.hide();
+                }
+            }
+            else {
+                header.title.label = '-';
+            }
+        });
+    }
+    dispose() {
+        super.dispose();
+    }
+}

package/lib/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usertoolbaritem';
+export * from './widget';

package/lib/toolbar/index.js

@@ -0,0 +1,2 @@
+export * from './usertoolbaritem';
+export * from './widget';

package/lib/toolbar/usertoolbaritem.d.ts

@@ -0,0 +1,19 @@
+import { IUserData, JupyterGISModel } from '@jupytergis/schema';
+import * as React from 'react';
+interface IProps {
+    model: JupyterGISModel;
+}
+interface IState {
+    usersList: IUserData[];
+    selectedUser?: IUserData;
+}
+export declare class UsersItem extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    componentDidMount(): void;
+    selectUser: (user: IUserData) => void;
+    private createUserIcon;
+    private filterDuplicated;
+    render(): React.ReactNode;
+    private _model;
+}
+export {};

package/lib/toolbar/usertoolbaritem.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+export class UsersItem extends React.Component {
+    constructor(props) {
+        super(props);
+        this.selectUser = (user) => {
+            var _a;
+            let selected = undefined;
+            if (user.userId !== ((_a = this.state.selectedUser) === null || _a === void 0 ? void 0 : _a.userId)) {
+                selected = user;
+            }
+            this.setState(old => (Object.assign(Object.assign({}, old), { selectedUser: selected })), () => {
+                this._model.setUserToFollow(selected === null || selected === void 0 ? void 0 : selected.userId);
+            });
+        };
+        this._model = props.model;
+        this.state = { usersList: [] };
+    }
+    componentDidMount() {
+        this.setState(old => (Object.assign(Object.assign({}, old), { usersList: this._model.users })));
+        this._model.userChanged.connect((_, usersList) => {
+            this.setState(old => (Object.assign(Object.assign({}, old), { usersList: usersList })));
+        });
+    }
+    createUserIcon(options) {
+        var _a;
+        let el;
+        const { userId, userData } = options;
+        const selected = `${userId === ((_a = this.state.selectedUser) === null || _a === void 0 ? void 0 : _a.userId) ? 'selected' : ''}`;
+        if (userData.avatar_url) {
+            el = (React.createElement("div", { key: userId, title: userData.display_name, className: `lm-MenuBar-itemIcon jp-MenuBar-imageIcon ${selected}`, onClick: () => this.selectUser(options) },
+                React.createElement("img", { src: userData.avatar_url, alt: "" })));
+        }
+        else {
+            el = (React.createElement("div", { key: userId, title: userData.display_name, className: `lm-MenuBar-itemIcon jp-MenuBar-anonymousIcon ${selected}`, style: { backgroundColor: userData.color }, onClick: () => this.selectUser(options) },
+                React.createElement("span", null, userData.initials)));
+        }
+        return el;
+    }
+    filterDuplicated(usersList) {
+        const newList = [];
+        const selected = new Set();
+        for (const element of usersList) {
+            if (!selected.has(element.userData.username)) {
+                selected.add(element.userData.username);
+                newList.push(element);
+            }
+        }
+        return newList;
+    }
+    render() {
+        return (React.createElement("div", { className: "jGIS-toolbar-usertoolbar" }, this.filterDuplicated(this.state.usersList).map(item => {
+            if (item.userId !== this._model.currentUserId) {
+                return this.createUserIcon(item);
+            }
+        })));
+    }
+}

package/lib/toolbar/widget.d.ts

@@ -0,0 +1,22 @@
+import { IJGISExternalCommand, JupyterGISModel } from '@jupytergis/schema';
+import { Toolbar } from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import { Widget } from '@lumino/widgets';
+export declare const TOOLBAR_SEPARATOR_CLASS = "jGIS-Toolbar-Separator";
+export declare const TOOLBAR_GROUPNAME_CLASS = "jGIS-Toolbar-GroupName";
+export declare class Separator extends Widget {
+    /**
+     * Construct a new separator widget.
+     */
+    constructor();
+}
+export declare class ToolbarWidget extends Toolbar {
+    constructor(options: ToolbarWidget.IOptions);
+}
+export declare namespace ToolbarWidget {
+    interface IOptions extends Toolbar.IOptions {
+        commands?: CommandRegistry;
+        model: JupyterGISModel;
+        externalCommands: IJGISExternalCommand[];
+    }
+}

package/lib/toolbar/widget.js

@@ -0,0 +1,104 @@
+import { CommandToolbarButton } from '@jupyterlab/apputils';
+import { ReactWidget, Toolbar, ToolbarButton, addIcon, redoIcon, undoIcon, terminalIcon } from '@jupyterlab/ui-components';
+import { Menu, Widget } from '@lumino/widgets';
+import * as React from 'react';
+import { CommandIDs } from '../constants';
+import { UsersItem } from './usertoolbaritem';
+export const TOOLBAR_SEPARATOR_CLASS = 'jGIS-Toolbar-Separator';
+export const TOOLBAR_GROUPNAME_CLASS = 'jGIS-Toolbar-GroupName';
+export class Separator extends Widget {
+    /**
+     * Construct a new separator widget.
+     */
+    constructor() {
+        super();
+        this.addClass(TOOLBAR_SEPARATOR_CLASS);
+    }
+}
+export class ToolbarWidget extends Toolbar {
+    constructor(options) {
+        super(options);
+        this.addClass('jGIS-toolbar-widget');
+        if (options.commands) {
+            this.addItem('undo', new CommandToolbarButton({
+                id: CommandIDs.undo,
+                label: '',
+                icon: undoIcon,
+                commands: options.commands
+            }));
+            this.addItem('redo', new CommandToolbarButton({
+                id: CommandIDs.redo,
+                label: '',
+                icon: redoIcon,
+                commands: options.commands
+            }));
+            this.addItem('separator0', new Separator());
+            this.addItem('Toggle console', new CommandToolbarButton({
+                id: CommandIDs.toggleConsole,
+                commands: options.commands,
+                label: '',
+                icon: terminalIcon
+            }));
+            this.addItem('separator1', new Separator());
+            this.addItem('openLayerBrowser', 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
+            }));
+            this.addItem('separator2', new Separator());
+            const NewButton = new ToolbarButton({
+                icon: addIcon,
+                actualOnClick: true,
+                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
+                    });
+                    NewSubMenu.open(bbox.x, bbox.bottom);
+                }
+            });
+            this.addItem('New', NewButton);
+            this.addItem('spacer', Toolbar.createSpacerItem());
+            // Users
+            this.addItem('users', ReactWidget.create(React.createElement(UsersItem, { model: options.model })));
+        }
+    }
+}

package/lib/tools.d.ts

@@ -0,0 +1,25 @@
+import { VectorTile } from '@mapbox/vector-tile';
+import { IDict, IJGISLayerBrowserRegistry, IJGISOptions } from '@jupytergis/schema';
+export declare const debounce: (func: CallableFunction, timeout?: number) => CallableFunction;
+export declare function throttle<T extends (...args: any[]) => void>(callback: T, delay?: number): T;
+export declare function getElementFromProperty(filePath?: string | null, prop?: string | null): HTMLElement | undefined | null;
+export declare function nearest(n: number, tol: number): number;
+export declare function getCSSVariableColor(name: string): string;
+/**
+ * Call the API extension
+ *
+ * @param endPoint API REST end point for the extension
+ * @param init Initial values for the request
+ * @returns The response body interpreted as JSON
+ */
+export declare function requestAPI<T>(endPoint?: string, init?: RequestInit): Promise<T>;
+export declare function isLightTheme(): boolean;
+export declare function deepCopy<T = IDict<any>>(value: T): T;
+/**
+ * Create a default layer registry
+ *
+ * @param layerBrowserRegistry Registry to add layers to
+ */
+export declare function createDefaultLayerRegistry(layerBrowserRegistry: IJGISLayerBrowserRegistry): void;
+export declare function getLayerTileInfo(tileUrl: string, mapOptions: Pick<IJGISOptions, 'latitude' | 'longitude' | 'extent' | 'zoom'>, urlParameters?: IDict<string>): Promise<VectorTile>;
+export declare function getSourceLayerNames(tileUrl: string, urlParameters?: IDict<string>): Promise<string[]>;

package/lib/tools.js

@@ -0,0 +1,215 @@
+import Protobuf from 'pbf';
+import { VectorTile } from '@mapbox/vector-tile';
+import { URLExt } from '@jupyterlab/coreutils';
+import { ServerConnection } from '@jupyterlab/services';
+import * as d3Color from 'd3-color';
+import RASTER_LAYER_GALLERY from '../rasterlayer_gallery/raster_layer_gallery.json';
+export const debounce = (func, timeout = 100) => {
+    let timeoutId;
+    return (...args) => {
+        clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            func(...args);
+        }, timeout);
+    };
+};
+export function throttle(callback, delay = 100) {
+    let last;
+    let timer;
+    return function (...args) {
+        const now = +new Date();
+        if (last && now < last + delay) {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                last = now;
+                callback(...args);
+            }, delay);
+        }
+        else {
+            last = now;
+            callback(...args);
+        }
+    };
+}
+export function getElementFromProperty(filePath, prop) {
+    if (!filePath || !prop) {
+        return;
+    }
+    const parent = document.querySelector(`[data-path="${filePath}"]`);
+    if (parent) {
+        const el = parent.querySelector(`[id$=${prop}]`);
+        return el;
+    }
+}
+export function nearest(n, tol) {
+    const round = Math.round(n);
+    if (Math.abs(round - n) < tol) {
+        return round;
+    }
+    else {
+        return n;
+    }
+}
+export function getCSSVariableColor(name) {
+    const color = window.getComputedStyle(document.body).getPropertyValue(name) || '#ffffff';
+    return d3Color.rgb(color).formatHex();
+}
+/**
+ * Call the API extension
+ *
+ * @param endPoint API REST end point for the extension
+ * @param init Initial values for the request
+ * @returns The response body interpreted as JSON
+ */
+export async function requestAPI(endPoint = '', init = {}) {
+    // Make request to Jupyter API
+    const settings = ServerConnection.makeSettings();
+    const requestUrl = URLExt.join(settings.baseUrl, endPoint);
+    let response;
+    try {
+        response = await ServerConnection.makeRequest(requestUrl, init, settings);
+    }
+    catch (error) {
+        throw new ServerConnection.NetworkError(error);
+    }
+    let data = await response.text();
+    if (data.length > 0) {
+        try {
+            data = JSON.parse(data);
+        }
+        catch (error) {
+            console.log('Not a JSON response body.', response);
+        }
+    }
+    if (!response.ok) {
+        throw new ServerConnection.ResponseError(response, data.message || data);
+    }
+    return data;
+}
+export function isLightTheme() {
+    return document.body.getAttribute('data-jp-theme-light') === 'true';
+}
+export function deepCopy(value) {
+    if (!value) {
+        return value;
+    }
+    return JSON.parse(JSON.stringify(value));
+}
+/**
+ * Create a default layer registry
+ *
+ * @param layerBrowserRegistry Registry to add layers to
+ */
+export function createDefaultLayerRegistry(layerBrowserRegistry) {
+    const RASTER_THUMBNAILS = {};
+    /**
+     * Generate object to hold thumbnail URLs
+     */
+    const importAll = (r) => {
+        r.keys().forEach(key => {
+            const imageName = key.replace('./', '').replace(/\.\w+$/, '');
+            RASTER_THUMBNAILS[imageName] = r(key);
+        });
+    };
+    const context = require.context('../rasterlayer_gallery', false, /\.(png|jpe?g|gif|svg)$/);
+    importAll(context);
+    for (const entry of Object.keys(RASTER_LAYER_GALLERY)) {
+        const xyzprovider = RASTER_LAYER_GALLERY[entry];
+        if ('url' in xyzprovider) {
+            const tile = convertToRegistryEntry(entry, xyzprovider);
+            layerBrowserRegistry.addRegistryLayer(tile);
+        }
+        else {
+            Object.keys(xyzprovider).forEach(mapName => {
+                const tile = convertToRegistryEntry(xyzprovider[mapName]['name'], xyzprovider[mapName], entry);
+                layerBrowserRegistry.addRegistryLayer(tile);
+            });
+        }
+    }
+    // TODO: These need better names
+    /**
+     * Parse tile information from providers to be useable in the layer registry
+     *
+     * @param entry - The name of the entry, which may also serve as the default provider name if none is specified.
+     * @param xyzprovider - An object containing the XYZ provider's details, including name, URL, zoom levels, attribution, and possibly other properties relevant to the provider.
+     * @param provider - Optional. Specifies the provider name. If not provided, the `entry` parameter is used as the default provider name.
+     * @returns - An object representing the registry entry
+     */
+    function convertToRegistryEntry(entry, xyzprovider, provider) {
+        const urlParameters = {};
+        if (xyzprovider.time) {
+            urlParameters.time = xyzprovider.time;
+        }
+        if (xyzprovider.variant) {
+            urlParameters.variant = xyzprovider.variant;
+        }
+        if (xyzprovider.tilematrixset) {
+            urlParameters.tilematrixset = xyzprovider.tilematrixset;
+        }
+        if (xyzprovider.format) {
+            urlParameters.format = xyzprovider.format;
+        }
+        return {
+            name: entry,
+            thumbnail: RASTER_THUMBNAILS[xyzprovider['name'].replace('.', '-')],
+            source: {
+                url: xyzprovider['url'],
+                minZoom: xyzprovider['min_zoom'] || 0,
+                maxZoom: xyzprovider['max_zoom'] || 24,
+                attribution: xyzprovider['attribution'] || '',
+                provider: provider !== null && provider !== void 0 ? provider : entry,
+                urlParameters
+            }
+        };
+    }
+}
+// Get x/y tile values from lat and lng
+// Based on https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Mathematics
+function getTileCoordinates(latDeg, lonDeg, zoom) {
+    const latRad = latDeg * (Math.PI / 180);
+    const n = 1 << zoom;
+    const xTile = Math.floor(((lonDeg + 180.0) / 360.0) * n);
+    const yTile = Math.floor((n * (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI)) / 2);
+    return { xTile, yTile };
+}
+export async function getLayerTileInfo(tileUrl, mapOptions, urlParameters) {
+    // If it's tilejson, fetch the json to access the pbf url
+    if (tileUrl.includes('.json')) {
+        const response = await fetch(tileUrl);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch json: ${response.statusText}`);
+        }
+        const json = await response.json();
+        tileUrl = json.tiles[0];
+    }
+    const latitude = mapOptions.extent
+        ? (mapOptions.extent[1] + mapOptions.extent[3]) / 2
+        : mapOptions.latitude || 0;
+    const longitude = mapOptions.extent
+        ? (mapOptions.extent[0] + mapOptions.extent[2]) / 2
+        : mapOptions.longitude || 0;
+    const zoom = mapOptions.zoom || 0;
+    const { xTile, yTile } = getTileCoordinates(latitude, longitude, zoom);
+    // Replace url params with currently viewed tile
+    tileUrl = tileUrl
+        .replace('{z}', String(Math.floor(zoom)))
+        .replace('{x}', String(xTile))
+        .replace('{y}', String(yTile));
+    if (urlParameters) {
+        for (const param of Object.keys(urlParameters)) {
+            tileUrl = tileUrl.replace(`{${param}}`, urlParameters[param]);
+        }
+    }
+    const response = await fetch(tileUrl);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch tile: ${response.statusText}`);
+    }
+    const arrayBuffer = await response.arrayBuffer();
+    const tile = new VectorTile(new Protobuf(arrayBuffer));
+    return tile;
+}
+export async function getSourceLayerNames(tileUrl, urlParameters) {
+    const tile = await getLayerTileInfo(tileUrl, { latitude: 0, longitude: 0, zoom: 0, extent: [] }, urlParameters);
+    const layerNames = Object.keys(tile.layers);
+    return layerNames;
+}

package/lib/types.d.ts

@@ -0,0 +1,11 @@
+import { IDict, IJupyterGISDoc, IJupyterGISModel, IJupyterGISTracker, IJupyterGISWidget } from '@jupytergis/schema';
+import { ISignal } from '@lumino/signaling';
+export { IDict };
+export type ValueOf<T> = T[keyof T];
+export interface IControlPanelModel {
+    disconnect(f: any): void;
+    documentChanged: ISignal<IJupyterGISTracker, IJupyterGISWidget | null>;
+    filePath: string | undefined;
+    jGISModel: IJupyterGISModel | undefined;
+    sharedModel: IJupyterGISDoc | undefined;
+}

package/lib/types.js

@@ -0,0 +1 @@
+export {};