Skip to content

hypertrack/views-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

sample view

Prerequisites

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: sample app

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

Property Type Default Description
publishableKey string N/A The publishable key of your account from the Setup page on the Dashboard
showTooltips boolean false Show the device ID right next to the location marker of a device
showDeviceList boolean true Show the list of all tracked devices, includes filter and search options. A click on a device will place zoom to the device location
showDeviceCard boolean true Show the device detail card on the single device view
selectedDeviceId string null ID of the device to be displayed (case sensistive). Can be obtained using the Device API. Adding this will change the view to a single device mode (including device data, activity, and more)
defaultLayer string base Can be either one of: base, street, satellite, or custom. Custom will only work if a customLayerUrl is provided.
customLayerUrl string null URL to a Leaflet-compatible tiled web map in XYZ format. Only raster is supported and it needs to be public accessible.
assetsUrl string null URL to a public asset folder containig SVG files to replace default icons. The filenames need to match exactly. Missing icons will show the default versions.

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.

live device view

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 map-layer-icon 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:

Layer URL Preview
Google Maps: Satellite http://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z} satellite preview
Google Maps: Roadmap/Streets http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z} streets preview
Google Maps: Hybrid http://mt0.google.com/vt/lyrs=s,h&hl=en&x={x}&y={y}&z={z} hybrid preview

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

Filename Default Description
live-direction.svg live-direction.svg Dot indicated the live location and direction of a device
live.svg live.svg Dot indicated the live location of a device
offline.svg offline.svg Dot indicated the last known location of a device
walk.svg walk.svg Activity icon for walking activity
run.svg run.svg Activity icon for running activity
cycle.svg cycle.svg Activity icon for cycling activity
drive.svg drive.svg Activity icon for driving activity
stop.svg stop.svg Activity icon for stopping activity
unknown.svg unknown.svg Activity icon for unknown activity
inactive.svg inactive.svg Status icon for inactive device
disconnected.svg disconnected.svg Status icon for disconnected device

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