@jupytergis/base 0.4.0 → 0.4.2

package/lib/dialogs/symbology/hooks/useGetBandInfo.d.ts

@@ -1,4 +1,4 @@
-import { IDict, IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
+import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
 export interface IBandHistogram {
     buckets: number[];
     count: number;
@@ -7,15 +7,11 @@ export interface IBandHistogram {
 }
 export interface IBandRow {
     band: number;
-    colorInterpretation: string;
+    colorInterpretation?: string;
     stats: {
         minimum: number;
         maximum: number;
-        mean: number;
-        stdDev: number;
     };
-    metadata: IDict;
-    histogram: IBandHistogram;
 }
 declare const useGetBandInfo: (model: IJupyterGISModel, layer: IJGISLayer) => {
     bandRows: IBandRow[];

package/lib/dialogs/symbology/hooks/useGetBandInfo.js

@@ -1,19 +1,11 @@
 import { useEffect, useState } from 'react';
-import { loadFile } from '../../../tools';
-const preloadGeoTiffFile = async (sourceInfo, model) => {
-    var _a;
-    return await loadFile({
-        filepath: (_a = sourceInfo.url) !== null && _a !== void 0 ? _a : '',
-        type: 'GeoTiffSource',
-        model: model
-    });
-};
+import { fromUrl } from 'geotiff';
 const useGetBandInfo = (model, layer) => {
     const [bandRows, setBandRows] = useState([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     const fetchBandInfo = async () => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         setLoading(true);
         setError(null);
         try {
@@ -25,29 +17,20 @@ const useGetBandInfo = (model, layer) => {
                 setLoading(false);
                 return;
             }
-            const preloadedFile = await preloadGeoTiffFile(sourceInfo, model);
-            const { file, metadata, sourceUrl } = Object.assign({}, preloadedFile);
-            if (file && metadata && sourceUrl === sourceInfo.url) {
-                metadata['bands'].forEach((bandData) => {
-                    var _a, _b;
-                    bandsArr.push({
-                        band: bandData.band,
-                        colorInterpretation: bandData.colorInterpretation,
-                        stats: {
-                            minimum: (_a = sourceInfo.min) !== null && _a !== void 0 ? _a : bandData.minimum,
-                            maximum: (_b = sourceInfo.max) !== null && _b !== void 0 ? _b : bandData.maximum,
-                            mean: bandData.mean,
-                            stdDev: bandData.stdDev
-                        },
-                        metadata: bandData.metadata,
-                        histogram: bandData.histogram
-                    });
+            // TODO Get band names + get band stats
+            const tiff = await fromUrl(sourceInfo.url);
+            const image = await tiff.getImage();
+            const numberOfBands = image.getSamplesPerPixel();
+            for (let i = 0; i < numberOfBands; i++) {
+                bandsArr.push({
+                    band: i,
+                    stats: {
+                        minimum: (_c = sourceInfo.min) !== null && _c !== void 0 ? _c : 0,
+                        maximum: (_d = sourceInfo.max) !== null && _d !== void 0 ? _d : 100
+                    }
                 });
-                setBandRows(bandsArr);
-            }
-            else {
-                setError('Failed to preload the file or metadata mismatch.');
             }
+            setBandRows(bandsArr);
         }
         catch (err) {
             setError(`Error fetching band info: ${err.message}`);

package/lib/dialogs/symbology/tiff_layer/components/BandRow.js

@@ -33,7 +33,9 @@ const BandRow = ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows
                 ":"),
             React.createElement("div", { className: "jp-select-wrapper" },
                 React.createElement("select", { name: `band-select-${index}`, onChange: event => setSelectedBand(+event.target.value), className: "jp-mod-styled" },
-                    bandRows.map((band, bandIndex) => (React.createElement("option", { key: bandIndex, value: band.band, selected: band.band === (bandRow === null || bandRow === void 0 ? void 0 : bandRow.band), className: "jp-mod-styled" }, `Band ${band.band} (${band.colorInterpretation})`))),
+                    bandRows.map((band, bandIndex) => (React.createElement("option", { key: bandIndex, value: band.band, selected: band.band === (bandRow === null || bandRow === void 0 ? void 0 : bandRow.band), className: "jp-mod-styled" }, band.colorInterpretation
+                        ? `Band ${band.band} (${band.colorInterpretation})`
+                        : `Band ${band.band}`))),
                     isMultibandColor ? (React.createElement("option", { key: 'unset', value: 0, selected: !bandRow, className: "jp-mod-styled" }, "Unset")) : null))),
         isMultibandColor ? null : (React.createElement("div", { className: "jp-gis-symbology-row", style: { gap: '0.5rem' } },
             React.createElement("div", { style: {

package/lib/formbuilder/objectform/geotiffsource.js

@@ -1,6 +1,5 @@
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { BaseForm } from './baseform';
-import { FileSelectorWidget } from './fileselectorwidget';
 import { getMimeType } from '../../tools';
 /**
  * The form to modify a GeoTiff source.
@@ -13,22 +12,10 @@ export class GeoTiffSourcePropertiesForm extends BaseForm {
         this._validateUrls((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.urls) !== null && _b !== void 0 ? _b : []);
     }
     processSchema(data, schema, uiSchema) {
-        var _a;
         super.processSchema(data, schema, uiSchema);
         if (!schema.properties || !data) {
             return;
         }
-        // Customize the widget for urls
-        if (schema.properties && schema.properties.urls) {
-            const docManager = (_a = this.props.formChangedSignal) === null || _a === void 0 ? void 0 : _a.sender.props.formSchemaRegistry.getDocManager();
-            uiSchema.urls = Object.assign(Object.assign({}, uiSchema.urls), { items: Object.assign(Object.assign({}, uiSchema.urls.items), { url: {
-                        'ui:widget': FileSelectorWidget,
-                        'ui:options': {
-                            docManager,
-                            formOptions: this.props
-                        }
-                    } }) });
-        }
         // This is not user-editable
         delete schema.properties.valid;
     }

package/lib/mainview/mainView.d.ts

@@ -42,7 +42,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @param id - the source id.
      * @param source - the source object.
      */
-    addSource(id: string, source: IJGISSource, layerId?: string): Promise<void>;
+    addSource(id: string, source: IJGISSource): Promise<void>;
     private computeSourceUrl;
     /**
      * Update a source in the map.

package/lib/mainview/mainView.js

@@ -479,7 +479,7 @@ export class MainView extends React.Component {
                     parameters: { path: event.file.name }
                 };
                 const layerId = UUID.uuid4();
-                this.addSource(sourceId, sourceModel, layerId);
+                this.addSource(sourceId, sourceModel);
                 this._model.sharedModel.addSource(sourceId, sourceModel);
                 const layerModel = {
                     type: 'VectorLayer',
@@ -573,8 +573,11 @@ export class MainView extends React.Component {
      * @param id - the source id.
      * @param source - the source object.
      */
-    async addSource(id, source, layerId) {
+    async addSource(id, source) {
         var _a, _b;
+        const rasterSourceCommon = {
+            interpolate: false
+        };
         let newSource;
         switch (source.type) {
             case 'RasterSource': {
@@ -582,29 +585,16 @@ export class MainView extends React.Component {
                 const pmTiles = sourceParameters.url.endsWith('.pmtiles');
                 const url = this.computeSourceUrl(source);
                 if (!pmTiles) {
-                    newSource = new XYZSource({
-                        attributions: sourceParameters.attribution,
-                        minZoom: sourceParameters.minZoom,
-                        maxZoom: sourceParameters.maxZoom,
-                        tileSize: 256,
-                        url: url
-                    });
+                    newSource = new XYZSource(Object.assign(Object.assign({}, rasterSourceCommon), { attributions: sourceParameters.attribution, minZoom: sourceParameters.minZoom, maxZoom: sourceParameters.maxZoom, tileSize: 256, url: url }));
                 }
                 else {
-                    newSource = new PMTilesRasterSource({
-                        attributions: sourceParameters.attribution,
-                        tileSize: 256,
-                        url: url
-                    });
+                    newSource = new PMTilesRasterSource(Object.assign(Object.assign({}, rasterSourceCommon), { attributions: sourceParameters.attribution, tileSize: 256, url: url }));
                 }
                 break;
             }
             case 'RasterDemSource': {
                 const sourceParameters = source.parameters;
-                newSource = new ImageTileSource({
-                    url: this.computeSourceUrl(source),
-                    attributions: sourceParameters.attribution
-                });
+                newSource = new ImageTileSource(Object.assign(Object.assign({}, rasterSourceCommon), { url: this.computeSourceUrl(source), attributions: sourceParameters.attribution }));
                 break;
             }
             case 'VectorTileSource': {
@@ -691,12 +681,7 @@ export class MainView extends React.Component {
                     type: 'ImageSource',
                     model: this._model
                 });
-                newSource = new Static({
-                    imageExtent: extent,
-                    url: imageUrl,
-                    interpolate: false,
-                    crossOrigin: ''
-                });
+                newSource = new Static(Object.assign(Object.assign({}, rasterSourceCommon), { imageExtent: extent, url: imageUrl, crossOrigin: '' }));
                 break;
             }
             case 'VideoSource': {
@@ -708,20 +693,10 @@ export class MainView extends React.Component {
                 const addNoData = (url) => {
                     return Object.assign(Object.assign({}, url), { nodata: 0 });
                 };
-                const sourcesWithBlobs = await Promise.all(sourceParameters.urls.map(async (sourceInfo) => {
-                    var _a;
-                    const geotiff = await loadFile({
-                        filepath: (_a = sourceInfo.url) !== null && _a !== void 0 ? _a : '',
-                        type: 'GeoTiffSource',
-                        model: this._model
-                    });
-                    return Object.assign(Object.assign({}, addNoData(sourceInfo)), { geotiff, url: URL.createObjectURL(geotiff.file) });
+                const sources = await Promise.all(sourceParameters.urls.map(async (sourceInfo) => {
+                    return Object.assign(Object.assign({}, addNoData(sourceInfo)), { min: sourceInfo.min, max: sourceInfo.max, url: sourceInfo.url });
                 }));
-                newSource = new GeoTIFFSource({
-                    sources: sourcesWithBlobs,
-                    normalize: sourceParameters.normalize,
-                    wrapX: sourceParameters.wrapX
-                });
+                newSource = new GeoTIFFSource(Object.assign(Object.assign({}, rasterSourceCommon), { sources, normalize: sourceParameters.normalize, wrapX: sourceParameters.wrapX }));
                 break;
             }
         }
@@ -762,7 +737,7 @@ export class MainView extends React.Component {
         // remove source being updated
         this.removeSource(id);
         // create updated source
-        await this.addSource(id, source, layerId);
+        await this.addSource(id, source);
         // change source of target layer
         mapLayer.setSource(this._sources[id]);
     }
@@ -840,7 +815,7 @@ export class MainView extends React.Component {
         this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: true })));
         this._loadingLayers.add(id);
         if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source, id);
+            await this.addSource(sourceId, source);
         }
         this._loadingLayers.add(id);
         let newMapLayer;
@@ -1004,7 +979,7 @@ export class MainView extends React.Component {
             return;
         }
         if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source, id);
+            await this.addSource(sourceId, source);
         }
         mapLayer.setVisible(layer.visible);
         switch (layer.type) {

package/lib/panelview/components/layers.js

@@ -219,10 +219,10 @@ function LayerComponent(props) {
     };
     return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_CLASS}${selected ? ' jp-mod-selected' : ''}`, draggable: true, onDragStart: Private.onDragStart, onDragOver: Private.onDragOver, onDragEnd: Private.onDragEnd, "data-id": layerId },
         React.createElement("div", { className: LAYER_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection },
+            React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
+                React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" })),
             icons.has(layer.type) && (React.createElement(LabIcon.resolveReact, Object.assign({}, icons.get(layer.type), { className: LAYER_ICON_CLASS }))),
-            React.createElement("span", { id: id, className: LAYER_TEXT_CLASS }, name)),
-        React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
-            React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" }))));
+            React.createElement("span", { id: id, className: LAYER_TEXT_CLASS }, name))));
 }
 var Private;
 (function (Private) {

package/lib/tools.d.ts

@@ -1,5 +1,4 @@
 import { VectorTile } from '@mapbox/vector-tile';
-import { Contents } from '@jupyterlab/services';
 import { IDict, IJGISLayerBrowserRegistry, IJGISOptions, IJGISSource, IJupyterGISModel } 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;
@@ -57,19 +56,6 @@ export declare const getFromIndexedDB: (key: string) => Promise<{
     file: any;
     metadata?: any | undefined;
 } | undefined>;
-/**
- * Load a GeoTIFF file from IndexedDB database cache or fetch it .
- *
- * @param sourceInfo object containing the URL of the GeoTIFF file.
- * @returns A promise that resolves to the file as a Blob, or undefined .
- */
-export declare const loadGeoTiff: (sourceInfo: {
-    url?: string | undefined;
-}, file?: Contents.IModel | null) => Promise<{
-    file: any;
-    metadata: any;
-    sourceUrl: string;
-} | null>;
 /**
  * Generalized file reader for different source types.
  *

package/lib/tools.js

@@ -6,7 +6,6 @@ import { showErrorMessage } from '@jupyterlab/apputils';
 import * as d3Color from 'd3-color';
 import shp from 'shpjs';
 import RASTER_LAYER_GALLERY from '../rasterlayer_gallery/raster_layer_gallery.json';
-import { getGdal } from './gdal';
 export const debounce = (func, timeout = 100) => {
     let timeoutId;
     return (...args) => {
@@ -301,51 +300,26 @@ export const getFromIndexedDB = async (key) => {
         request.onerror = () => reject(request.error);
     });
 };
-/**
- * Load a GeoTIFF file from IndexedDB database cache or fetch it .
- *
- * @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) => {
-    if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
-        return null;
-    }
-    const mimeType = getMimeType(sourceInfo.url);
-    if (!mimeType || !mimeType.startsWith('image/tiff')) {
-        throw new Error('Invalid file type. Expected GeoTIFF (image/tiff).');
-    }
-    const cachedData = await getFromIndexedDB(sourceInfo.url);
-    if (cachedData) {
-        return {
-            file: cachedData.file,
-            metadata: cachedData.metadata,
-            sourceUrl: sourceInfo.url
-        };
-    }
-    let fileBlob;
-    if (!file) {
-        const response = await fetch(`/jupytergis_core/proxy?url=${sourceInfo.url}`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch file. Status: ${response.status}`);
+const fetchWithProxies = async (url, parseResponse) => {
+    const proxyUrls = [
+        url, // Direct fetch
+        `/jupytergis_core/proxy?url=${encodeURIComponent(url)}`, // Internal proxy
+        `https://corsproxy.io/?url=${encodeURIComponent(url)}` // External proxy
+    ];
+    for (const proxyUrl of proxyUrls) {
+        try {
+            const response = await fetch(proxyUrl);
+            if (!response.ok) {
+                console.warn(`Failed to fetch from ${proxyUrl}: ${response.statusText}`);
+                continue;
+            }
+            return await parseResponse(response);
+        }
+        catch (error) {
+            console.warn(`Error fetching from ${proxyUrl}:`, error);
         }
-        fileBlob = await response.blob();
-    }
-    else {
-        fileBlob = await base64ToBlob(file.content, mimeType);
     }
-    const geotiff = new File([fileBlob], 'loaded.tif');
-    const Gdal = await getGdal();
-    const result = await Gdal.open(geotiff);
-    const tifDataset = result.datasets[0];
-    const metadata = await Gdal.gdalinfo(tifDataset, ['-stats']);
-    Gdal.close(tifDataset);
-    await saveToIndexedDB(sourceInfo.url, fileBlob, metadata);
-    return {
-        file: fileBlob,
-        metadata,
-        sourceUrl: sourceInfo.url
-    };
+    return null;
 };
 /**
  * Generalized file reader for different source types.
@@ -381,70 +355,29 @@ export const loadFile = async (fileInfo) => {
                 if (cached) {
                     return cached.file;
                 }
-                // First trying a direct fetch
-                try {
-                    const response = await fetch(filepath);
+                const geojson = await fetchWithProxies(filepath, async (response) => {
                     const arrayBuffer = await response.arrayBuffer();
-                    const geojson = await shp(arrayBuffer);
+                    return shp(arrayBuffer);
+                });
+                if (geojson) {
                     await saveToIndexedDB(filepath, geojson);
                     return geojson;
                 }
-                catch (error) {
-                    console.warn('Cannot load shapefile from ${filepath}: ${error}');
-                }
-                // Trying through our proxy server
-                try {
-                    const response = await fetch(`/jupytergis_core/proxy?url=${filepath}`);
-                    const arrayBuffer = await response.arrayBuffer();
-                    const geojson = await shp(arrayBuffer);
-                    await saveToIndexedDB(filepath, geojson);
-                    return geojson;
-                }
-                catch (error) {
-                    console.warn('Cannot communicate with the JupyterGIS proxy server:', error);
-                }
-                // Trying through an external proxy server
-                try {
-                    const response = await fetch(`https://corsproxy.io/?url=${filepath}`);
-                    const arrayBuffer = await response.arrayBuffer();
-                    const geojson = await shp(arrayBuffer);
-                    await saveToIndexedDB(filepath, geojson);
-                    return geojson;
-                }
-                catch (error) {
-                    console.warn('Cannot communicate with external proxy server', error);
-                }
-                showErrorMessage('Network error', 'Failed to fetch ${filepath}');
-                throw new Error('Failed to fetch ${filepath}');
+                showErrorMessage('Network error', `Failed to fetch ${filepath}`);
+                throw new Error(`Failed to fetch ${filepath}`);
             }
             case 'GeoJSONSource': {
                 const cached = await getFromIndexedDB(filepath);
                 if (cached) {
                     return cached.file;
                 }
-                try {
-                    const response = await fetch(`/jupytergis_core/proxy?url=${filepath}`);
-                    if (!response.ok) {
-                        throw new Error(`Failed to fetch GeoJSON from URL: ${filepath}`);
-                    }
-                    const geojson = await response.json();
+                const geojson = await fetchWithProxies(filepath, async (response) => response.json());
+                if (geojson) {
                     await saveToIndexedDB(filepath, geojson);
                     return geojson;
                 }
-                catch (error) {
-                    console.error('Error loading remote GeoJSON:', error);
-                    throw error;
-                }
-            }
-            case 'GeoTiffSource': {
-                try {
-                    const tiff = loadGeoTiff({ url: filepath });
-                    return tiff;
-                }
-                catch (error) {
-                    console.error('Error loading remote GeoTIFF:', error);
-                    throw error;
-                }
+                showErrorMessage('Network error', `Failed to fetch ${filepath}`);
+                throw new Error(`Failed to fetch ${filepath}`);
             }
             default: {
                 throw new Error(`Unsupported URL handling for source type: ${type}`);
@@ -493,15 +426,6 @@ export const loadFile = async (fileInfo) => {
                     throw new Error('Invalid file format for image content.');
                 }
             }
-            case 'GeoTiffSource': {
-                if (typeof file.content === 'string') {
-                    const tiff = loadGeoTiff({ url: filepath }, file);
-                    return tiff;
-                }
-                else {
-                    throw new Error('Invalid file format for tiff content.');
-                }
-            }
             default: {
                 throw new Error(`Unsupported source type: ${type}`);
             }

package/lib/widget.d.ts

@@ -1,3 +1,4 @@
+import { IJupyterGISDocumentWidget, IJupyterGISModel, IJupyterGISOutputWidget } from '@jupytergis/schema';
 import { MainAreaWidget } from '@jupyterlab/apputils';
 import { ConsolePanel, IConsoleTracker } from '@jupyterlab/console';
 import { DocumentWidget } from '@jupyterlab/docregistry';
@@ -5,11 +6,10 @@ import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
 import { JSONValue } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { SplitPanel } from '@lumino/widgets';
-import { IJupyterGISModel, IJupyterGISOutputWidget, IJupyterGISDocumentWidget } from '@jupytergis/schema';
+import { CommandRegistry } from '@lumino/commands';
+import { ConsoleView } from './console';
 import { JupyterGISMainViewPanel } from './mainview';
 import { MainViewModel } from './mainview/mainviewmodel';
-import { ConsoleView } from './console';
-import { CommandRegistry } from '@lumino/commands';
 export type JupyterGISWidget = JupyterGISDocumentWidget | JupyterGISOutputWidget;
 export declare class JupyterGISDocumentWidget extends DocumentWidget<JupyterGISPanel, IJupyterGISModel> implements IJupyterGISDocumentWidget {
     constructor(options: DocumentWidget.IOptions<JupyterGISPanel, IJupyterGISModel>);

package/lib/widget.js

@@ -14,10 +14,10 @@ import { DocumentWidget } from '@jupyterlab/docregistry';
 import { ObservableMap } from '@jupyterlab/observables';
 import { Signal } from '@lumino/signaling';
 import { SplitPanel, Widget } from '@lumino/widgets';
+import { MessageLoop } from '@lumino/messaging';
+import { ConsoleView } from './console';
 import { JupyterGISMainViewPanel } from './mainview';
 import { MainViewModel } from './mainview/mainviewmodel';
-import { ConsoleView } from './console';
-import { MessageLoop } from '@lumino/messaging';
 const CELL_OUTPUT_WIDGET_CLASS = 'jgis-cell-output-widget';
 export class JupyterGISDocumentWidget extends DocumentWidget {
     constructor(options) {
@@ -71,7 +71,7 @@ export class JupyterGISPanel extends SplitPanel {
         const { model, consoleTracker, commandRegistry } = options, consoleOption = __rest(options, ["model", "consoleTracker", "commandRegistry"]);
         this._initModel({ model, commandRegistry });
         this._initView();
-        this._consoleOption = consoleOption;
+        this._consoleOption = Object.assign({ commandRegistry }, consoleOption);
         this._consoleTracker = consoleTracker;
     }
     _initModel(options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "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.0",
+    "@jupytergis/schema": "^0.4.2",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",

package/style/leftPanel.css

@@ -75,7 +75,6 @@
 
 .jp-gis-layer button,
 .jp-gis-source button {
-  margin-left: auto;
   min-height: unset;
   min-width: unset;
   padding: unset;