@jupytergis/base 0.1.6 → 0.2.0

package/lib/mainview/mainView.js

@@ -3,7 +3,7 @@ import { UUID } from '@lumino/coreutils';
 import { Collection, Map as OlMap, View } from 'ol';
 import { ScaleLine } from 'ol/control';
 import { GeoJSON, MVT } from 'ol/format';
-import DragAndDrop from 'ol/interaction/DragAndDrop';
+import { DragAndDrop, Select } from 'ol/interaction';
 import { Image as ImageLayer, Vector as VectorLayer, VectorTile as VectorTileLayer, WebGLTile as WebGlTileLayer } from 'ol/layer';
 import TileLayer from 'ol/layer/Tile';
 import { fromLonLat, toLonLat } from 'ol/proj';
@@ -12,13 +12,52 @@ import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as Vecto
 import Static from 'ol/source/ImageStatic';
 //@ts-expect-error no types for ol-pmtiles
 import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
+import { register } from 'ol/proj/proj4.js';
+import { get as getProjection } from 'ol/proj.js';
+import proj4 from 'proj4';
 import * as React from 'react';
 import shp from 'shpjs';
-import { isLightTheme } from '../tools';
+import { isLightTheme, loadGeoTIFFWithCache, throttle } from '../tools';
 import { Spinner } from './spinner';
+//@ts-expect-error no types for proj4-list
+import proj4list from 'proj4-list';
+import { ContextMenu } from '@lumino/widgets';
+import { CommandRegistry } from '@lumino/commands';
+import AnnotationFloater from '../annotations/components/AnnotationFloater';
+import { CommandIDs } from '../constants';
+import { FollowIndicator } from './FollowIndicator';
+import CollaboratorPointers from './CollaboratorPointers';
+import { Circle, Fill, Stroke, Style } from 'ol/style';
+import { singleClick } from 'ol/events/condition';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
+        this.addContextMenu = () => {
+            this._commands.addCommand(CommandIDs.addAnnotation, {
+                execute: () => {
+                    var _a;
+                    if (!this._Map) {
+                        return;
+                    }
+                    this._mainViewModel.addAnnotation({
+                        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
+                    });
+                },
+                label: 'Add annotation',
+                isEnabled: () => {
+                    return !!this._Map;
+                }
+            });
+            this._contextMenu.addItem({
+                command: CommandIDs.addAnnotation,
+                selector: '.ol-viewport',
+                rank: 1
+            });
+        };
         this.vectorLayerStyleRuleBuilder = (layer) => {
             const layerParams = layer.parameters;
             if (!layerParams) {
@@ -116,8 +155,117 @@ export class MainView extends React.Component {
             return scaled;
         };
         this._onClientSharedStateChanged = (sender, clients) => {
-            // TODO SOMETHING
+            var _a, _b, _c, _d, _e;
+            const remoteUser = (_a = this._model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser;
+            // If we are in following mode, we update our position and selection
+            if (remoteUser) {
+                const remoteState = clients.get(remoteUser);
+                if (!remoteState) {
+                    return;
+                }
+                if (((_b = remoteState.user) === null || _b === void 0 ? void 0 : _b.username) !== ((_c = this.state.remoteUser) === null || _c === void 0 ? void 0 : _c.username)) {
+                    this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: remoteState.user })));
+                }
+                const remoteViewport = remoteState.viewportState;
+                if (remoteViewport.value) {
+                    const { x, y } = remoteViewport.value.coordinates;
+                    const zoom = remoteViewport.value.zoom;
+                    this._moveToPosition({ x, y }, zoom, 0);
+                }
+            }
+            else {
+                // If we are unfollowing a remote user, we reset our center and zoom to their previous values
+                if (this.state.remoteUser !== null) {
+                    this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: null })));
+                    const viewportState = (_e = (_d = this._model.localState) === null || _d === void 0 ? void 0 : _d.viewportState) === null || _e === void 0 ? void 0 : _e.value;
+                    if (viewportState) {
+                        this._moveToPosition(viewportState.coordinates, viewportState.zoom);
+                    }
+                }
+            }
+            // cursors
+            clients.forEach((client, clientId) => {
+                var _a;
+                if (!(client === null || client === void 0 ? void 0 : client.user)) {
+                    return;
+                }
+                const pointer = (_a = client.pointer) === null || _a === void 0 ? void 0 : _a.value;
+                // We already display our own cursor on mouse move
+                if (this._model.getClientId() === clientId) {
+                    return;
+                }
+                const clientPointers = this.state.clientPointers;
+                let currentClientPointer = clientPointers[clientId];
+                if (pointer) {
+                    const pixel = this._Map.getPixelFromCoordinate([
+                        pointer.coordinates.x,
+                        pointer.coordinates.y
+                    ]);
+                    const lonLat = toLonLat([pointer.coordinates.x, pointer.coordinates.y]);
+                    if (!currentClientPointer) {
+                        currentClientPointer = clientPointers[clientId] = {
+                            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] }
+                        };
+                    }
+                    currentClientPointer.coordinates.x = pixel[0];
+                    currentClientPointer.coordinates.y = pixel[1];
+                    clientPointers[clientId] = currentClientPointer;
+                }
+                else {
+                    delete clientPointers[clientId];
+                }
+                this.setState(old => (Object.assign(Object.assign({}, old), { clientPointers: clientPointers })));
+            });
+        };
+        this._onSharedModelStateChange = (_, change) => {
+            var _a;
+            const changedState = (_a = change.stateChange) === null || _a === void 0 ? void 0 : _a.map(value => value.name);
+            if (!(changedState === null || changedState === void 0 ? void 0 : changedState.includes('path'))) {
+                return;
+            }
+            const path = this._model.sharedModel.getState('path');
+            if (path !== this._documentPath && typeof path === 'string') {
+                if (window.jupytergisMaps !== undefined && this._documentPath) {
+                    delete window.jupytergisMaps[this._documentPath];
+                }
+                this._documentPath = path;
+                if (window.jupytergisMaps !== undefined) {
+                    window.jupytergisMaps[this._documentPath] = this._Map;
+                }
+            }
         };
+        this._onSharedMetadataChanged = (_, changes) => {
+            const newState = Object.assign({}, this.state.annotations);
+            changes.forEach((val, key) => {
+                if (!key.startsWith('annotation')) {
+                    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;
+                    newState[key] = jsonData;
+                }
+                else if (val.action === 'delete') {
+                    delete newState[key];
+                }
+            });
+            this.setState(old => (Object.assign(Object.assign({}, old), { annotations: newState, firstLoad: false })));
+        };
+        this._syncPointer = throttle((coordinates) => {
+            const pointer = {
+                coordinates: { x: coordinates[0], y: coordinates[1] }
+            };
+            this._model.syncPointer(pointer);
+        });
         this._handleThemeChange = () => {
             const lightTheme = isLightTheme();
             // TODO SOMETHING
@@ -130,6 +278,8 @@ export class MainView extends React.Component {
         this.divRef = React.createRef(); // Reference of render div
         this._ready = false;
         this._sourceToLayerMap = new Map();
+        proj4.defs(Array.from(proj4list));
+        register(proj4);
         this._mainViewModel = this.props.viewModel;
         this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
         this._model = this._mainViewModel.jGISModel;
@@ -139,20 +289,34 @@ export class MainView extends React.Component {
         this._model.sharedLayersChanged.connect(this._onLayersChanged, this);
         this._model.sharedLayerTreeChanged.connect(this._onLayerTreeChange, this);
         this._model.sharedSourcesChanged.connect(this._onSourcesChange, this);
+        this._model.sharedModel.changed.connect(this._onSharedModelStateChange);
+        this._mainViewModel.jGISModel.sharedMetadataChanged.connect(this._onSharedMetadataChanged, this);
+        this._model.zoomToAnnotationSignal.connect(this._onZoomToAnnotation, this);
         this.state = {
             id: this._mainViewModel.id,
             lightTheme: isLightTheme(),
             loading: true,
-            firstLoad: true
+            firstLoad: true,
+            annotations: {},
+            clientPointers: {}
         };
         this._sources = [];
+        this._commands = new CommandRegistry();
+        this._contextMenu = new ContextMenu({ commands: this._commands });
     }
     async componentDidMount() {
         window.addEventListener('resize', this._handleWindowResize);
         await this.generateScene();
+        this.addContextMenu();
         this._mainViewModel.initSignal();
+        if (window.jupytergisMaps !== undefined && this._documentPath) {
+            window.jupytergisMaps[this._documentPath] = this._Map;
+        }
     }
     componentWillUnmount() {
+        if (window.jupytergisMaps !== undefined && this._documentPath) {
+            delete window.jupytergisMaps[this._documentPath];
+        }
         window.removeEventListener('resize', this._handleWindowResize);
         this._mainViewModel.viewSettingChanged.disconnect(this._onViewChanged, this);
         this._model.themeChanged.disconnect(this._handleThemeChange, this);
@@ -171,6 +335,7 @@ export class MainView extends React.Component {
                 }),
                 controls: [new ScaleLine()]
             });
+            // Add map interactions
             const dragAndDropInteraction = new DragAndDrop({
                 formatConstructors: [GeoJSON]
             });
@@ -181,7 +346,8 @@ export class MainView extends React.Component {
                     name: 'Drag and Drop source',
                     parameters: { path: event.file.name }
                 };
-                this.addSource(sourceId, sourceModel);
+                const layerId = UUID.uuid4();
+                this.addSource(sourceId, sourceModel, layerId);
                 this._model.sharedModel.addSource(sourceId, sourceModel);
                 const layerModel = {
                     type: 'VectorLayer',
@@ -194,11 +360,68 @@ export class MainView extends React.Component {
                         source: sourceId
                     }
                 };
-                const layerId = UUID.uuid4();
-                this.addLayer(layerId, layerModel, this.getLayers().length);
+                this.addLayer(layerId, layerModel, this.getLayerIDs().length);
                 this._model.addLayer(layerId, layerModel);
             });
             this._Map.addInteraction(dragAndDropInteraction);
+            const selectInteraction = new Select({
+                hitTolerance: 5,
+                multi: true,
+                layers: layer => {
+                    var _a, _b;
+                    const localState = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState();
+                    const selectedLayers = (_b = localState === null || localState === void 0 ? void 0 : localState.selected) === null || _b === void 0 ? void 0 : _b.value;
+                    if (!selectedLayers) {
+                        return false;
+                    }
+                    const selectedLayerId = Object.keys(selectedLayers)[0];
+                    return layer === this.getLayer(selectedLayerId);
+                },
+                condition: (event) => {
+                    return singleClick(event) && this._model.isIdentifying;
+                },
+                style: new Style({
+                    image: new Circle({
+                        radius: 5,
+                        fill: new Fill({
+                            color: '#C52707'
+                        }),
+                        stroke: new Stroke({
+                            color: '#171717',
+                            width: 2
+                        })
+                    })
+                })
+            });
+            selectInteraction.on('select', event => {
+                const identifiedFeatures = [];
+                selectInteraction.getFeatures().forEach(feature => {
+                    identifiedFeatures.push(feature.getProperties());
+                });
+                this._model.syncIdentifiedFeatures(identifiedFeatures, this._mainViewModel.id);
+            });
+            this._Map.addInteraction(selectInteraction);
+            const view = this._Map.getView();
+            // TODO: Note for the future, will need to update listeners if view changes
+            view.on('change:center', throttle(() => {
+                var _a;
+                // Not syncing center if following someone else
+                if ((_a = this._model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser) {
+                    return;
+                }
+                const view = this._Map.getView();
+                const center = view.getCenter();
+                const zoom = view.getZoom();
+                if (!center || !zoom) {
+                    return;
+                }
+                this._model.syncViewport({ coordinates: { x: center[0], y: center[1] }, zoom }, this._mainViewModel.id);
+            }));
+            this._Map.on('postrender', () => {
+                if (this.state.annotations) {
+                    this._updateAnnotation();
+                }
+            });
             this._Map.on('moveend', () => {
                 if (!this._initializedPosition) {
                     return;
@@ -220,12 +443,23 @@ export class MainView extends React.Component {
                 updatedOptions.extent = view.calculateExtent();
                 this._model.setOptions(Object.assign(Object.assign({}, currentOptions), updatedOptions));
             });
+            this._Map.on('click', this._identifyFeature.bind(this));
+            this._Map
+                .getViewport()
+                .addEventListener('pointermove', this._onPointerMove.bind(this));
             if (JupyterGISModel.getOrderedLayerIds(this._model).length !== 0) {
                 await this._updateLayersImpl(JupyterGISModel.getOrderedLayerIds(this._model));
                 const options = this._model.getOptions();
                 this.updateOptions(options);
                 this._initializedPosition = true;
             }
+            this._Map.getViewport().addEventListener('contextmenu', event => {
+                event.preventDefault();
+                event.stopPropagation();
+                const coordinate = this._Map.getEventCoordinate(event);
+                this._clickCoords = coordinate;
+                this._contextMenu.open(event);
+            });
             this.setState(old => (Object.assign(Object.assign({}, old), { loading: false })));
         }
     }
@@ -241,13 +475,17 @@ export class MainView extends React.Component {
             throw error;
         }
     }
+    async _loadGeoTIFFWithCache(sourceInfo) {
+        const result = await loadGeoTIFFWithCache(sourceInfo);
+        return result === null || result === void 0 ? void 0 : result.file;
+    }
     /**
      * Add a source in the map.
      *
      * @param id - the source id.
      * @param source - the source object.
      */
-    async addSource(id, source) {
+    async addSource(id, source, layerId) {
         var _a, _b;
         let newSource;
         switch (source.type) {
@@ -363,8 +601,15 @@ export class MainView extends React.Component {
             }
             case 'GeoTiffSource': {
                 const sourceParameters = source.parameters;
+                const addNoData = (url) => {
+                    return Object.assign(Object.assign({}, url), { nodata: 0 });
+                };
+                const sourcesWithBlobs = await Promise.all(sourceParameters.urls.map(async (sourceInfo) => {
+                    const blob = await this._loadGeoTIFFWithCache(sourceInfo);
+                    return Object.assign(Object.assign({}, addNoData(sourceInfo)), { blob });
+                }));
                 newSource = new GeoTIFFSource({
-                    sources: sourceParameters.urls,
+                    sources: sourcesWithBlobs,
                     normalize: sourceParameters.normalize,
                     wrapX: sourceParameters.wrapX
                 });
@@ -408,7 +653,7 @@ export class MainView extends React.Component {
         // remove source being updated
         this.removeSource(id);
         // create updated source
-        this.addSource(id, source);
+        await this.addSource(id, source, layerId);
         // change source of target layer
         mapLayer.setSource(this._sources[id]);
     }
@@ -428,20 +673,45 @@ export class MainView extends React.Component {
     updateLayers(layerIds) {
         this._updateLayersImpl(layerIds);
     }
+    /**
+     * Updates the position and existence of layers in the OL map based on the layer IDs.
+     *
+     * @param layerIds - An array of layer IDs that should be present on the map.
+     * @returns {} Nothing is returned.
+     */
     async _updateLayersImpl(layerIds) {
-        const mapLayers = [];
-        for (const layerId of layerIds) {
+        // get layers that are currently on the OL map
+        const previousLayerIds = this.getLayerIDs();
+        // Iterate over the new layer IDs:
+        //   * Add layers to the map that are present in the list but not the map.
+        //   * Remove layers from the map that are present in the map but not the list.
+        //   * Update layer positions to match the list.
+        for (let targetLayerPosition = 0; targetLayerPosition < layerIds.length; targetLayerPosition++) {
+            const layerId = layerIds[targetLayerPosition];
             const layer = this._model.sharedModel.getLayer(layerId);
             if (!layer) {
-                console.log(`Layer id ${layerId} does not exist`);
+                console.warn(`Layer with ID ${layerId} does not exist in the shared model.`);
                 continue;
             }
-            const newMapLayer = await this._buildMapLayer(layerId, layer);
-            if (newMapLayer !== undefined) {
-                mapLayers.push(newMapLayer);
+            const mapLayer = this.getLayer(layerId);
+            if (mapLayer !== undefined) {
+                this.moveLayer(layerId, targetLayerPosition);
+            }
+            else {
+                await this.addLayer(layerId, layer, targetLayerPosition);
+            }
+            const previousIndex = previousLayerIds.indexOf(layerId);
+            if (previousIndex > -1) {
+                previousLayerIds.splice(previousIndex, 1);
             }
         }
-        this._Map.setLayers(mapLayers);
+        // Remove layers that are no longer in the `layerIds` list.
+        previousLayerIds.forEach(layerId => {
+            const layer = this.getLayer(layerId);
+            if (layer !== undefined) {
+                this._Map.removeLayer(layer);
+            }
+        });
         this._ready = true;
     }
     /**
@@ -454,12 +724,12 @@ export class MainView extends React.Component {
     async _buildMapLayer(id, layer) {
         var _a;
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
-        const source = this._model.sharedModel.getSource(sourceId);
+        const source = this._model.sharedModel.getLayerSource(sourceId);
         if (!source) {
             return;
         }
         if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source);
+            await this.addSource(sourceId, source, id);
         }
         let newMapLayer;
         let layerParameters;
@@ -559,12 +829,12 @@ export class MainView extends React.Component {
     async updateLayer(id, layer, mapLayer) {
         var _a, _b, _c, _d;
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
-        const source = this._model.sharedModel.getSource(sourceId);
+        const source = this._model.sharedModel.getLayerSource(sourceId);
         if (!source) {
             return;
         }
         if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source);
+            await this.addSource(sourceId, source, id);
         }
         mapLayer.setVisible(layer.visible);
         switch (layer.type) {
@@ -620,23 +890,36 @@ export class MainView extends React.Component {
             this._initializedPosition = true;
         }
     }
-    updateOptions(options) {
-        const view = this._Map.getView();
+    async updateOptions(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
+        if (projection !== undefined && currentProjection !== projection) {
+            const newProjection = getProjection(projection);
+            if (newProjection) {
+                view = new View({ projection: newProjection });
+            }
+            else {
+                console.warn(`Invalid projection: ${projection}`);
+                return;
+            }
+        }
         // Use the extent only if explicitly requested (QGIS files).
-        if (options.extent && options.useExtent) {
-            view.fit(options.extent);
+        if (useExtent && extent) {
+            view.fit(extent);
         }
         else {
-            const centerCoord = fromLonLat([options.longitude || 0, options.latitude || 0], this._Map.getView().getProjection());
-            this._Map.getView().setZoom(options.zoom || 0);
-            this._Map.getView().setCenter(centerCoord);
+            const centerCoord = fromLonLat([longitude || 0, latitude || 0], view.getProjection());
+            this._moveToPosition({ x: centerCoord[0], y: centerCoord[1] }, zoom || 0);
             // Save the extent if it does not exists, to allow proper export to qgis.
-            if (options.extent === undefined) {
+            if (!options.extent) {
                 options.extent = view.calculateExtent();
                 this._model.setOptions(options);
             }
         }
-        view.setRotation(options.bearing || 0);
+        view.setRotation(bearing || 0);
+        this._Map.setView(view);
     }
     _onViewChanged(sender, change) {
         // TODO SOMETHING
@@ -651,15 +934,48 @@ export class MainView extends React.Component {
             .getArray()
             .find(layer => layer.get('id') === id);
     }
+    /**
+     * Convenience method to get a specific layer index from OpenLayers Map
+     * @param id Layer to retrieve
+     */
+    getLayerIndex(id) {
+        return this._Map
+            .getLayers()
+            .getArray()
+            .findIndex(layer => layer.get('id') === id);
+    }
     /**
      * Convenience method to get list layer IDs from the OpenLayers Map
      */
-    getLayers() {
+    getLayerIDs() {
         return this._Map
             .getLayers()
             .getArray()
             .map(layer => layer.get('id'));
     }
+    /**
+     * Move layer `id` in the stack to `index`.
+     *
+     * @param id - id of the layer.
+     * @param index - expected index of the layer.
+     */
+    moveLayer(id, index) {
+        const currentIndex = this.getLayerIndex(id);
+        if (currentIndex === index || currentIndex === -1) {
+            return;
+        }
+        const layer = this.getLayer(id);
+        let nextIndex = index;
+        // should not be undefined since the id exists above
+        if (layer === undefined) {
+            return;
+        }
+        this._Map.getLayers().removeAt(currentIndex);
+        if (currentIndex < index) {
+            nextIndex -= 1;
+        }
+        this._Map.getLayers().insertAt(nextIndex, layer);
+    }
     _onLayersChanged(_, change) {
         var _a;
         // Avoid concurrency update on layers on first load, if layersTreeChanged and
@@ -709,16 +1025,110 @@ export class MainView extends React.Component {
             }
         });
     }
+    _computeAnnotationPosition(annotation) {
+        const { x, y } = annotation.position;
+        const pixels = this._Map.getPixelFromCoordinate([x, y]);
+        if (pixels) {
+            return { x: pixels[0], y: pixels[1] };
+        }
+    }
+    _updateAnnotation() {
+        Object.keys(this.state.annotations).forEach(key => {
+            var _a;
+            const el = document.getElementById(key);
+            if (el) {
+                const annotation = (_a = this._model.annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotation(key);
+                if (annotation) {
+                    const screenPosition = this._computeAnnotationPosition(annotation);
+                    if (screenPosition) {
+                        el.style.left = `${Math.round(screenPosition.x)}px`;
+                        el.style.top = `${Math.round(screenPosition.y)}px`;
+                    }
+                }
+            }
+        });
+    }
+    _onZoomToAnnotation(_, id) {
+        var _a;
+        const annotation = (_a = this._model.annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotation(id);
+        if (annotation) {
+            this._moveToPosition(annotation.position, annotation.zoom);
+        }
+    }
+    _moveToPosition(center, zoom, duration = 1000) {
+        const view = this._Map.getView();
+        // Zoom needs to be set before changing center
+        if (!view.animate === undefined) {
+            view.animate({ zoom, duration });
+            view.animate({ center: [center.x, center.y], duration });
+        }
+        else {
+            view.setZoom(zoom);
+            view.setCenter([center.x, center.y]);
+        }
+    }
+    _onPointerMove(e) {
+        const pixel = this._Map.getEventPixel(e);
+        const coordinates = this._Map.getCoordinateFromPixel(pixel);
+        this._syncPointer(coordinates);
+    }
+    _identifyFeature(e) {
+        var _a, _b;
+        if (!this._model.isIdentifying) {
+            return;
+        }
+        const localState = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState();
+        const selectedLayer = (_b = localState === null || localState === void 0 ? void 0 : localState.selected) === null || _b === void 0 ? void 0 : _b.value;
+        if (!selectedLayer) {
+            console.warn('Layer must be selected to use identify tool');
+            return;
+        }
+        const layerId = Object.keys(selectedLayer)[0];
+        const jgisLayer = this._model.getLayer(layerId);
+        switch (jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) {
+            case 'WebGlLayer': {
+                const layer = this.getLayer(layerId);
+                const data = layer.getData(e.pixel);
+                // TODO: Handle dataviews?
+                if (!data || data instanceof DataView) {
+                    return;
+                }
+                const bandValues = {};
+                // Data is an array of band values
+                for (let i = 0; i < data.length - 1; i++) {
+                    bandValues[`Band ${i + 1}`] = data[i];
+                }
+                // last element is alpha
+                bandValues['Alpha'] = data[data.length - 1];
+                this._model.syncIdentifiedFeatures([bandValues], this._mainViewModel.id);
+                break;
+            }
+        }
+    }
     render() {
-        return (React.createElement("div", { className: "jGIS-Mainview", style: {
-                border: this.state.remoteUser
-                    ? `solid 3px ${this.state.remoteUser.color}`
-                    : 'unset'
-            } },
-            React.createElement(Spinner, { loading: this.state.loading }),
-            React.createElement("div", { ref: this.divRef, style: {
-                    width: '100%',
-                    height: 'calc(100%)'
-                } })));
+        return (React.createElement(React.Fragment, null,
+            Object.entries(this.state.annotations).map(([key, annotation]) => {
+                if (!this._model.annotationModel) {
+                    return null;
+                }
+                const screenPosition = this._computeAnnotationPosition(annotation);
+                return (screenPosition && (React.createElement("div", { key: key, id: key, style: {
+                        left: screenPosition.x,
+                        top: screenPosition.y
+                    }, className: 'jGIS-Popup-Wrapper' },
+                    React.createElement(AnnotationFloater, { itemId: key, annotationModel: this._model.annotationModel, open: false }))));
+            }),
+            React.createElement("div", { className: "jGIS-Mainview", style: {
+                    border: this.state.remoteUser
+                        ? `solid 3px ${this.state.remoteUser.color}`
+                        : 'unset'
+                } },
+                React.createElement(Spinner, { 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: 'calc(100%)'
+                    } }))));
     }
 }