npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ht-webtracking-sdk

v0.3.1

Published

hyperTrack webtracking

Downloads

8

Readme

Javascript library to render a map with live tracking view on any web page. Its written in Typescript and ships with the typing information.

Web-tracking SDK

The SDK takes location data as input and renders it on a Google Maps view. Furthermore, it continuously takes new data as input and animates them on the map. The core features of this library are:

  • Initialize and render map in your DOM container
  • Initialize and render markers for start location, current location, end location, destination and trailing polyline
  • Handle multiple simultaneous trips on the map maintaining separate markers and polylines
  • Smooth animation for user marker on data update
  • Customizations with full access and control over map object

Installation

npm

npm install ht-webtracking-sdk --save

Or Script Tag

Add ‘dist/track.js’ as a script tag between and of your html. It exposes global ht object on window.

Prerequisites

  1. Load the Google Maps JavaScript API with API key by adding a script tag like the one in the following example in the of your html:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  1. Create Map DOM container: In the html file, create a DOM which would contain the map. Give it a unique id. Example:
<div id="map" style="height: 300px; width: 500px"></div>

Usage

The SDK exposes a global variable ht with the trackByData method. Call this method with the TrackingData object(s) to instantiate the class and render location data on the map. Furthermore, pass the TrackingDataOptions object to specify the map container, callbacks and customizations. New location data for the trip(s) is passed on to the track() method in a similar format. Pass the data to the instantiated class with the id for which you wish to update the tracking experience and animate the marker to its new location.

var ht = require('ht-webtracking-sdk');
var trackedData = ht.trackByData([{
  "id": "",
  "encodedTimeAwarePolyline": "spxsBsdb|LymoqvAx@TKvAr@K",
  "destination": {}
  }],
  {
    "mapId": "map",
    "mapOptions": {},
    "onReady": handleOnReady,
    "onError": handleOnError  }
);

With HyperTrack Actions

The SDK also exposes 3 main methods to render actions directly on the map.

  • Using action short code - ht.trackShortCode(shortCode, publishable_key, trackingOptions)
  • Using action lookup id - ht.trackLookupId(lookupId, publishable_key, trackingOptions)
  • Using action collection id - ht.trackCollectionId(collectionId, publishable_key, trackingOptions)

For example, to track a collection of actions by collection id -

var ht = require('ht-webtracking-sdk');
var trackedCollection = ht.trackCollectionId('P_4328591238', 'pk_xxxxxxxxx',
  {
    "mapId": "map",
    "mapOptions": {},
    "onReady": handleOnReady,
    "onUpdate": handleOnUpdate,
    "onError": handleOnError
  }
);

Customization

The SDK follows a default color scheme with its own custom icons and map polyline color. You may pass custom base64 images and polyline options through MapOptions within TrackingOptions to override these defaults. The SDK also exposes the map object via callbacks for full control and access of the tracking experience to the developer. For example, use this to customize the user marker

var trackingOptions = {
  "mapId": "map",
  "mapOptions": {
    "vehicleIcon": {
        src: "data:image/png;base64,iVBORw0KGgoAAA....",
        height: "60px"
    }
  },
  ...
}

References

Interfaces

  1. ITrackingData: Tracking data
  2. ITrackingDataOptions: Options that are passed to the sdk to customize the tracking.
  3. IAction: HyperTrack Action object. This is passed to onReady and onUpdate callbacks.
  4. ITrackedData: Object with keys as id of each data object and value as TrackData class.
Tracking Data
interface ITrackingData {
    id?: string,
    encodedTimeAwarePolyline: string;
    destination?: IPlace;
    isLive: boolean;
    vehicleType?: string;
}
Tracking options
interface ITrackingOptions {
    mapId: string; //id of DOM where map is to be rendered
    mapOptions?: IMapOptions;
    onError?: (error: any) => void;
    onReady?: (trackedData: ITrackedData, actions: IAction[], map: google.maps.Map) => void;
    onUpdate?: (trackedData: ITrackedData, actions: IAction[]) => void;
}
interface ITrackingDataOptions {
    mapId: string; //id of DOM where map is to be rendered
    mapOptions?: IMapOptions;
    onError?: (error: any) => void;
    onReady?: (trackedData: ITrackedData, dataArray: ITrackingData[], map: google.maps.Map) => void;
}
interface IMapOptions {
    gMapsStyle?: MapTypeStyle[] | null;
    bottomPadding?: number;
    topPadding?: number;
    vehicleIcon?: CustomVehicleIcon;
}
interface CustomVehicleIcon {
    src: string;
    height: string;
}