Usage

osh-js can be used with ES6 modules, plain JavaScript and module loaders.

Visualize GPS data

To visualize a data, we need to instantiate a DataSource, View and Layer classes and a HTML tag to render the result.

Create the HTML element

The HTML element is the html anchor of your View.

<div id="leafletMap"></div>

Import modules

First import your modules:

// 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 LeafletView from 'osh-js/core/ui/view/map/LeafletView.js';
import DataSynchronizer from 'osh-js/core/timesync/DataSynchronizer';
import {Mode} from 'osh-js/core/datasource/Mode';

Create the DataSource instance

The DataSource is used to define the properties allowing connecting to a OSH server and define the data parser to use.

let gpsDataSource = new SosGetResult("android-GPS", {
    endpointUrl: 'sensiasoft.net/sensorhub/sos',
    offeringID: 'urn:android:device:060693280a28e015-sos',
    observedProperty: 'http://sensorml.com/ont/swe/property/Location',
    startTime: '2015-02-16T08:01:15.447Z',
    endTime: '2015-02-16T08:09:00Z',
    mode: Mode.REPLAY,
    tls: true,
    timeShift: -16000
  // responseFormat: 'application/octet-stream',
});

const dataSynchronizer = new DataSynchronizer({
    replaySpeed: 2,
    startTime: '2015-02-16T07:58:22.00Z',
    endTime: "2015-02-16T08:09:00Z",
    dataSources: [gpsDataSource]
});

Create the Layer instance

The Layer is used to style dynamically your data before rendering.

// style it with a moving point marker
let pointMarkerLayer = new PointMarkerLayer({
  dataSourceId: gpsDataSource.id,
  getLocation: (rec) => ({
        x: rec.location.lon,
        y: rec.location.lat,
        z: rec.location.alt
  }),
  icon: './images/car-location.png',
  iconSize: [32, 64],
  iconAnchor: [16, 65],
  name: 'Car',
  description: 'GPS car Toulouse'
});

Create the View instance

The View defines the kind of visualization you want for your DataSource. In this example, a map render based on leaflet is used.

// create Leaflet view
let leafletMapView = new LeafletView({
    container: 'leafletMap',
    layers: [pointMarkerLayer],
    autoZoomOnFirstMarker:true
});

Start the Stream

Finally, you can start the connection by executing:

// start streaming
dataSynchronizer.connect();