@jupytergis/base 0.5.0 → 0.6.0

package/lib/mainview/mainView.js

@@ -1,66 +1,78 @@
-import { JupyterGISModel } from '@jupytergis/schema';
+import { JupyterGISModel, } from '@jupytergis/schema';
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
 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 { FullScreen, ScaleLine } from 'ol/control';
 import { singleClick } from 'ol/events/condition';
 import { GeoJSON, MVT } from 'ol/format';
+import { Point } from 'ol/geom';
 import { DragAndDrop, Select } from 'ol/interaction';
-import { Heatmap as HeatmapLayer, Image as ImageLayer, Vector as VectorLayer, VectorTile as VectorTileLayer, WebGLTile as WebGlTileLayer } from 'ol/layer';
+import { Heatmap as HeatmapLayer, Image as ImageLayer, Layer, Vector as VectorLayer, VectorTile as VectorTileLayer, WebGLTile as WebGlTileLayer, } from 'ol/layer';
 import TileLayer from 'ol/layer/Tile';
-import { fromLonLat, get as getRegisteredProjection, toLonLat, transformExtent } from 'ol/proj';
-import { get as getProjection } from 'ol/proj.js';
+import { fromLonLat, get as getProjection, toLonLat, transformExtent, } from 'ol/proj';
 import { register } from 'ol/proj/proj4.js';
 import RenderFeature from 'ol/render/Feature';
-import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource } from 'ol/source';
+import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
 import TileSource from 'ol/source/Tile';
 import { Circle, Fill, Stroke, Style } from 'ol/style';
+//@ts-expect-error no types for ol-pmtiles
+import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
+import StacLayer from 'ol-stac';
 import proj4 from 'proj4';
 import proj4list from 'proj4-list';
 import * as React from 'react';
-import AnnotationFloater from '../annotations/components/AnnotationFloater';
-import { CommandIDs } from '../constants';
-import StatusBar from '../statusbar/StatusBar';
-import { isLightTheme, loadFile, throttle } from '../tools';
+import AnnotationFloater from "../annotations/components/AnnotationFloater";
+import { CommandIDs } from "../constants";
+import { LoadingOverlay } from "../shared/components/loading";
+import StatusBar from "../statusbar/StatusBar";
+import { debounce, isLightTheme, loadFile, throttle } from "../tools";
 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);
+        this.updateCenter = () => {
+            const extentIn4326 = this.getViewBbox();
+            this._model.updateBboxSignal.emit(extentIn4326);
+        };
+        this.getViewBbox = (targetProjection = 'EPSG:4326') => {
+            const view = this._Map.getView();
+            const extent = view.calculateExtent(this._Map.getSize());
+            if (view.getProjection().getCode() === targetProjection) {
+                return extent;
+            }
+            return transformExtent(extent, view.getProjection(), targetProjection);
+        };
         this.createSelectInteraction = () => {
             const pointStyle = new Style({
                 image: new Circle({
                     radius: 5,
                     fill: new Fill({
-                        color: '#C52707'
+                        color: '#C52707',
                     }),
                     stroke: new Stroke({
                         color: '#171717',
-                        width: 2
-                    })
-                })
+                        width: 2,
+                    }),
+                }),
             });
             const lineStyle = new Style({
                 stroke: new Stroke({
                     color: '#171717',
-                    width: 2
-                })
+                    width: 2,
+                }),
             });
             const polygonStyle = new Style({
                 fill: new Fill({ color: '#C5270780' }),
                 stroke: new Stroke({
                     color: '#171717',
-                    width: 2
-                })
+                    width: 2,
+                }),
             });
             const styleFunction = (feature) => {
                 var _a;
@@ -93,7 +105,7 @@ export class MainView extends React.Component {
                 condition: (event) => {
                     return singleClick(event) && this._model.isIdentifying;
                 },
-                style: styleFunction
+                style: styleFunction,
             });
             selectInteraction.on('select', event => {
                 const identifiedFeatures = [];
@@ -112,23 +124,26 @@ export class MainView extends React.Component {
                         return;
                     }
                     this._mainViewModel.addAnnotation({
-                        position: { x: this._clickCoords[0], y: this._clickCoords[1] },
+                        position: {
+                            x: this._clickCoords[0],
+                            y: this._clickCoords[1],
+                        },
                         zoom: (_a = this._Map.getView().getZoom()) !== null && _a !== void 0 ? _a : 0,
                         label: 'New annotation',
                         contents: [],
                         parent: this._Map.getViewport().id,
-                        open: true
+                        open: true,
                     });
                 },
                 label: 'Add annotation',
                 isEnabled: () => {
                     return !!this._Map;
-                }
+                },
             });
             this._contextMenu.addItem({
                 command: CommandIDs.addAnnotation,
                 selector: '.ol-viewport',
-                rank: 1
+                rank: 1,
             });
         };
         this.vectorLayerStyleRuleBuilder = (layer) => {
@@ -144,10 +159,10 @@ export class MainView extends React.Component {
                 'circle-radius': 5,
                 'circle-fill-color': 'rgba(255,255,255,0.4)',
                 'circle-stroke-width': 1.25,
-                'circle-stroke-color': '#3399CC'
+                'circle-stroke-color': '#3399CC',
             };
             const defaultRules = {
-                style: defaultStyle
+                style: defaultStyle,
             };
             const layerStyle = Object.assign({}, defaultRules);
             if (((_a = layer.filters) === null || _a === void 0 ? void 0 : _a.logicalOp) && ((_b = layer.filters.appliedFilters) === null || _b === void 0 ? void 0 : _b.length) > 0) {
@@ -167,7 +182,7 @@ export class MainView extends React.Component {
                     // Arguments for "Any" and 'All' need to be wrapped in brackets
                     filterExpr = [
                         layer.filters.logicalOp,
-                        ...layer.filters.appliedFilters.map(buildCondition)
+                        ...layer.filters.appliedFilters.map(buildCondition),
                     ];
                 }
                 layerStyle.filter = filterExpr;
@@ -202,7 +217,7 @@ export class MainView extends React.Component {
                     ['*', 255 * 256, red],
                     ['*', 255, green],
                     ['*', 255 / 256, blue],
-                    -32768
+                    -32768,
                 ];
             }
             // Generates a shaded relief image given elevation data.  Uses a 3x3
@@ -221,7 +236,7 @@ export class MainView extends React.Component {
             const cosIncidence = [
                 '+',
                 ['*', ['sin', sunEl], ['cos', slope]],
-                ['*', ['cos', sunEl], ['sin', slope], ['cos', ['-', sunAz, aspect]]]
+                ['*', ['cos', sunEl], ['sin', slope], ['cos', ['-', sunAz, aspect]]],
             ];
             const scaled = ['*', 255, cosIncidence];
             return scaled;
@@ -319,7 +334,7 @@ export class MainView extends React.Component {
                 if (pointer) {
                     const pixel = this._Map.getPixelFromCoordinate([
                         pointer.coordinates.x,
-                        pointer.coordinates.y
+                        pointer.coordinates.y,
                     ]);
                     const lonLat = toLonLat([pointer.coordinates.x, pointer.coordinates.y]);
                     if (!currentClientPointer) {
@@ -327,12 +342,24 @@ export class MainView extends React.Component {
                             username: client.user.username,
                             displayName: client.user.display_name,
                             color: client.user.color,
-                            coordinates: { x: pixel[0], y: pixel[1] },
-                            lonLat: { longitude: lonLat[0], latitude: lonLat[1] }
+                            coordinates: {
+                                x: pixel[0],
+                                y: pixel[1],
+                            },
+                            lonLat: {
+                                longitude: lonLat[0],
+                                latitude: lonLat[1],
+                            },
                         };
                     }
                     else {
-                        currentClientPointer = Object.assign(Object.assign({}, currentClientPointer), { coordinates: { x: pixel[0], y: pixel[1] }, lonLat: { longitude: lonLat[0], latitude: lonLat[1] } });
+                        currentClientPointer = Object.assign(Object.assign({}, currentClientPointer), { coordinates: {
+                                x: pixel[0],
+                                y: pixel[1],
+                            }, lonLat: {
+                                longitude: lonLat[0],
+                                latitude: lonLat[1],
+                            } });
                     }
                     clientPointers[clientId] = currentClientPointer;
                 }
@@ -373,24 +400,31 @@ export class MainView extends React.Component {
                     return;
                 }
                 const data = this._model.sharedModel.getMetadata(key);
-                let open = true;
-                if (this.state.firstLoad) {
-                    open = false;
-                }
                 if (data && (val.action === 'add' || val.action === 'update')) {
-                    const jsonData = JSON.parse(data);
-                    jsonData['open'] = open;
+                    let jsonData;
+                    if (typeof data === 'string') {
+                        try {
+                            jsonData = JSON.parse(data);
+                        }
+                        catch (e) {
+                            console.warn(`Failed to parse annotation data for ${key}:`, e);
+                            return;
+                        }
+                    }
+                    else {
+                        jsonData = data;
+                    }
                     newState[key] = jsonData;
                 }
                 else if (val.action === 'delete') {
                     delete newState[key];
                 }
             });
-            this.setState(old => (Object.assign(Object.assign({}, old), { annotations: newState, firstLoad: false })));
+            this.setState(old => (Object.assign(Object.assign({}, old), { annotations: newState })));
         };
         this._syncPointer = throttle((coordinates) => {
             const pointer = {
-                coordinates: { x: coordinates[0], y: coordinates[1] }
+                coordinates: { x: coordinates[0], y: coordinates[1] },
             };
             this._model.syncPointer(pointer);
         });
@@ -407,6 +441,25 @@ export class MainView extends React.Component {
         this._ready = false;
         this._sourceToLayerMap = new Map();
         this._originalFeatures = {};
+        // Enforce the map to take the full available width in the case of Jupyter Notebook viewer
+        const el = document.getElementById('main-panel');
+        if (el) {
+            const setWidthOneHundred = (selector) => {
+                document.querySelector(selector).style.setProperty('width', '100%');
+            };
+            //We need to observe the size to counteract
+            //What the default jupyter plugin will try
+            //To do dynamically with the width
+            const resizeObserver = new ResizeObserver(_ => {
+                el.style.setProperty('width', '100%');
+                el.style.setProperty('max-width', '100%');
+                el === null || el === void 0 ? void 0 : el.style.setProperty('left', '0px');
+                setWidthOneHundred('#main-panel jp-toolbar');
+                setWidthOneHundred('#main-panel .lm-SplitPanel ');
+                setWidthOneHundred('#main-panel   .lm-SplitPanel .lm-SplitPanel-child ');
+            });
+            resizeObserver.observe(el);
+        }
         this._mainViewModel = this.props.viewModel;
         this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
         this._model = this._mainViewModel.jGISModel;
@@ -436,7 +489,6 @@ export class MainView extends React.Component {
             id: this._mainViewModel.id,
             lightTheme: isLightTheme(),
             loading: true,
-            firstLoad: true,
             annotations: {},
             clientPointers: {},
             viewProjection: { code: '', units: '' },
@@ -444,12 +496,15 @@ export class MainView extends React.Component {
             scale: 0,
             loadingErrors: [],
             displayTemporalController: false,
-            filterStates: {}
+            filterStates: {},
         };
         this._sources = [];
         this._loadingLayers = new Set();
         this._commands = new CommandRegistry();
-        this._contextMenu = new ContextMenu({ commands: this._commands });
+        this._contextMenu = new ContextMenu({
+            commands: this._commands,
+        });
+        this._updateCenter = debounce(this.updateCenter, 100);
     }
     async componentDidMount() {
         window.addEventListener('resize', this._handleWindowResize);
@@ -458,7 +513,7 @@ export class MainView extends React.Component {
             ? fromLonLat([options.longitude, options.latitude])
             : [0, 0];
         const zoom = options.zoom !== undefined ? options.zoom : 1;
-        await this.generateScene(center, zoom);
+        await this.generateMap(center, zoom);
         this.addContextMenu();
         this._mainViewModel.initSignal();
         if (window.jupytergisMaps !== undefined && this._documentPath) {
@@ -476,27 +531,27 @@ export class MainView extends React.Component {
         this._model.clientStateChanged.disconnect(this._onClientSharedStateChanged, this);
         this._mainViewModel.dispose();
     }
-    async generateScene(center, zoom) {
+    async generateMap(center, zoom) {
         if (this.divRef.current) {
             this._Map = new OlMap({
                 target: this.divRef.current,
                 layers: [],
                 view: new View({
                     center,
-                    zoom
+                    zoom,
                 }),
-                controls: [new ScaleLine()]
+                controls: [new ScaleLine(), new FullScreen()],
             });
             // Add map interactions
             const dragAndDropInteraction = new DragAndDrop({
-                formatConstructors: [GeoJSON]
+                formatConstructors: [GeoJSON],
             });
             dragAndDropInteraction.on('addfeatures', event => {
                 const sourceId = UUID.uuid4();
                 const sourceModel = {
                     type: 'GeoJSONSource',
                     name: 'Drag and Drop source',
-                    parameters: { path: event.file.name }
+                    parameters: { path: event.file.name },
                 };
                 const layerId = UUID.uuid4();
                 this.addSource(sourceId, sourceModel);
@@ -509,8 +564,8 @@ export class MainView extends React.Component {
                         color: '#FF0000',
                         opacity: 1.0,
                         type: 'line',
-                        source: sourceId
-                    }
+                        source: sourceId,
+                    },
                 };
                 this.addLayer(layerId, layerModel, this.getLayerIDs().length);
                 this._model.addLayer(layerId, layerModel);
@@ -518,6 +573,7 @@ export class MainView extends React.Component {
             this._Map.addInteraction(dragAndDropInteraction);
             this.createSelectInteraction();
             const view = this._Map.getView();
+            view.on('change:center', () => this._updateCenter());
             // TODO: Note for the future, will need to update listeners if view changes
             view.on('change:center', throttle(() => {
                 var _a;
@@ -531,7 +587,13 @@ export class MainView extends React.Component {
                 if (!center || !zoom) {
                     return;
                 }
-                this._model.syncViewport({ coordinates: { x: center[0], y: center[1] }, zoom }, this._mainViewModel.id);
+                this._model.syncViewport({
+                    coordinates: {
+                        x: center[0],
+                        y: center[1],
+                    },
+                    zoom,
+                }, this._mainViewModel.id);
             }));
             this._Map.on('postrender', () => {
                 if (this.state.annotations) {
@@ -552,7 +614,7 @@ export class MainView extends React.Component {
                     longitude: latLng[0],
                     bearing,
                     projection: projection.getCode(),
-                    zoom
+                    zoom,
                 };
                 updatedOptions.extent = view.calculateExtent();
                 this._model.setOptions(Object.assign(Object.assign({}, currentOptions), updatedOptions));
@@ -583,7 +645,7 @@ export class MainView extends React.Component {
             });
             this.setState(old => (Object.assign(Object.assign({}, old), { loading: false, viewProjection: {
                     code: view.getProjection().getCode(),
-                    units: view.getProjection().getUnits()
+                    units: view.getProjection().getUnits(),
                 } })));
         }
     }
@@ -608,7 +670,7 @@ export class MainView extends React.Component {
                         minZoom: sourceParameters.minZoom,
                         maxZoom: sourceParameters.maxZoom,
                         tileSize: 256,
-                        url: url
+                        url: url,
                     });
                 }
                 else {
@@ -616,7 +678,7 @@ export class MainView extends React.Component {
                         interpolate: sourceParameters.interpolate,
                         attributions: sourceParameters.attribution,
                         tileSize: 256,
-                        url: url
+                        url: url,
                     });
                 }
                 break;
@@ -626,7 +688,7 @@ export class MainView extends React.Component {
                 newSource = new ImageTileSource({
                     interpolate: sourceParameters.interpolate,
                     url: this.computeSourceUrl(source),
-                    attributions: sourceParameters.attribution
+                    attributions: sourceParameters.attribution,
                 });
                 break;
             }
@@ -640,13 +702,15 @@ export class MainView extends React.Component {
                         minZoom: sourceParameters.minZoom,
                         maxZoom: sourceParameters.maxZoom,
                         url: url,
-                        format: new MVT({ featureClass: RenderFeature })
+                        format: new MVT({
+                            featureClass: RenderFeature,
+                        }),
                     });
                 }
                 else {
                     newSource = new PMTilesVectorSource({
                         attributions: sourceParameters.attribution,
-                        url: url
+                        url: url,
                     });
                 }
                 break;
@@ -656,22 +720,22 @@ export class MainView extends React.Component {
                     (await loadFile({
                         filepath: (_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path,
                         type: 'GeoJSONSource',
-                        model: this._model
+                        model: this._model,
                     }));
                 const format = new GeoJSON({
-                    featureProjection: this._Map.getView().getProjection()
+                    featureProjection: this._Map.getView().getProjection(),
                 });
                 // TODO: Don't hardcode projection
                 const featureArray = format.readFeatures(data, {
                     dataProjection: 'EPSG:4326',
-                    featureProjection: this._Map.getView().getProjection()
+                    featureProjection: this._Map.getView().getProjection(),
                 });
                 const featureCollection = new Collection(featureArray);
                 featureCollection.forEach(feature => {
                     feature.setId(getUid(feature));
                 });
                 newSource = new VectorSource({
-                    features: featureCollection
+                    features: featureCollection,
                 });
                 break;
             }
@@ -680,15 +744,15 @@ export class MainView extends React.Component {
                 const geojson = await loadFile({
                     filepath: parameters.path,
                     type: 'ShapefileSource',
-                    model: this._model
+                    model: this._model,
                 });
                 const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
                 const format = new GeoJSON();
                 newSource = new VectorSource({
                     features: format.readFeatures(geojsonData, {
                         dataProjection: 'EPSG:4326',
-                        featureProjection: this._Map.getView().getProjection()
-                    })
+                        featureProjection: this._Map.getView().getProjection(),
+                    }),
                 });
                 break;
             }
@@ -712,13 +776,13 @@ export class MainView extends React.Component {
                 const imageUrl = await loadFile({
                     filepath: sourceParameters.path,
                     type: 'ImageSource',
-                    model: this._model
+                    model: this._model,
                 });
                 newSource = new Static({
                     interpolate: sourceParameters.interpolate,
                     imageExtent: extent,
                     url: imageUrl,
-                    crossOrigin: ''
+                    crossOrigin: '',
                 });
                 break;
             }
@@ -742,7 +806,7 @@ export class MainView extends React.Component {
                         const geotiff = await loadFile({
                             filepath: (_c = sourceInfo.url) !== null && _c !== void 0 ? _c : '',
                             type: 'GeoTiffSource',
-                            model: this._model
+                            model: this._model,
                         });
                         return Object.assign(Object.assign({}, addNoData(sourceInfo)), { min: sourceInfo.min, max: sourceInfo.max, geotiff, url: URL.createObjectURL(geotiff.file) });
                     }
@@ -751,7 +815,7 @@ export class MainView extends React.Component {
                     interpolate: sourceParameters.interpolate,
                     sources,
                     normalize: sourceParameters.normalize,
-                    wrapX: sourceParameters.wrapX
+                    wrapX: sourceParameters.wrapX,
                 });
                 break;
             }
@@ -863,19 +927,25 @@ export class MainView extends React.Component {
      */
     async _buildMapLayer(id, layer) {
         var _a, _b, _c;
-        const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
-        const source = this._model.sharedModel.getLayerSource(sourceId);
-        if (!source) {
-            return;
-        }
         this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: true })));
         this._loadingLayers.add(id);
-        if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source);
-        }
-        this._loadingLayers.add(id);
         let newMapLayer;
         let layerParameters;
+        let sourceId;
+        let source;
+        if (layer.type !== 'StacLayer') {
+            sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
+            if (!sourceId) {
+                return;
+            }
+            source = this._model.sharedModel.getLayerSource(sourceId);
+            if (!source) {
+                return;
+            }
+            if (!this._sources[sourceId]) {
+                await this.addSource(sourceId, source);
+            }
+        }
         // TODO: OpenLayers provides a bunch of sources for specific tile
         // providers, so maybe set up some way to use those
         switch (layer.type) {
@@ -884,7 +954,7 @@ export class MainView extends React.Component {
                 newMapLayer = new TileLayer({
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
-                    source: this._sources[layerParameters.source]
+                    source: this._sources[layerParameters.source],
                 });
                 break;
             }
@@ -894,7 +964,7 @@ export class MainView extends React.Component {
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source],
-                    style: this.vectorLayerStyleRuleBuilder(layer)
+                    style: this.vectorLayerStyleRuleBuilder(layer),
                 });
                 break;
             }
@@ -902,7 +972,8 @@ export class MainView extends React.Component {
                 layerParameters = layer.parameters;
                 newMapLayer = new VectorTileLayer({
                     opacity: layerParameters.opacity,
-                    source: this._sources[layerParameters.source]
+                    source: this._sources[layerParameters.source],
+                    style: this.vectorLayerStyleRuleBuilder(layer),
                 });
                 break;
             }
@@ -912,8 +983,8 @@ export class MainView extends React.Component {
                     opacity: 0.3,
                     source: this._sources[layerParameters.source],
                     style: {
-                        color: ['color', this.hillshadeMath()]
-                    }
+                        color: ['color', this.hillshadeMath()],
+                    },
                 });
                 break;
             }
@@ -921,7 +992,7 @@ export class MainView extends React.Component {
                 layerParameters = layer.parameters;
                 newMapLayer = new ImageLayer({
                     opacity: layerParameters.opacity,
-                    source: this._sources[layerParameters.source]
+                    source: this._sources[layerParameters.source],
                 });
                 break;
             }
@@ -930,10 +1001,12 @@ export class MainView extends React.Component {
                 // This is to handle python sending a None for the color
                 const layerOptions = {
                     opacity: layerParameters.opacity,
-                    source: this._sources[layerParameters.source]
+                    source: this._sources[layerParameters.source],
                 };
                 if (layerParameters.color) {
-                    layerOptions['style'] = { color: layerParameters.color };
+                    layerOptions['style'] = {
+                        color: layerParameters.color,
+                    };
                 }
                 newMapLayer = new WebGlTileLayer(layerOptions);
                 break;
@@ -945,17 +1018,36 @@ export class MainView extends React.Component {
                     source: this._sources[layerParameters.source],
                     blur: (_b = layerParameters.blur) !== null && _b !== void 0 ? _b : 15,
                     radius: (_c = layerParameters.radius) !== null && _c !== void 0 ? _c : 8,
-                    gradient: layerParameters.color
+                    gradient: layerParameters.color,
+                });
+                break;
+            }
+            case 'StacLayer': {
+                layerParameters = layer.parameters;
+                newMapLayer = new StacLayer({
+                    displayPreview: true,
+                    data: layerParameters.data,
+                    opacity: layerParameters.opacity,
+                    visible: layer.visible,
+                    assets: Object.keys(layerParameters.data.assets),
+                    extent: layerParameters.data.bbox,
                 });
+                this.setState(old => (Object.assign(Object.assign({}, old), { metadata: layerParameters.data.properties })));
                 break;
             }
         }
-        await this._waitForSourceReady(newMapLayer);
         // OpenLayers doesn't have name/id field so add it
         newMapLayer.set('id', id);
-        // we need to keep track of which source has which layers
-        this._sourceToLayerMap.set(layerParameters.source, id);
-        this.addProjection(newMapLayer);
+        // STAC layers don't have source
+        if (newMapLayer instanceof Layer) {
+            // we need to keep track of which source has which layers
+            // Only set sourceToLayerMap if 'source' exists on layerParameters
+            if ('source' in layerParameters) {
+                this._sourceToLayerMap.set(layerParameters.source, id);
+            }
+            this.addProjection(newMapLayer);
+            await this._waitForSourceReady(newMapLayer);
+        }
         this._loadingLayers.delete(id);
         return newMapLayer;
     }
@@ -967,7 +1059,7 @@ export class MainView extends React.Component {
             return;
         }
         const projectionCode = sourceProjection.getCode();
-        const isProjectionRegistered = getRegisteredProjection(projectionCode);
+        const isProjectionRegistered = getProjection(projectionCode);
         if (!isProjectionRegistered) {
             // Check if the projection exists in proj4list
             if (!proj4list[projectionCode]) {
@@ -1016,7 +1108,7 @@ export class MainView extends React.Component {
             this.state.loadingErrors.push({
                 id,
                 error: error.message || 'invalid file path',
-                index
+                index,
             });
             this._loadingLayers.delete(id);
         }
@@ -1029,18 +1121,10 @@ export class MainView extends React.Component {
      */
     async updateLayer(id, layer, mapLayer, oldLayer) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
-        const source = this._model.sharedModel.getLayerSource(sourceId);
-        if (!source) {
-            return;
-        }
-        if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source);
-        }
         mapLayer.setVisible(layer.visible);
         switch (layer.type) {
             case 'RasterLayer': {
-                mapLayer.setOpacity(((_b = layer.parameters) === null || _b === void 0 ? void 0 : _b.opacity) || 1);
+                mapLayer.setOpacity(((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.opacity) || 1);
                 break;
             }
             case 'VectorLayer': {
@@ -1063,10 +1147,10 @@ export class MainView extends React.Component {
                 break;
             }
             case 'WebGlLayer': {
-                mapLayer.setOpacity((_c = layer.parameters) === null || _c === void 0 ? void 0 : _c.opacity);
-                if ((_d = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _d === void 0 ? void 0 : _d.color) {
+                mapLayer.setOpacity((_b = layer.parameters) === null || _b === void 0 ? void 0 : _b.opacity);
+                if ((_c = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _c === void 0 ? void 0 : _c.color) {
                     mapLayer.setStyle({
-                        color: layer.parameters.color
+                        color: layer.parameters.color,
                     });
                 }
                 break;
@@ -1074,13 +1158,16 @@ export class MainView extends React.Component {
             case 'HeatmapLayer': {
                 const layerParams = layer.parameters;
                 const heatmap = mapLayer;
-                heatmap.setOpacity((_e = layerParams.opacity) !== null && _e !== void 0 ? _e : 1);
-                heatmap.setBlur((_f = layerParams.blur) !== null && _f !== void 0 ? _f : 15);
-                heatmap.setRadius((_g = layerParams.radius) !== null && _g !== void 0 ? _g : 8);
-                heatmap.setGradient((_h = layerParams.color) !== null && _h !== void 0 ? _h : ['#00f', '#0ff', '#0f0', '#ff0', '#f00']);
+                heatmap.setOpacity((_d = layerParams.opacity) !== null && _d !== void 0 ? _d : 1);
+                heatmap.setBlur((_e = layerParams.blur) !== null && _e !== void 0 ? _e : 15);
+                heatmap.setRadius((_f = layerParams.radius) !== null && _f !== void 0 ? _f : 8);
+                heatmap.setGradient((_g = layerParams.color) !== null && _g !== void 0 ? _g : ['#00f', '#0ff', '#0f0', '#ff0', '#f00']);
                 this.handleTemporalController(id, layer);
                 break;
             }
+            case 'StacLayer':
+                mapLayer.setOpacity(((_h = layer.parameters) === null || _h === void 0 ? void 0 : _h.opacity) || 1);
+                break;
         }
     }
     flyToGeometry(sender, geometry) {
@@ -1093,7 +1180,7 @@ export class MainView extends React.Component {
         view.fit(extent, {
             padding: [50, 50, 50, 50],
             duration: 1000,
-            maxZoom: 16
+            maxZoom: 16,
         });
     }
     highlightFeatureOnMap(sender, featureOrGeometry) {
@@ -1108,7 +1195,7 @@ export class MainView extends React.Component {
         const parsedGeometry = isOlGeometry
             ? geometry
             : new GeoJSON().readGeometry(geometry, {
-                featureProjection: this._Map.getView().getProjection()
+                featureProjection: this._Map.getView().getProjection(),
             });
         const olFeature = new Feature(Object.assign({ geometry: parsedGeometry }, (geometry !== featureOrGeometry ? featureOrGeometry : {})));
         if (!this._highlightLayer) {
@@ -1123,39 +1210,44 @@ export class MainView extends React.Component {
                             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 })
-                                })
+                                    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
-                                })
+                                    width: 3,
+                                }),
                             });
                         case 'Polygon':
                         case 'MultiPolygon':
                             return new Style({
                                 stroke: new Stroke({
                                     color: '#f00',
-                                    width: 2
+                                    width: 2,
                                 }),
                                 fill: new Fill({
-                                    color: 'rgba(255, 255, 0, 0.8)'
-                                })
+                                    color: 'rgba(255, 255, 0, 0.8)',
+                                }),
                             });
                         default:
                             return new Style({
                                 stroke: new Stroke({
                                     color: '#000',
-                                    width: 2
-                                })
+                                    width: 2,
+                                }),
                             });
                     }
                 },
-                zIndex: 999
+                zIndex: 999,
             });
             this._Map.addLayer(this._highlightLayer);
         }
@@ -1222,7 +1314,7 @@ export class MainView extends React.Component {
         }
     }
     async updateOptions(options) {
-        const { projection, extent, useExtent, latitude, longitude, zoom, bearing } = options;
+        const { projection, extent, useExtent, latitude, longitude, zoom, bearing, } = options;
         let view = this._Map.getView();
         const currentProjection = view.getProjection().getCode();
         // Need to recreate view if the projection changes
@@ -1339,9 +1431,6 @@ export class MainView extends React.Component {
             }
             const mapLayer = this.getLayer(id);
             const layerTree = JupyterGISModel.getOrderedLayerIds(this._model);
-            if (!mapLayer) {
-                return;
-            }
             if (layerTree.includes(id)) {
                 this.updateLayer(id, newLayer, mapLayer, oldLayer);
             }
@@ -1416,6 +1505,9 @@ export class MainView extends React.Component {
             const tileGrid = source.getTileGrid();
             extent = tileGrid === null || tileGrid === void 0 ? void 0 : tileGrid.getExtent();
         }
+        if (layer instanceof StacLayer) {
+            extent = layer.getExtent();
+        }
         if (!extent) {
             console.warn('Layer has no extent.');
             return;
@@ -1428,7 +1520,7 @@ export class MainView extends React.Component {
             : extent;
         this._Map.getView().fit(transformedExtent, {
             size: this._Map.getSize(),
-            duration: 500
+            duration: 500,
         });
     }
     _moveToPosition(center, zoom, duration = 1000) {
@@ -1438,7 +1530,10 @@ export class MainView extends React.Component {
         // Zoom needs to be set before changing center
         if (!view.animate === undefined) {
             view.animate({ zoom, duration });
-            view.animate({ center: [center.x, center.y], duration });
+            view.animate({
+                center: [center.x, center.y],
+                duration,
+            });
         }
     }
     _flyToPosition(center, zoom, duration = 1000) {
@@ -1529,7 +1624,7 @@ export class MainView extends React.Component {
                 const screenPosition = this._computeAnnotationPosition(annotation);
                 return (screenPosition && (React.createElement("div", { key: key, id: key, style: {
                         left: screenPosition.x,
-                        top: screenPosition.y
+                        top: screenPosition.y,
                     }, className: 'jGIS-Popup-Wrapper' },
                     React.createElement(AnnotationFloater, { itemId: key, annotationModel: this._model.annotationModel }))));
             }),
@@ -1538,14 +1633,14 @@ export class MainView extends React.Component {
                 React.createElement("div", { className: "jGIS-Mainview data-jgis-keybinding", tabIndex: -2, style: {
                         border: this.state.remoteUser
                             ? `solid 3px ${this.state.remoteUser.color}`
-                            : 'unset'
+                            : 'unset',
                     } },
-                    React.createElement(Spinner, { loading: this.state.loading }),
+                    React.createElement(LoadingOverlay, { loading: this.state.loading }),
                     React.createElement(FollowIndicator, { remoteUser: this.state.remoteUser }),
                     React.createElement(CollaboratorPointers, { clients: this.state.clientPointers }),
                     React.createElement("div", { ref: this.divRef, style: {
                             width: '100%',
-                            height: '100%'
+                            height: '100%',
                         } })),
                 React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale }))));
     }