Add back ShapeFile Support (#141)

* Add back ShapeFile Support

* Lint

Author: arjxn-py

packages/base/package.json

@@ -79,6 +79,7 @@
   "devDependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.9",
     "@types/node": "^18.15.11",
+    "@types/shpjs": "^3.4.7",
     "@types/three": "^0.135.0",
     "@types/uuid": "^10.0.0",
     "rimraf": "^3.0.2",

packages/base/src/mainview/mainView.tsx

@@ -19,6 +19,7 @@ import {
   IVectorLayer,
   IVectorTileLayer,
   IVectorTileSource,
+  IShapefileSource,
   IWebGlLayer,
   JupyterGISModel
 } from '@jupytergis/schema';
@@ -55,6 +56,7 @@ import * as React from 'react';
 import { isLightTheme } from '../tools';
 import { MainViewModel } from './mainviewmodel';
 import { Spinner } from './spinner';
+import shp from 'shpjs';
 
 interface IProps {
   viewModel: MainViewModel;
@@ -221,6 +223,21 @@ export class MainView extends React.Component<IProps, IStates> {
     }
   }
 
+  private async _loadShapefileAsGeoJSON(
+    url: string
+  ): Promise<GeoJSON.FeatureCollection | GeoJSON.FeatureCollection[]> {
+    try {
+      const response = await fetch(`/jupytergis_core/proxy?url=${url}`);
+      const arrayBuffer = await response.arrayBuffer();
+      const geojson = await shp(arrayBuffer);
+
+      return geojson;
+    } catch (error) {
+      console.error('Error loading shapefile:', error);
+      throw error;
+    }
+  }
+
   /**
    * Add a source in the map.
    *
@@ -305,6 +322,22 @@ export class MainView extends React.Component<IProps, IStates> {
 
         break;
       }
+      case 'ShapefileSource': {
+        const parameters = source.parameters as IShapefileSource;
+
+        const geojson = await this._loadShapefileAsGeoJSON(parameters.path);
+        const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
+
+        const format = new GeoJSON();
+
+        newSource = new VectorSource({
+          features: format.readFeatures(geojsonData, {
+            dataProjection: 'EPSG:4326',
+            featureProjection: this._Map.getView().getProjection()
+          })
+        });
+        break;
+      }
       case 'ImageSource': {
         const sourceParameters = source.parameters as IImageSource;
 

yarn.lock

@@ -898,6 +898,7 @@ __metadata:
     "@rjsf/core": ^4.2.0
     "@types/d3-color": ^3.1.0
     "@types/node": ^18.15.11
+    "@types/shpjs": ^3.4.7
     "@types/three": ^0.135.0
     "@types/uuid": ^10.0.0
     ajv: ^8.14.0
@@ -3255,6 +3256,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/shpjs@npm:^3.4.7":
+  version: 3.4.7
+  resolution: "@types/shpjs@npm:3.4.7"
+  dependencies:
+    "@types/geojson": "*"
+    "@types/node": "*"
+  checksum: da6883f802e50bddfc00ae6446bee3947e76d56b01b8e633fd4be565b4021365dca35a3f8949f64f7e1e86c076a3afaeae75ee8e0563115425b56dd8137c0f40
+  languageName: node
+  linkType: hard
+
 "@types/source-list-map@npm:*":
   version: 0.1.6
   resolution: "@types/source-list-map@npm:0.1.6"