Vector tile source draft

martinRenou · martinRenou · commit fb4198463014 · 2024-07-11T10:24:18.000+02:00
diff --git a/examples/buildings.jGIS b/examples/buildings.jGIS
@@ -0,0 +1,53 @@
+{
+  "layers": {
+    "f99eb7b0-5e38-4078-b310-36a0746472aa": {
+      "visible": true,
+      "name": "OpenStreetMap.Mapnik Layer",
+      "parameters": {
+        "source": "ed8628b0-3e0a-45d5-9cd0-65e2a7dd61f5"
+      },
+      "type": "RasterLayer"
+    },
+    "148f2fb3-3077-4dcb-8d70-831570d5021f": {
+      "type": "VectorLayer",
+      "parameters": {
+        "type": "line",
+        "source": "7a7ee6fd-c1e2-4c5d-a4e2-a7974db138a4"
+      },
+      "name": "Vector Tile Source Layer",
+      "visible": true
+    }
+  },
+  "sources": {
+    "ed8628b0-3e0a-45d5-9cd0-65e2a7dd61f5": {
+      "parameters": {
+        "urlParameters": {},
+        "provider": "OpenStreetMap",
+        "minZoom": 0.0,
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "attribution": "(C) OpenStreetMap contributors",
+        "maxZoom": 19.0
+      },
+      "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
+  },
+  "layerTree": [
+    "f99eb7b0-5e38-4078-b310-36a0746472aa",
+    "148f2fb3-3077-4dcb-8d70-831570d5021f"
+  ]
+}
diff --git a/examples/test.jGIS b/examples/test.jGIS
@@ -1,6 +1,7 @@
 {
   "layers": {
     "57ef55ef-facb-48a2-ae1d-c9c824be3e8a": {
+<<<<<<< HEAD
       "parameters": {
         "source": "7d082e75-69d5-447a-82d8-b05cca5945ba",
         "type": "line",
@@ -17,6 +18,16 @@
       "name": "Open Topo Map",
       "parameters": {
         "source": "5fd42e3b-4681-4607-b15d-65c3a3e89b32"
+=======
+      "visible": true,
+      "name": "Regions France",
+      "type": "VectorLayer",
+      "parameters": {
+        "color": "#26a269",
+        "source": "7d082e75-69d5-447a-82d8-b05cca5945ba",
+        "opacity": 1.0,
+        "type": "line"
+>>>>>>> c391a08 (Vector tile source draft)
       }
     },
     "2467576f-b527-4cb7-998d-fa1d056fb8a1": {
@@ -26,9 +37,29 @@
       "type": "RasterLayer",
       "name": "Open Street Map",
       "visible": true
+    },
+    "a0044fd7-f167-445f-b3d1-620a8f94b498": {
+      "parameters": {
+        "source": "5fd42e3b-4681-4607-b15d-65c3a3e89b32"
+      },
+      "visible": true,
+      "name": "Open Topo Map",
+      "type": "RasterLayer"
+    },
+    "2112ce98-3cbb-4fae-bbff-655ee8cf205f": {
+      "visible": true,
+      "parameters": {
+        "color": "#FF0000",
+        "opacity": 1.0,
+        "type": "fill",
+        "source": "d52ab506-fd28-4708-b557-28b2b081ea20"
+      },
+      "name": "Vector layer test Layer",
+      "type": "VectorLayer"
     }
   },
   "sources": {
+<<<<<<< HEAD
     "5fd42e3b-4681-4607-b15d-65c3a3e89b32": {
       "name": "Open Topo Map",
       "parameters": {
@@ -37,6 +68,16 @@
         "maxZoom": 24.0
       },
       "type": "RasterSource"
+=======
+    "d52ab506-fd28-4708-b557-28b2b081ea20": {
+      "name": "Vector layer test",
+      "type": "VectorTileSource",
+      "parameters": {
+        "minZoom": null,
+        "maxZoom": null,
+        "url": "https://planetarycomputer.microsoft.com/api/data/v1/vector/collections/ms-buildings/tilesets/global-footprints/tiles/{z}/{x}/{y}"
+      }
+>>>>>>> c391a08 (Vector tile source draft)
     },
     "7d082e75-69d5-447a-82d8-b05cca5945ba": {
       "name": "france_regions",
@@ -46,14 +87,33 @@
       },
       "type": "GeoJSONSource"
     },
+    "5fd42e3b-4681-4607-b15d-65c3a3e89b32": {
+      "name": "Open Topo Map",
+      "parameters": {
+        "url": "https://tile.opentopomap.org/{z}/{x}/{y}.png ",
+        "maxZoom": 24.0,
+        "minZoom": 0.0
+      },
+      "type": "RasterSource"
+    },
     "699facc9-e7c4-4f38-acf1-1fd7f02d9f36": {
+<<<<<<< HEAD
       "type": "RasterSource",
       "name": "Open Street Map",
       "parameters": {
         "minZoom": 0.0,
         "maxZoom": 24.0,
         "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
       }
+=======
+      "name": "Open Street Map",
+      "parameters": {
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "minZoom": 0.0,
+        "maxZoom": 24.0
+      },
+      "type": "RasterSource"
+>>>>>>> c391a08 (Vector tile source draft)
     }
   },
   "options": {
@@ -64,16 +124,17 @@
   "layerTree": [
     "a0044fd7-f167-445f-b3d1-620a8f94b498",
     {
-      "name": "level 1 group",
       "layers": [
         "2467576f-b527-4cb7-998d-fa1d056fb8a1",
         {
-          "name": "level 2 group",
           "layers": [
             "57ef55ef-facb-48a2-ae1d-c9c824be3e8a"
-          ]
+          ],
+          "name": "level 2 group"
         }
-      ]
-    }
+      ],
+      "name": "level 1 group"
+    },
+    "2112ce98-3cbb-4fae-bbff-655ee8cf205f"
   ]
 }
diff --git a/packages/base/src/commands.ts b/packages/base/src/commands.ts
@@ -37,6 +37,9 @@ export namespace CommandIDs {
 
   export const newGeoJSONLayer = 'jupytergis:newGeoJSONLayer';
   export const newGeoJSONSource = 'jupytergis:newGeoJSONSource';
+
+  export const newVectorTileLayer = 'jupytergis:newVectorTileLayer';
+
   export const newVectorLayer = 'jupytergis:newVectorLayer';
 }
 
@@ -125,6 +128,17 @@ export function addCommands(
     execute: Private.createVectorLayer(tracker)
   });
 
+  commands.addCommand(CommandIDs.newVectorTileLayer, {
+    label: trans.__('New vector tile layer'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    iconClass: 'fa fa-vector-square',
+    execute: Private.createVectorTileLayer(tracker)
+  });
+
   commands.addCommand(CommandIDs.newGeoJSONSource, {
     label: trans.__('Add GeoJSON data from file'),
     isEnabled: () => {
@@ -200,6 +214,71 @@ namespace Private {
     };
   }
 
+  export function createVectorTileLayer(
+    tracker: WidgetTracker<JupyterGISWidget>
+  ) {
+    return async (args: any) => {
+      const current = tracker.currentWidget;
+
+      if (!current) {
+        return;
+      }
+
+      const form = {
+        title: 'Raster Layer parameters',
+        default: (model: IJupyterGISModel) => {
+          return {
+            name: 'Vector Tile Source',
+            url: 'https://planetarycomputer.microsoft.com/api/data/v1/vector/collections/ms-buildings/tilesets/global-footprints/tiles/{z}/{x}/{y}',
+            maxZoom: 24,
+            minZoom: 0
+          };
+        }
+      };
+
+      const dialog = new FormDialog({
+        context: current.context,
+        title: form.title,
+        sourceData: form.default(current.context.model),
+        schema: FORM_SCHEMA['VectorTileSource'],
+        syncData: (props: IDict) => {
+          const sharedModel = current.context.model.sharedModel;
+          if (!sharedModel) {
+            return;
+          }
+
+          const { name, ...parameters } = props;
+
+          const sourceId = UUID.uuid4();
+
+          const sourceModel: IJGISSource = {
+            type: 'VectorTileSource',
+            name,
+            parameters: {
+              url: parameters.url,
+              minZoom: parameters.minZoom,
+              maxZoom: parameters.maxZoom
+            }
+          };
+
+          const layerModel: IJGISLayer = {
+            type: 'VectorLayer',
+            parameters: {
+              type: 'line',
+              source: sourceId
+            },
+            visible: true,
+            name: name + ' Layer'
+          };
+
+          sharedModel.addSource(sourceId, sourceModel);
+          current.context.model.addLayer(UUID.uuid4(), layerModel);
+        }
+      });
+      await dialog.launch();
+    };
+  }
+
   /**
    * Command to create a GeoJSON source.
    *
diff --git a/packages/base/src/mainview/mainview.tsx b/packages/base/src/mainview/mainview.tsx
@@ -166,6 +166,16 @@ export class MainView extends React.Component<IProps, IStates> {
         }
         break;
       }
+      case 'VectorTileSource': {
+        const mapSource = this._Map.getSource(id) as MapLibre.VectorTileSource;
+        if (!mapSource) {
+          this._Map.addSource(id, {
+            type: 'vector',
+            tiles: [this.computeSourceUrl(source)]
+          });
+        }
+        break;
+      }
       case 'GeoJSONSource': {
         const mapSource = this._Map.getSource(id) as MapLibre.GeoJSONSource;
         if (!mapSource) {
@@ -223,6 +233,12 @@ export class MainView extends React.Component<IProps, IStates> {
         ]);
         break;
       }
+      case 'VectorTileSource': {
+        (mapSource as MapLibre.RasterTileSource).setTiles([
+          this.computeSourceUrl(source)
+        ]);
+        break;
+      }
       case 'GeoJSONSource': {
         const data =
           source.parameters?.data ||
@@ -364,7 +380,8 @@ export class MainView extends React.Component<IProps, IStates> {
         this._Map.addLayer(
           {
             id: id,
-            type: vectorLayerType,
+            type: 'line',
+            "source-layer": 'buildings',
             layout: {
               visibility: layer.visible ? 'visible' : 'none'
             },
@@ -374,18 +391,18 @@ export class MainView extends React.Component<IProps, IStates> {
           },
           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,
+        //   `${vectorLayerType}-color`,
+        //   layer.parameters?.color !== undefined
+        //     ? layer.parameters.color
+        //     : '#FF0000'
+        // );
+        // this._Map.setPaintProperty(
+        //   id,
+        //   `${vectorLayerType}-opacity`,
+        //   layer.parameters?.opacity !== undefined ? layer.parameters.opacity : 1
+        // );
         break;
       }
     }
diff --git a/packages/base/src/toolbar/widget.tsx b/packages/base/src/toolbar/widget.tsx
@@ -55,6 +55,15 @@ export class ToolbarWidget extends Toolbar {
 
       this.addItem('separator1', new Separator());
 
+      this.addItem(
+        'newVectorTileLayer',
+        new CommandToolbarButton({
+          id: CommandIDs.newVectorTileLayer,
+          label: '',
+          commands: options.commands
+        })
+      );
+
       this.addItem(
         'openLayerBrowser',
         new CommandToolbarButton({
diff --git a/packages/schema/src/schema/jgis.json b/packages/schema/src/schema/jgis.json
@@ -24,7 +24,7 @@
     },
     "sourceType": {
       "type": "string",
-      "enum": ["RasterSource", "GeoJSONSource"]
+      "enum": ["RasterSource", "VectorTileSource", "GeoJSONSource"]
     },
     "jGISLayer": {
       "title": "IJGISLayer",
diff --git a/packages/schema/src/schema/vectorLayer.json b/packages/schema/src/schema/vectorLayer.json
@@ -12,6 +12,7 @@
     "type": {
       "type": "string",
       "enum": ["circle", "fill", "line"],
+      "default": "line",
       "description": "The type of vector layer"
     },
     "color": {
diff --git a/packages/schema/src/schema/vectortilesource.json b/packages/schema/src/schema/vectortilesource.json
