UNPKG

@osh-branches/osh-js

Version:

OSH javascript Toolkit

github.com/opensensorhub/osh-js

opensensorhub/osh-js

49 lines (25 loc) • 1.45 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# 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. ```html <div id="leafletMap"></div> ``` ### Import modules First import your modules: <<< @/../../showcase/examples/leaflet-location/leaflet-location.js#snippet_leaflet_location_import ### 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. <<< @/../../showcase/examples/leaflet-location/leaflet-location.js#snippet_leaflet_location_datasource ### Create the Layer instance The Layer is used to style dynamically your data before rendering. <<< @/../../showcase/examples/leaflet-location/leaflet-location.js#snippet_leaflet_location_marker ### 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. <<< @/../../showcase/examples/leaflet-location/leaflet-location.js#snippet_leaflet_location_view ### Start the Stream Finally, you can start the connection by executing: <<< @/../../showcase/examples/leaflet-location/leaflet-location.js#snippet_leaflet_location_connect