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.

Installation

npm install ht-maps

References

HtMapClass

Usage

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);

typescript

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

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

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

mapClass.resetBounds()

HtMapClass.tracePlaceline(user: IUserData)

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

Properties

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) => {
  console.log(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

mapItemsFactory

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.

MapItemsFactoryConfig

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.

DataConfig

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

StylesObj

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.

Example
var stylesObj = {
  google: {
    default: {
      ...
    }
  },
  leaflet: {
    default: {
      ...
    }
  }
}

eventConfig

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
}
Example
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 ""