Working example to be polished

Author: martinRenou

examples/buildings.jGIS

@@ -1,50 +1,53 @@
 {
   "layers": {
-    "f99eb7b0-5e38-4078-b310-36a0746472aa": {
+    "148f2fb3-3077-4dcb-8d70-831570d5021f": {
       "visible": true,
-      "name": "OpenStreetMap.Mapnik Layer",
+      "name": "Vector Tile Source Layer",
       "parameters": {
-        "source": "ed8628b0-3e0a-45d5-9cd0-65e2a7dd61f5"
+        "source": "7a7ee6fd-c1e2-4c5d-a4e2-a7974db138a4",
+        "color": "green",
+        "type": "line",
+        "opacity": 1.0,
+        "sourceLayer": "bingmlbuildings"
       },
-      "type": "RasterLayer"
+      "type": "VectorLayer"
     },
-    "148f2fb3-3077-4dcb-8d70-831570d5021f": {
-      "type": "VectorLayer",
+    "f99eb7b0-5e38-4078-b310-36a0746472aa": {
       "parameters": {
-        "type": "line",
-        "source": "7a7ee6fd-c1e2-4c5d-a4e2-a7974db138a4"
+        "source": "ed8628b0-3e0a-45d5-9cd0-65e2a7dd61f5"
       },
-      "name": "Vector Tile Source Layer",
-      "visible": true
+      "visible": true,
+      "type": "RasterLayer",
+      "name": "OpenStreetMap.Mapnik Layer"
     }
   },
   "sources": {
+    "7a7ee6fd-c1e2-4c5d-a4e2-a7974db138a4": {
+      "name": "Vector Tile Source",
+      "parameters": {
+        "minZoom": 13.0,
+        "url": "https://planetarycomputer.microsoft.com/api/data/v1/vector/collections/ms-buildings/tilesets/global-footprints/tiles/{z}/{x}/{y}",
+        "maxZoom": 13.0
+      },
+      "type": "VectorTileSource"
+    },
     "ed8628b0-3e0a-45d5-9cd0-65e2a7dd61f5": {
       "parameters": {
-        "urlParameters": {},
         "provider": "OpenStreetMap",
-        "minZoom": 0.0,
         "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "maxZoom": 19.0,
         "attribution": "(C) OpenStreetMap contributors",
-        "maxZoom": 19.0
+        "minZoom": 0.0,
+        "urlParameters": {}
       },
       "type": "RasterSource",
       "name": "OpenStreetMap.Mapnik"
-    },
-    "7a7ee6fd-c1e2-4c5d-a4e2-a7974db138a4": {
-      "type": "VectorTileSource",
-      "name": "Vector Tile Source",
-      "parameters": {
-        "url": "https://planetarycomputer.microsoft.com/api/data/v1/vector/collections/ms-buildings/tilesets/global-footprints/tiles/{z}/{x}/{y}",
-        "minZoom": 0.0,
-        "maxZoom": 24.0
-      }
     }
   },
   "options": {
-    "latitude": 41.91867,
-    "longitude": -88.10602,
-    "zoom": 15.0
+    "longitude": -88.13435505719718,
+    "zoom": 14.558550718914468,
+    "latitude": 41.924770461743464
   },
   "layerTree": [
     "f99eb7b0-5e38-4078-b310-36a0746472aa",

packages/base/src/mainview/mainview.tsx

@@ -9,7 +9,9 @@ import {
   IJupyterGISDoc,
   IJupyterGISModel,
   IRasterSource,
-  JupyterGISModel
+  JupyterGISModel,
+  IVectorLayer,
+  IVectorTileSource
 } from '@jupytergis/schema';
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
@@ -169,8 +171,12 @@ export class MainView extends React.Component<IProps, IStates> {
       case 'VectorTileSource': {
         const mapSource = this._Map.getSource(id) as MapLibre.VectorTileSource;
         if (!mapSource) {
+          const parameters = source.parameters as IVectorTileSource;
           this._Map.addSource(id, {
             type: 'vector',
+            minzoom: parameters.minZoom,
+            maxzoom: parameters.maxZoom,
+            attribution: parameters.attribution || '',
             tiles: [this.computeSourceUrl(source)]
           });
         }
@@ -370,39 +376,34 @@ export class MainView extends React.Component<IProps, IStates> {
         break;
       }
       case 'VectorLayer': {
-        const vectorLayerType = layer.parameters?.type;
-        if (!vectorLayerType) {
-          showErrorMessage(
-            'Vector layer error',
-            'The vector layer type is undefined'
-          );
-        }
-        this._Map.addLayer(
-          {
-            id: id,
-            type: 'line',
-            "source-layer": 'buildings',
-            layout: {
-              visibility: layer.visible ? 'visible' : 'none'
-            },
-            source: sourceId,
-            minzoom: source.parameters?.minZoom || 0,
-            maxzoom: source.parameters?.maxZoom || 24
+        const parameters = layer.parameters as IVectorLayer;
+        const layerSpecification: MapLibre.AddLayerObject = {
+          id,
+          type: parameters.type,
+          layout: {
+            visibility: layer.visible ? 'visible' : 'none'
           },
+          source: sourceId,
+        };
+
+        parameters.sourceLayer && (layerSpecification['source-layer'] = parameters.sourceLayer);
+
+        this._Map.addLayer(
+          layerSpecification,
           beforeId
         );
-        // this._Map.setPaintProperty(
-        //   id,
-        //   `${vectorLayerType}-color`,
-        //   layer.parameters?.color !== undefined
-        //     ? layer.parameters.color
-        //     : '#FF0000'
-        // );
-        // this._Map.setPaintProperty(
-        //   id,
-        //   `${vectorLayerType}-opacity`,
-        //   layer.parameters?.opacity !== undefined ? layer.parameters.opacity : 1
-        // );
+        this._Map.setPaintProperty(
+          id,
+          `${parameters.type}-color`,
+          parameters.color !== undefined
+            ? parameters.color
+            : '#FF0000'
+        );
+        this._Map.setPaintProperty(
+          id,
+          `${parameters.type}-opacity`,
+          parameters.opacity !== undefined ? parameters.opacity : 1
+        );
         break;
       }
     }

packages/schema/src/schema/vectorLayer.json renamed to packages/schema/src/schema/vectorlayer.json

@@ -2,7 +2,7 @@
   "type": "object",
   "description": "VectorLayer",
   "title": "IVectorLayer",
-  "required": ["source"],
+  "required": ["source", "type"],
   "additionalProperties": false,
   "properties": {
     "source": {
@@ -15,6 +15,10 @@
       "default": "line",
       "description": "The type of vector layer"
     },
+    "sourceLayer": {
+      "type": "string",
+      "description": "The source layer to use"
+    },
     "color": {
       "type": "string",
       "description": "The color of the the object",

packages/schema/src/schema/vectortilesource.json

@@ -13,19 +13,16 @@
         "type": "number",
         "minimum": 0,
         "maximum": 24,
-        "readOnly": true,
         "description": "The maximum zoom level for the raster source"
       },
       "minZoom": {
         "type": "number",
         "minimum": 0,
         "maximum": 24,
-        "readOnly": true,
         "description": "The minimum zoom level for the raster source"
       },
       "attribution": {
         "type": "string",
-        "readOnly": true,
         "description": "The attribution for the raster source"
       },
       "provider": {

packages/schema/src/types.ts

@@ -1,6 +1,9 @@
 export * from './_interface/jgis';
 export * from './_interface/rasterlayer';
+export * from './_interface/vectorlayer';
 export * from './_interface/rastersource';
+export * from './_interface/vectortilesource';
+export * from './_interface/geojsonsource';
 export * from './interfaces';
 export * from './model';
 export * from './doc';