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 SosGetResultJson from 'osh-js/core/datasource/SosGetResultJson.js';
import PointMarkerLayer from 'osh-js/core/ui/layer/PointMarkerLayer.js';
import LeafletView from 'osh-js/core/ui/view/map/LeafletView.js';

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 SosGetResultJson("android-GPS", {
  protocol: "ws",
  service: "SOS",
  endpointUrl: "sensiasoft.net:8181/sensorhub/sos",
  offeringID: "urn:android:device:060693280a28e015-sos",
  observedProperty: "http://sensorml.com/ont/swe/property/Location",
  startTime: "2015-02-16T07:58:32Z",
  endTime: "2015-02-16T08:09:00Z",
  replaySpeed: 2
});

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
gpsDataSource.connect();