Displaying Onebrella service on your site

How to connect Onebrella to your site

If necessary, users can display information processed in Onebrella on the pages of their sites. It is possible to show your site's clients the location and state (movement/parking) of vehicles or IoT objects. To do this, you need to register in the service a domain on which the information will be displayed. Contact the service support and provide your domain. After registering your domain, you can receive information on the status and location of your devices on your website. To get information, you need to use a REST API request to the service. Request URL: https://onebrella.eu/api/extsite

Как подключить Onebrella к своему сайту

In response, the service returns an array of JSON objects (UNIT_LIST) with information on the specified devices. In cases where objects are not defined, or the request does not pass the control of the specified parameters (time interval, day of the week), the array is not present in the server response. After domain registration in the service, the "Access :: domain.com" button appears in the "Account" panel. When you click on this button, a panel opens in which you can set objects to display on an external site. In this panel, you may set the time interval and days of the week during which the objects are displayed. You can also set holidays on which objects will not be displayed. Changes made in this panel take effect immediately after they are saved. You can see an example of a "live" version of integration with Onebrella at the link: An example of Onebrella on your site.

The extsite.js library has been prepared to simplify the integration. In its simplest form, to connect Onebrella to your web page, you need:

Insert the line into the page head:

 <link rel="stylesheet" href="https://onebrella.eu/nlib/leaflet/leaflet17.css" /> 

In the place of the page where you want to display the map with objects, insert:

 <div id="mapid1" style="height:400px;"></div> 

Include scripts in the body of the page (usually inserted immediately before the tag </body>):

 <script src="https://onebrella.eu/nlib/jquery/jquery-3.3.1.min.js"></script>
<script src="https://onebrella.eu/nlib/leaflet/leaflet17.js"></script>
<script src="https://onebrella.eu/nlib/extsite.js"></script>

The settings are passed to the dispVialatmObjects function:

  • divid - ident of div for map
  • refresh - map refresh rate in sec. If the parameter is omitted, the map will not be refreshed
  • emptyhide - setting to hide the map block if there is no information on devices (true or false)