Hypertrack map library

This library helps in rendering a set of data with location information on the map of your choice.

Items on the map are synced with the data provided to the library. When the data gets updated, the library takes care of updating markers of same id and clearing markers which are no more part of the provided data set, kindof data binding framework for map.

The library is written in typescript but can be used with vanilla javascript

Map support

This library supports both google maps and leaflet.js. It acts as a wrapper which handles cross map api's. The choice of map can be easily switched without any effort.


npm install ht-maps




library exposes htMaps as a global variable when used as es5. Otherwise can be used with es6+ javascript

var mapType = 'google'; //or 'leaflet'
var mapClass = new htMaps.HtMapClass(mapType);


import {HtMapClass} from "ht-js-map"

var mapType: HtMapTypes = 'google'; //or 'leaflet'
var mapClass = new HtMapClass(mapType);

HtMapClass.initMap(elem: Element, options: MapOptions = {})

Initializes the map. Requires a map DOM element.

var elem = document.getElementById('map-id');
var options = {
  center: {lat: 0, lng: 0}, zoom: 2,
  fullscreenControl: false,
}; //example google map options

var map = mapClass.initMap(elem, options);

console.log(map) // map object

HtMapClass.resetBounds(bounds?: HtBounds)

Sets the bounds of the map to contain all HyperTrack map items. Additional bounds can be passed


HtMapClass.tracePlaceline(user: IUserData)

Traces the placeline on the map. Takes placeline user data as an argument.


HtMapClass.map$: Observable<HtMap>

Observable which return map object whenever map in initialized. Can emit value more than once.

mapClass.map$.subscribe((map) => {
  console.log(map) // map object;

//Following emits value only once
mapClass.map$.take(1).subscribe((map) => {

HtMapClass.map: HtMap | undefined

Current Map object. May be undefined if the map is not yet initialized. Recommended that map$ is used. Checkout tutorial explaining this feature in detail here


Of type (config: MapItemsFactoryConfig): MapEntities. This is a factory function which is used for rendering any generic (HyperTrack independent) data set on the map. This is used internally to render HyperTrack entity.


Configuration object that is passed to mapItemsFactory for instantiating MapEntities

It is of the following interface

interface MapItemsFactoryConfig {
  dataConfig: DataConfig,
  stylesObj?: Partial<StyleObj>,
  eventConfig?: EventConfig,
  isCluster?: boolean, //default false, set to true to render data as clusters
  isPolyline?: boolean, //set to true to render polyline
  isCircle?: boolean, //set to true to render circle
  isDiv?: boolean, //set to true to render marker with custom html
  name?: string, //name to identify the MapItemsEntity
  hasPopup?: boolean, //set to true to enable popup
  popupConfig?: object //popup options

[info] Interfaces

Interface is typescript specific feature. But this interface also reflect the structure of object expected in vanilla javascript (non-typescript) environment.


This object contains function which are required by the lirary to render the entity on the map

  • getPosition(data): HtPosition | null required to render markers/circles etc which needs position. Marker will not be rendered if this functions return null
  • getInfoContent(data): string required for popup info content
  • getDivContent(data): string required for Div Markers for custom html of markers
  • getEncodedPath(data): string required for polyline


Contains styling information of the map entities. Has 2 keys google and leaflet which contains map specific styling information. This object must contain a default style object.

var stylesObj = {
  google: {
    default: {
  leaflet: {
    default: {


Contains information about handling map item events.

interface EventConfig {
  onClick?(entity: Entity): any,
  onMouseEnter?(entity: Entity): any,
  onMouseLeave?(entity: Entity): any

interface Entity {
  data: any //data rendered
  item: any //map item like marker/polyline etc
var eventConfig = {
  onClick(entity) {
    let data = entity.data;
    let item = entity.item;
    let position = entity.getPosition();
    //do anything here

mapItemsFactory.trace(data: any[])

Use trace() function to trace data array. This takes in array of items to be rendered on the map. Pass null to clear all items of current mapItems.

results matching ""

    No results matching ""