planetfederal / spatialconnect-js

Javascript library for the Spatial Connect mobile library

SpatialConnect Javascript Library for Android & iOS

Version 0.10.0

Philosophy

The SpatialConnect javascript bridge is a cross platform solution for letting webviews access native functionality. This has a number of benefits pertaining to performance, security, and persistence to name a few. The request/response pattern is similar to the one way data flow paradigm found in the Flux architecture. A request occurs by calling an action in the library, and then all subscribers to the response observable will receive the result. The subscribers can use RxJS Observable instance methods to filter and operate on events that are emitted. We use the term spatial to refer to data with a finite number of dimensions. We use the term geospatial to refer to data with a finite number of dimensions where one of those dimensions have geographic coordinates.

Getting Started

Pull down dependencies

npm install

Run Tests

npm run test

Build distribution file

npm run build

Installation in your project

npm install spatialconnect

Usage in your project

In WebView

import * as sc from 'spatialconnect';

In React Native

import * as sc from 'spatialconnect/native';

Communicating with the Bridge

For iOS, JSON objects are sent to the SpatialConnect native library, and for Android, JSON is stringified and sent to the SpatialConnect native library. This is automatically detected in the library by using the user agent for each platform. The envelope for each message is as follows:

{
  "action":<integer>,
  "payload":<JSON Object>
}

Available Actions

DATASERVICE_ACTIVESTORESLIST = 100
DATASERVICE_ACTIVESTOREBYID = 101
DATASERVICE_SPATIALQUERY = 110
DATASERVICE_SPATIALQUERYALL = 111
DATASERVICE_GEOSPATIALQUERY = 112
DATASERVICE_GEOSPATIALQUERYALL = 113
DATASERVICE_CREATEFEATURE = 114
DATASERVICE_UPDATEFEATURE = 115
DATASERVICE_DELETEFEATURE = 116
DATASERVICE_FORMSLIST = 117
SENSORSERVICE_GPS = 200

These integer codes are bidirectional and are the same across platforms.

SpatialData Transmission

For sending and receiving geospatial data, the transmission format is using GeoJSON. You can encode geographic features like so:

var gj = {
  "type": "Feature",
  "properties": {
    "foo": "bar"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [ 10, 20 ]
  }
};
var store_name = 'a5d93796-5026-46f7-a2ff-e5dec85heh6b';
var layer_name = 'point_features';
var feature = sc.geometry(store_name, layer_name, gj);
sc.createFeature(feature).subscribe(function(f) {
  //add feature to OpenLayers map
  var gj = (new ol.format.GeoJSON()).readFeature(f);
  vectorSource.addFeature(gj);
});

You can also create non geographic features (spatial).

var properties = { foo: "bar" };
var feature = sc.spatialFeature(store_name, layer_name, properties);

Querying Data

Getting the current viewport from OpenLayers

var extent = map.getView().calculateExtent(map.getSize());
var filter = sc.Filter().geoBBOXContains(extent);
sc.geospatialQuery(filter);

var storeId = 'a5fdreg22';
var filter = { $gte : 5 };
sc.spatialQuery(filter,storeId); //For one Store
sc.spatialQuery(filter); //For all stores

The data responds on the query observable. All components (listview,map) wanting the data can subscribe to that observable

var that = this;
sc.spatialQuery().subscribe(
  (data) => {
    var gj = (new ol.format.GeoJSON()).readFeature(data);
    vectorSource.addFeature(gj);
  },
  (err) => {
    this.setState({
      error : err
    });
  },
  () => {
    this.setState({
      error : {}
    });
  }
);

Data Store Info

Get all stores

sc.stores().subscribe(
  (storesArray) => {
    setState({stores:storesArray});
  }
);

var storeId = 'afdse4';
sc.store(storeId).filter((s) => return s.storeId === storeId;)subscribe(
  (store) => {
    setState({storeInfo:store});
  }
);

Location Services

Location Services

sc.lastKnownLocation().subscribe(
  (loc) => { console.log(loc); }
);
sc.enableGPS();//Enables GPS
sc.disableGPS();//Disable GPS

Custom Actions

You can send arbitrary messages to the native bridge like so:

sc.action.sendMessage(998,payload);

spatialconnect-js's Issues

data store react native

i want to create data store in react native i found this in android sdk
To create a new data store you need to create a class that extends SCDataStore. Then you must update the config file /src/main/res/raw/scconfig.json with the store's name, type, and an optional version for the store type (eg. when WMS is the store type, 1.1.0 is an example version).

Here's an example config file:

{
  "stores":[
    {
      "type": "geojson",
      "version": "1",
      "uri": "all.geojson",
      "isMainBundle":true,
      "id":"63602599-3ad3-439f-9c49-3c8a7579933b",
      "name":"Simple"
    },
    {
      "type":"gpkg",
      "version":"1",
      "name":"Haiti",
      "uri":"https://s3.amazonaws.com/test.spacon/haiti4mobile.gpkg",
      "id":"a5d93796-5026-46f7-a2ff-e5dec85heh6b"
    },
    {
      "type":"gpkg",
      "version":"1",
      "name":"Whitehorse",
      "uri":"https://s3.amazonaws.com/test.spacon/whitehorse.gpkg",
      "id":"ba293796-5026-46f7-a2ff-e5dec85heh6b"
    }
  ]
}

The data store needs an adapter to connect to the underlying data source (a GeoJson file, a GeoPackage database, a CSV file, etc), therefore you must also create a class that extends SCDataAdapter. The adapter will manage connecting and disconecting to the data source as well as the actual I/O to the data source. The adapter will use the uri defined in the config to connect to the data source. If the uri is remote, then it will download from the location and store it locally (at least for a geopackage).
is there any docs for this project

Create Feature

Add ability to create a spatial feature and send a message to the mobile JS bridge

add license file to project root