Add geojson Layer

showcase-dev/examples/datasource-geojson/datasource-geojson.html

@@ -0,0 +1,18 @@
+<style>
+    .file {
+        padding: 5px;
+        max-height: 250px;
+
+        overflow: auto;
+    }
+
+    body, html {
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+    }
+</style>
+<div class="text file">
+  <pre id="datasource-file"><code id="json-container">No DATA</code></pre>
+</div>
+<div id="container"></div>

showcase-dev/examples/datasource-geojson/datasource-geojson.js

@@ -0,0 +1,80 @@
+import File from 'osh-js/ext/datasource/file/File.datasource';
+import {EventType} from 'osh-js/core/event/EventType';
+// create data source for Android phone GPS
+import SosGetResult from 'osh-js/core/datasource/sos/SosGetResult.datasource.js';
+import PointMarkerLayer from 'osh-js/core/ui/layer/PointMarkerLayer.js';
+import PolylineLayer from 'osh-js/core/ui/layer/PolylineLayer.js';
+import DeckGlView from 'osh-js/core/ui/view/map/DeckGlView.js';
+import {TileLayer} from '@deck.gl/geo-layers';
+import {BitmapLayer} from '@deck.gl/layers';
+import {Mode} from 'osh-js/core/datasource/Mode';
+import GeoJSON from "osh-js/ext/ui/layer/GeoJSON";
+import DeckGlViewGeoJSON from "osh-js/ext/ui/view/DeckGlGeoJSON";
+
+
+const NB_FILES = 8;
+const files = ['./data/data.json'];
+
+const fileDatasource = new File('GeoJSON',{
+  paths: files,
+  batchSize: 5000
+});
+
+let geojsonLayer = new GeoJSON({
+  dataSourceId: fileDatasource.id,
+  getData: (rec) => {
+    console.log(rec);
+    return rec.data;
+  },
+});
+
+let deckglMapView = new DeckGlViewGeoJSON({
+      container: "container",
+      layers: [geojsonLayer],
+      deckProps: {
+        initialViewState: {
+          longitude: -122.28363249999997,
+          latitude:  37.87402129999999,
+          zoom: 13,
+          bearing: 0,
+          pitch: 20
+        },
+        layers: [
+          new TileLayer({
+            // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
+            data: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+            minZoom: 0,
+            maxZoom: 19,
+            tileSize: 256,
+
+            renderSubLayers: props => {
+              const {
+                bbox: {west, south, east, north}
+              } = props.tile;
+
+              return new BitmapLayer(props, {
+                data: null,
+                image: props.data,
+                bounds: [west, south, east, north]
+              });
+            }
+          }),
+        ]
+      },
+      autoZoomOnFirstMarker: false
+    }
+);
+
+const container = document.getElementById('json-container');
+fileDatasource.subscribe(async (message) => {
+  let dataEvent;
+  for (let i = 0; i < message.values.length; i++) {
+    dataEvent = message.values[i];
+    const str = JSON.stringify(dataEvent.data,null,2);
+    container.innerHTML = str;
+  }
+}, [EventType.DATA]);
+
+
+// start streaming onclick
+fileDatasource.connect();

showcase-dev/examples/datasource-geojson/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "osh-js",
+  "version": "1.3.3",
+  "description": "OSH javascript Toolkit",
+  "main": "osh.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/opensensorhub/osh-js.git"
+  },
+  "keywords": [
+    "OSH",
+    "Sensors",
+    "Toolkit",
+    "Javascript",
+    "GIS",
+    "Spatial",
+    "OGC",
+    "SensorML"
+  ],
+  "author": "OSH community",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/opensensorhub/osh-js/issues"
+  },
+  "homepage": "https://github.com/opensensorhub/osh-js#readme",
+  "scripts": {
+    "dev": "webpack-dev-server --config webpack.config.js --mode development --watch"
+  },
+  "devDependencies": {
+    "@loaders.gl/core": "2.3.7",
+    "@loaders.gl/csv": "2.3.7",
+    "@loaders.gl/json": "2.3.7",
+    "@loaders.gl/kml": "2.3.7",
+    "@loaders.gl/shapefile": "2.3.7",
+    "@loaders.gl/wkt": "2.3.7",
+    "clean-webpack-plugin": "3.0.0",
+    "copy-webpack-plugin": "5.1.1",
+    "css-loader": "3.4.2",
+    "file-loader": "5.1.0",
+    "html-webpack-plugin": "3.2.0",
+    "style-loader": "1.1.3",
+    "webpack": "4.42.0",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.10.3",
+    "worker-loader": "2.0.0"
+  },
+  "dependencies": {
+    "@deck.gl/core": "8.3.6",
+    "@deck.gl/layers": "8.3.6",
+    "@deck.gl/geo-layers": "8.3.6",
+    "@deck.gl/mesh-layers": "8.3.6",
+    "@math.gl/web-mercator": "3.3.2",
+    "deck.gl": "8.3.0"
+  }
+}

showcase-dev/examples/datasource-geojson/webpack.config.js

@@ -0,0 +1,84 @@
+/* webpack.config.js */
+
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+var path = require('path');
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+
+module.exports = {
+    // Tell Webpack which file kicks off our app.
+    entry: path.resolve(__dirname,'./datasource-geojson.js'),
+    // Tell Weback to output our bundle to ./dist/bundle.js
+    output: {
+        filename: 'bundle.datasource.geojson.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+    // Tell Webpack which directories to look in to resolve import statements.
+    // Normally Webpack will look in node_modules by default but since we’re overriding
+    // the property we’ll need to tell it to look there in addition to the
+    // bower_components folder.
+    resolve: {
+        modules: [
+            path.resolve(__dirname, 'node_modules'),
+        ],
+        alias: {
+            'osh-js': path.resolve(__dirname, '../../../source')
+        }
+    },
+    // These rules tell Webpack how to process different module types.
+    // Remember, *everything* is a module in Webpack. That includes
+    // CSS, and (thanks to our loader) HTML.
+    module: {
+        rules: [
+            {
+                test: /\.(png|svg|jpg|gif)$/,
+                use: [
+                    'file-loader',
+                ],
+            },{
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.worker\.js$/,
+                use: { loader: 'worker-loader', options: { name: 'WorkerName.[hash].js' } }
+            }
+        ]
+    },
+    // Enable the Webpack dev server which will build, serve, and reload our
+    // project on changes.
+    devServer: {
+        contentBase: path.join(__dirname, 'dist'),
+        compress: true,
+        port: 9000,
+        hot: true,
+        index: 'datasource-geojson.html',
+        https:false
+    },
+    devtool: 'source-map',
+    plugins: [
+        /**
+         * All files inside webpack's output.path directory will be removed once, but the
+         * directory itself will not be. If using webpack 4+'s default configuration,
+         * everything under <PROJECT_DIR>/dist/ will be removed.
+         * Use cleanOnceBeforeBuildPatterns to override this behavior.
+         *
+         * During rebuilds, all webpack assets that are not used anymore
+         * will be removed automatically.
+         *
+         * See `Options and Defaults` for information
+         */
+        new CleanWebpackPlugin(),
+        // This plugin will generate an index.html file for us that can be used
+        // by the Webpack dev server. We can give it a template file (written in EJS)
+        // and it will handle injecting our bundle for us.
+        new HtmlWebpackPlugin({
+            filename: "datasource-geojson.html",
+            template: path.resolve(__dirname, 'datasource-geojson.html')
+        }),
+        new CopyWebpackPlugin([
+            {from: path.resolve(__dirname,'data'), to: 'data', force:true},
+        ])
+    ]
+};

showcase-dev/index.js

@@ -67,9 +67,19 @@ var samples = [
         code: 'vue/App_examples/videodata-with-control-vuejs-synchronized.vue'
     },
     {
-        name: 'Add/Remove DataSource(s) to/from DataSynchronizer',
+        name: 'Add/Remove DataSource(s) to/from DataSynchronizer in Realtime mode',
         description: 'Add/Remove DataSource(s) to/from DataSynchronizer even if DataSynchronizer is running',
-        url: 'datasynchronizer-dynamic-add-remove'
+        url: 'datasynchronizer-dynamic-add-remove-realtime'
+    },
+    {
+        name: 'Add/Remove DataSource(s) to/from DataSynchronizer in REPLAY mode',
+        description: 'Add/Remove DataSource(s) to/from DataSynchronizer even if DataSynchronizer is running',
+        url: 'datasynchronizer-dynamic-add-remove-replay'
+    },
+    {
+        name: 'Read and display GeoJSON using generic Layer',
+        description: 'Read and display GeoJSON using generic Layer',
+        url: 'datasource-geojson'
     },
 ];
 

showcase-dev/webpack.config.js

@@ -86,7 +86,9 @@ let directories = [
     'multi-datasources-synchronized',
     'switch-realtime-batch',
     'videodata-with-control-vuejs-synchronized',
-    'datasynchronizer-dynamic-add-remove'
+    'datasynchronizer-dynamic-add-remove-realtime',
+    'datasynchronizer-dynamic-add-remove-replay',
+    'datasource-geojson'
 ];
 
 const plug = {};

source/core/datasource/TimeSeries.replay.datasource.js

@@ -215,7 +215,6 @@ class TimeSeriesReplayDatasource extends DataSource {
         // if(this.dataSynchronizer) {
         //     await this.dataSynchronizer.removeDataSource(this);
         // }
-
         this.init = undefined;
         this.dataSynchronizer = undefined;
         return this.checkInit();

source/core/sweapi/featureofinterest/FeatureOfInterests.js

@@ -19,6 +19,7 @@ import SensorWebApi from "../SensorWebApi";
 import Collection from "../Collection";
 import API from "../routes.conf";
 import SweCollectionDataParser from "../../parsers/sweapi/collection/SweCollectionDataParser";
+import SweApiFetchFeatureOfInterestParser from "../../parsers/sweapi/collection/SweApiFetchFeatureOfInterest.parser";
 
 class FeaturesOfInterest extends SensorWebApi {
     /**
@@ -32,7 +33,7 @@ class FeaturesOfInterest extends SensorWebApi {
      */
     constructor(networkProperties) {
         super(networkProperties);
-        this.sweCollectionDataParser = new SweCollectionDataParser(networkProperties);
+        this.sweApiFetchParser = new SweApiFetchFeatureOfInterestParser(networkProperties);
     }
 
     /**
@@ -44,7 +45,7 @@ class FeaturesOfInterest extends SensorWebApi {
      * @return {Promise<Collection<FeaturesOfInterest>>} - A Collection of FeaturesOfInterest
      */
     async searchFeaturesOfInterest(featureOfInterestFilter = new FeatureOfInterestFilter(), pageSize= 10) {
-        return new Collection(this.baseUrl() + API.fois, featureOfInterestFilter, pageSize,this.sweCollectionDataParser);
+        return new Collection(this.baseUrl() + API.fois.search, featureOfInterestFilter, pageSize,this.sweApiFetchParser);
     }
 
     /**

source/core/sweapi/routes.conf.js

@@ -48,8 +48,8 @@ const API = {
         by_id: '/observations/{id}',
     },
     fois: {
-        search: '/featuresOfInterest',
-        by_id: '/featuresOfInterest/{id}',
+        search: '/samplingFeatures',
+        by_id: '/samplingFeatures/{id}',
     },
 };
 

source/core/timesync/replay/DataSynchronizer.replay.js

@@ -317,14 +317,12 @@ class DataSynchronizerReplay {
      * @param {TimeSeriesDataSource} dataSource - the new datasource to add
      */
     async addDataSource(dataSource) {
-        console.log(this.dataSources.map(ds => ds.id).includes(dataSource.id))
         if(!this.dataSources.map(ds => ds.id).includes(dataSource.id)) {
             this.dataSources.push(dataSource);
             this.computeMinMax();
             console.log('time changed');
             if (!this.initialized) {
                 console.log(`DataSynchronizer not initialized yet, add DataSource ${dataSource.id} as it`);
-                console.log('ici')
                 this.timeChanged();
                 this.onAddedDataSource(dataSource.id);
                 return new Promise((resolve, reject) => {
@@ -562,10 +560,12 @@ class DataSynchronizerReplay {
      * Resets reference time
      */
     async reset() {
-        await this.checkInit();
-        return this.synchronizerWorker.postMessageWithAck({
-            message: 'reset'
-        }).then(() => this.resetTimes());
+        if(isDefined(this.synchronizerWorker)) {
+            await this.checkInit();
+            return this.synchronizerWorker.postMessageWithAck({
+                message: 'reset'
+            }).then(() => this.resetTimes());
+        } else return this.checkInit();
     }
 
     async getCurrentTime() {

source/ext/datasource/file/File.handler.js

@@ -21,6 +21,12 @@ class FileHandler extends DataSourceHandler {
     createContext(properties) {
         return new FileContext();
     }
+
+    flushAll() {
+        while(this.values.length > 0) {
+            this.flush();
+        }
+    }
 }
 
 export default FileHandler;

source/ext/parsers/File.parser.js

@@ -2,7 +2,7 @@ import {registerLoaders, selectLoader} from '@loaders.gl/core';
 import {CSVLoader} from '@loaders.gl/csv';
 import {ShapefileLoader} from '@loaders.gl/shapefile';
 import {KMLLoader} from '@loaders.gl/kml';
-import {JSONLoader} from '@loaders.gl/json';
+import {JSONLoader, GeoJSONLoader} from '@loaders.gl/json';
 import {WKTLoader} from '@loaders.gl/wkt';
 import {parse} from '@loaders.gl/core';
 
@@ -21,7 +21,11 @@ class FileParser {
      * @return {Object} the parsed data
      */
     async parseDataBlock(data) {
-        return parse(data);
+        try {
+            return parse(data);
+        }catch (error) {
+            return data;
+        }
     }
 }