OpenSensorHub Toolkit

# Leaflet

The LeafletView is a way of showing data point on a map. Often, it is used to show GPS data, or fixed position of any sensor. This View can also display path using the corresponding Layer.

The View is based on LeafletJs (opens new window) framework.


API Reference

# Supported layers

The view supports type layers:

  • marker
  • polyline

# Properties configuration

The initialView defines some properties for the creation of the inner View (opens new window).

The overlayLayers are L.tileLayer (opens new window) Leaflet objects to use as overlay layer.

The baseLayers are L.tileLayer (opens new window) Leaflet objects to use as base layer.

The default OSM (opens new window) layer is provided

# Initial View

The initial View can be passed to override the default View (opens new window).

Here is the corresponding code that initializes the initial-view if none is passed in parameter:

let initialView = {
    location: new L.LatLng(0, 0),
    zoom: 3
};

# Example

// #region snippet_leaflet_location_import
// 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';
// #endregion snippet_leaflet_location_import

// #region snippet_leaflet_location_datasource
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
});
// #endregion snippet_leaflet_location_datasource

// #region snippet_leaflet_location_marker
// 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'
});
// #endregion snippet_leaflet_location_marker

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

// #region snippet_leaflet_location_connect
// start streaming
gpsDataSource.connect();
// #endregion snippet_leaflet_location_connect


← Cesium →