Add a layers panel

examples/test.jGIS

@@ -1,24 +1,76 @@
 {
-  "sources": {
-    "699facc9-e7c4-4f38-acf1-1fd7f02d9f36": {
-      "type": "RasterSource",
-      "name": "RasterSource",
+  "layers": {
+    "a0044fd7-f167-445f-b3d1-620a8f94b498": {
+      "visible": true,
+      "name": "Open Topo Map",
+      "type": "RasterLayer",
       "parameters": {
-        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-        "minZoom": 0,
-        "maxZoom": 24
+        "source": "5fd42e3b-4681-4607-b15d-65c3a3e89b32"
       }
-    }
-  },
-  "layers": {
+    },
     "2467576f-b527-4cb7-998d-fa1d056fb8a1": {
-      "type": "RasterLayer",
+      "name": "Open Street Map",
+      "visible": true,
       "parameters": {
         "source": "699facc9-e7c4-4f38-acf1-1fd7f02d9f36"
       },
+      "type": "RasterLayer"
+    },
+    "a5ac7671-74bb-4c99-a494-916348397d01": {
       "visible": true,
-      "name": "RasterSource Layer"
+      "parameters": {
+        "source": "f22850a8-bfd5-4dfb-ba1e-c3f2c3ccf93b"
+      },
+      "name": "Open Street Map 2",
+      "type": "RasterLayer"
     }
   },
-  "options": {}
+  "sources": {
+    "699facc9-e7c4-4f38-acf1-1fd7f02d9f36": {
+      "parameters": {
+        "maxZoom": 24.0,
+        "minZoom": 0.0,
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+      },
+      "type": "RasterSource",
+      "name": "Open Street Map"
+    },
+    "f22850a8-bfd5-4dfb-ba1e-c3f2c3ccf93b": {
+      "name": "Open Street Map 2",
+      "parameters": {
+        "maxZoom": 24.0,
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "minZoom": 0.0
+      },
+      "type": "RasterSource"
+    },
+    "5fd42e3b-4681-4607-b15d-65c3a3e89b32": {
+      "name": "Open Topo Map",
+      "type": "RasterSource",
+      "parameters": {
+        "minZoom": 0.0,
+        "url": "https://tile.opentopomap.org/{z}/{x}/{y}.png ",
+        "maxZoom": 24.0
+      }
+    }
+  },
+  "options": {},
+  "layerTree": {
+    "layers": [
+      "2467576f-b527-4cb7-998d-fa1d056fb8a1",
+      {
+        "layers": [
+          "a0044fd7-f167-445f-b3d1-620a8f94b498",
+          {
+            "name": "level 2 group",
+            "layers": [
+              "a5ac7671-74bb-4c99-a494-916348397d01"
+            ]
+          }
+        ],
+        "name": "level 1 group"
+      }
+    ],
+    "name": ""
+  }
 }

packages/base/src/icons.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+// This file is based on iconimports.ts in @jupyterlab/ui-components, but is manually generated.
+
+import { LabIcon } from '@jupyterlab/ui-components';
+
+import rasterSvgStr from '../style/icons/raster.svg';
+import visibilitySvgStr from '../style/icons/visibility.svg';
+import nonVisibilitySvgStr from '../style/icons/nonvisibility.svg';
+
+export const rasterIcon = new LabIcon({
+  name: 'jupytergis::raster',
+  svgstr: rasterSvgStr
+});
+
+export const visibilityIcon = new LabIcon({
+  name: 'jupytergis::visibility',
+  svgstr: visibilitySvgStr
+});
+
+export const nonVisibilityIcon = new LabIcon({
+  name: 'jupytergis::nonVisibility',
+  svgstr: nonVisibilitySvgStr
+});

packages/base/src/mainview/mainview.tsx

@@ -158,13 +158,26 @@ export class MainView extends React.Component<IProps, IStates> {
             // TODO If the source already existed, update it
           }
 
-          this._Map.addLayer({
-            id: layerId,
-            type: 'raster',
-            source: sourceId,
-            minzoom: source.minZoom || 0,
-            maxzoom: source.maxZoom || 24
-          });
+          const mapLayer = this._Map.getLayer(layerId);
+          if (!mapLayer) {
+            this._Map.addLayer({
+              id: layerId,
+              type: 'raster',
+              layout: {
+                visibility: layer.visible ? 'visible' : 'none'
+              },
+              source: sourceId,
+              minzoom: source.minZoom || 0,
+              maxzoom: source.maxZoom || 24
+            });
+          } else {
+            mapLayer.source = sourceId;
+            this._Map.setLayoutProperty(
+              layerId,
+              'visibility',
+              layer.visible ? 'visible' : 'none'
+            );
+          }
         }
       }
     }