Add support for 3d displays

examples/3d_terrain.jGIS

@@ -0,0 +1,56 @@
+{
+  "layerTree": [
+    "a82ef521-e727-4209-a5a0-145d66f18a06",
+    "c4fe5c17-c637-4012-bc67-055982e8f61f"
+  ],
+  "layers": {
+    "a82ef521-e727-4209-a5a0-145d66f18a06": {
+      "name": "OpenStreetMap.Mapnik Layer",
+      "parameters": {
+        "source": "ceef4036-b757-44bf-8a21-42c6c99dab72"
+      },
+      "type": "RasterLayer",
+      "visible": true
+    },
+    "c4fe5c17-c637-4012-bc67-055982e8f61f": {
+      "name": "Hillshade Layer Layer",
+      "parameters": {
+        "shadowColor": "#473B24",
+        "source": "cffe76e7-fa97-445a-98dc-a2861f5782ca"
+      },
+      "type": "HillshadeLayer",
+      "visible": true
+    }
+  },
+  "options": {
+    "latitude": 47.53711455298446,
+    "longitude": 11.666887524637332,
+    "zoom": 10.265810972484879
+  },
+  "sources": {
+    "ceef4036-b757-44bf-8a21-42c6c99dab72": {
+      "name": "OpenStreetMap.Mapnik",
+      "parameters": {
+        "attribution": "(C) OpenStreetMap contributors",
+        "maxZoom": 19.0,
+        "minZoom": 0.0,
+        "provider": "OpenStreetMap",
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "urlParameters": {}
+      },
+      "type": "RasterSource"
+    },
+    "cffe76e7-fa97-445a-98dc-a2861f5782ca": {
+      "name": "Terrain tile source",
+      "parameters": {
+        "tileSize": 256.0,
+        "url": "https://demotiles.maplibre.org/terrain-tiles/tiles.json"
+      },
+      "type": "RasterDemSource"
+    }
+  },
+  "terrain": {
+    "exaggeration": 0.5,
+    "source": "cffe76e7-fa97-445a-98dc-a2861f5782ca"
+  }
+}

packages/base/src/commands.ts

@@ -7,12 +7,12 @@ import {
   SelectionType
 } from '@jupytergis/schema';
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import { showErrorMessage, WidgetTracker } from '@jupyterlab/apputils';
+import { WidgetTracker, showErrorMessage } from '@jupyterlab/apputils';
 import { ITranslator } from '@jupyterlab/translation';
-
 import { CommandIDs, icons } from './constants';
-import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
 import { CreationFormDialog } from './dialogs/formdialog';
+import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
+import { TerrainDialogWidget } from './dialogs/terrainDialog';
 import { JupyterGISWidget } from './widget';
 
 /**
@@ -149,6 +149,17 @@ export function addCommands(
       });
     }
   });
+
+  commands.addCommand(CommandIDs.newRasterDemSource, {
+    label: trans.__('Raster DEM'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    execute: Private.createRasterDemSource(tracker, formSchemaRegistry)
+  });
+
   /**
    * LAYERS and LAYER GROUPS only commands.
    */
@@ -286,6 +297,43 @@ export function addCommands(
     execute: Private.createVectorLayer(tracker, formSchemaRegistry),
     ...icons.get(CommandIDs.newVectorLayer)
   });
+
+  commands.addCommand(CommandIDs.newHillshadeLayer, {
+    label: trans.__('Hillshade'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    execute: Private.createHillshadeLayer(tracker, formSchemaRegistry)
+  });
+
+  commands.addCommand(CommandIDs.newTerrain, {
+    label: trans.__('New Terrain'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    iconClass: 'fa fa-mountain',
+    execute: Private.createTerrainDialog(tracker)
+  });
+
+  commands.addCommand(CommandIDs.removeTerrain, {
+    label: trans.__('Remove Terrain'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    iconClass: 'fa fa-mountain',
+    execute: () => {
+      tracker.currentWidget?.context.model.setTerrain({
+        source: '',
+        exaggeration: 0
+      });
+    }
+  });
 }
 
 namespace Private {
@@ -310,6 +358,23 @@ namespace Private {
     };
   }
 
+  export function createTerrainDialog(
+    tracker: WidgetTracker<JupyterGISWidget>
+  ) {
+    return async () => {
+      const current = tracker.currentWidget;
+
+      if (!current) {
+        return;
+      }
+
+      const dialog = new TerrainDialogWidget({
+        context: current.context
+      });
+      await dialog.launch();
+    };
+  }
+
   /**
    * Command to create a GeoJSON source and vector layer.
    */
@@ -406,6 +471,36 @@ namespace Private {
     };
   }
 
+  export function createRasterDemSource(
+    tracker: WidgetTracker<JupyterGISWidget>,
+    formSchemaRegistry: IJGISFormSchemaRegistry
+  ) {
+    return async () => {
+      const current = tracker.currentWidget;
+      console.log('formSchemaRegistry', formSchemaRegistry);
+      console.log('current', current);
+
+      if (!current) {
+        return;
+      }
+
+      const dialog = new CreationFormDialog({
+        context: current.context,
+        title: 'Create Raster DEM Source',
+        createLayer: false,
+        createSource: true,
+        sourceData: {
+          name: 'Custom Raster DEM Source',
+          url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
+          tileSize: 256
+        },
+        sourceType: 'RasterDemSource',
+        formSchemaRegistry
+      });
+      await dialog.launch();
+    };
+  }
+
   /**
    * Command to create a Vector layer.
    *
@@ -438,6 +533,33 @@ namespace Private {
     };
   }
 
+  export function createHillshadeLayer(
+    tracker: WidgetTracker<JupyterGISWidget>,
+    formSchemaRegistry: IJGISFormSchemaRegistry
+  ) {
+    return async () => {
+      const current = tracker.currentWidget;
+
+      if (!current) {
+        return;
+      }
+
+      const dialog = new CreationFormDialog({
+        context: current.context,
+        title: 'Create Hillshade Layer',
+        createLayer: true,
+        createSource: false,
+        layerData: {
+          name: 'Custom Hillshade Layer'
+        },
+        sourceType: 'RasterDemSource',
+        layerType: 'HillshadeLayer',
+        formSchemaRegistry
+      });
+      await dialog.launch();
+    };
+  }
+
   export async function getUserInputForRename(
     text: HTMLElement,
     input: HTMLInputElement,

packages/base/src/constants.ts

@@ -1,5 +1,5 @@
 import { LabIcon, redoIcon, undoIcon } from '@jupyterlab/ui-components';
-import { geoJSONIcon, rasterIcon } from './icons';
+import { geoJSONIcon, moundIcon, rasterIcon } from './icons';
 
 /**
  * The command IDs.
@@ -13,9 +13,11 @@ export namespace CommandIDs {
   export const openLayerBrowser = 'jupytergis:openLayerBrowser';
   export const newGeoJSONLayer = 'jupytergis:newGeoJSONLayer';
   export const newVectorTileLayer = 'jupytergis:newVectorTileLayer';
+  export const newHillshadeLayer = 'jupytergis:newHillshadeLayer';
 
   // Sources only commands
   export const newGeoJSONSource = 'jupytergis:newGeoJSONSource';
+  export const newRasterDemSource = 'jupytergis:newRasterDemSource';
   export const removeSource = 'jupytergis:removeSource';
   export const renameSource = 'jupytergis:renameSource';
 
@@ -29,6 +31,9 @@ export namespace CommandIDs {
 
   export const moveLayersToGroup = 'jupytergis:moveLayersToGroup';
   export const moveLayerToNewGroup = 'jupytergis:moveLayerToNewGroup';
+
+  export const newTerrain = 'jupytergis:newTerrain';
+  export const removeTerrain = 'jupytergis:removeTerrain';
 }
 
 interface IRegisteredIcon {
@@ -47,7 +52,8 @@ const iconObject = {
   [CommandIDs.newGeoJSONLayer]: { icon: geoJSONIcon },
   [CommandIDs.newVectorTileLayer]: { iconClass: 'fa fa-vector-square' },
   [CommandIDs.newGeoJSONSource]: { icon: geoJSONIcon },
-  [CommandIDs.newVectorLayer]: { iconClass: 'fa fa-vector-square' }
+  [CommandIDs.newVectorLayer]: { iconClass: 'fa fa-vector-square' },
+  [CommandIDs.newHillshadeLayer]: { icon: moundIcon }
 };
 
 /**