hypertrack-views-react v1.1.30

HyperTrack Views for ReactJS

A wrapper for views provided through the HyperTrack dashboard. It allows you to integrate the same views into your own application.

Please check out the Views Guide for a closer look at the capabilities provided by HyperTrack Views.

Prerequisites

• Set up a HyperTrack account and obtain your Publishable Key from the Dashboard
• Integrate the HyperTrack SDK in your application (iOS, Android, or React Native) or use our sample app to send location data (iOS or Android)

Explore sample app

You can use the sample app provided to explore the capabilities and usage of this component. Please visit this page to open the sample app.

To run the sample app on your own, follow these steps:

Jump to the sample app folder:

cd sample

Install all app dependencies:

npm i

yarn

Note: Do not run the installation in the root folder. If that has been done before sample app dependecies were installed, NPM will use installed packages from the root node_modules, which might reason conflicts and break the build process

Run the sample app:

node run start

yarn start

The CLI will open up the locally hosted sample app (http://localhost:3000/) and should look like this:

Installation

You can use either Yarn or NPM to add hypertrack-views-react to your project:

npm install --save hypertrack-views-react

yarn add hypertrack-views-react

Usage

import { LiveView } from "hypertrack-views-react";

const PUBLISHABLE_KEY = "<your_key>";

<LiveView
  publishableKey={PUBLISHABLE_KEY}
  showTooltips={true}
  showDeviceList={false}
  showDeviceCard={false}
  selectedDeviceId={"00112233-4455-6677-8899-AABBCCDDEEFF"}
  defaultLayer={"custom"}
  customLayerUrl={"http://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"}
  assetsUrl={"https://abc-sdk-test-assets.s3-us-west-2.amazonaws.com/"}
/>;

Configuration

Note: The component passes along all additional properties, so you can use properties like className.

Showing a single device

When provided with the selectedDeviceId property, the component will render a single device view as opposed to the device overview. You can find more details in the Live device view documentation.

The device info card on the left side can be disabled by setting showDeviceCard to false

Adding a custom map layer

With the customLayerUrl property, you can reference a raster tile to be added as a custom map layer. Users can select the custom view from the button on the top right side of the view. The layer is pre-selected based on the defaultLayer property. After setting the customLayerUrl, you can set the defaultLayer property to custom to render this new tile by default.

There are different ways to obtain and/or generate a custom layer. OpenMapTiles might be of interest. You can also generate/customize MapBox maps and access them as raster tiles.

Note: Please ensure you use the XYZ URL format, which looks something like this: /tile-name/{z}/{x}/{y}.png

Here are some sample layer tiles:

Replacing default icons

By default, the views display a set of icons to indicate status, activity, and more. You can replace each icon individually. Below is a list of all the replaceable icons.

Original Icons: You can use the default icons and make your modifications

Versioning

We use Semantic Versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details