Indicate the point being identified on GeoTiFF (#659)

* Indicate the point being identified on GeoTiFF

* lint

* disable highlight button of geotiff

Author: arjxn-py

packages/base/src/mainview/mainView.tsx

@@ -85,7 +85,7 @@ import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
 import { MainViewModel } from './mainviewmodel';
 import { Spinner } from './spinner';
-import { Geometry } from 'ol/geom';
+import { Geometry, Point } from 'ol/geom';
 
 interface IProps {
   viewModel: MainViewModel;
@@ -1295,24 +1295,31 @@ export class MainView extends React.Component<IProps, IStates> {
     });
   }
 
-  private highlightFeatureOnMap(sender: IJupyterGISModel, feature: any): void {
-    console.log('highlightFeatureOnMap', feature);
+  private highlightFeatureOnMap(
+    sender: IJupyterGISModel,
+    featureOrGeometry: any
+  ): void {
+    const geometry =
+      featureOrGeometry?.geometry ||
+      featureOrGeometry?._geometry ||
+      featureOrGeometry;
 
-    const geometry = feature._geometry || feature.geometry;
     if (!geometry) {
-      console.warn('No geometry found on feature:', feature);
+      console.warn('No geometry found in feature:', featureOrGeometry);
       return;
     }
 
     const isOlGeometry = typeof geometry.getCoordinates === 'function';
 
+    const parsedGeometry = isOlGeometry
+      ? geometry
+      : new GeoJSON().readGeometry(geometry, {
+          featureProjection: this._Map.getView().getProjection()
+        });
+
     const olFeature = new Feature({
-      geometry: isOlGeometry
-        ? geometry
-        : new GeoJSON().readGeometry(geometry, {
-            featureProjection: this._Map.getView().getProjection()
-          }),
-      ...feature
+      geometry: parsedGeometry,
+      ...(geometry !== featureOrGeometry ? featureOrGeometry : {})
     });
 
     if (!this._highlightLayer) {
@@ -1925,6 +1932,12 @@ export class MainView extends React.Component<IProps, IStates> {
           this._mainViewModel.id
         );
 
+        const coordinate = this._Map.getCoordinateFromPixel(e.pixel);
+        const point = new Point(coordinate);
+
+        // trigger highlight via signal
+        this._model.highlightFeatureSignal.emit(point);
+
         break;
       }
     }

packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx

@@ -176,16 +176,31 @@ const IdentifyPanelComponent = ({
                 <span>Feature {featureIndex + 1}</span>
               </span>
 
-              <button
-                className="jgis-highlight-button"
-                onClick={e => {
-                  e.stopPropagation();
-                  highlightFeatureOnMap(feature);
-                }}
-                title="Highlight feature on map"
-              >
-                <FontAwesomeIcon icon={faMagnifyingGlass} />
-              </button>
+              {(() => {
+                const isRasterFeature =
+                  !feature.geometry &&
+                  !feature._geometry &&
+                  typeof feature?.x !== 'number' &&
+                  typeof feature?.y !== 'number';
+
+                return (
+                  <button
+                    className="jgis-highlight-button"
+                    onClick={e => {
+                      e.stopPropagation();
+                      highlightFeatureOnMap(feature);
+                    }}
+                    title={
+                      isRasterFeature
+                        ? 'Highlight not available for raster features'
+                        : 'Highlight feature on map'
+                    }
+                    disabled={isRasterFeature}
+                  >
+                    <FontAwesomeIcon icon={faMagnifyingGlass} />
+                  </button>
+                );
+              })()}
             </div>
             {visibleFeatures[featureIndex] && (
               <>

python/jupytergis_lab/style/base.css

@@ -773,3 +773,9 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
 .jgis-highlight-button:hover {
   color: var(--jp-brand-color1);
 }
+
+.jgis-highlight-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: auto;
+}