Setup client and map

Example setup code is available here

Prerequisite

Install Hypertrack libraries
npm i ht-client
npm i ht-maps
npm i ht-data
npm i ht-utility
Install helper libraries
npm i rxjs
npm i leaflet
npm i moment-mini
npm i underscore

Setup html

  1. Installed dependency libraries need to be added in the html header.
  2. Create an element with id as "map", where map will be rendered. Map element needs to be given some height and width for it to be properly rendered. This style can be played around to suit your requirement.
  3. Add google map library for rendering map using google map. Add your google map key at the placeholder text.

    <!doctype html>
    <html lang="en">
    <head>
     <!--helper dependencies starts-->
     <script src="../node_modules/rxjs/bundles/Rx.min.js.js"></script>
     <script src="../node_modules/moment-mini/moment.min.js"></script>
     <script src="../node_modules/underscore/underscore-min.js"></script>
     <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css">
     <!--helper dependencies end-->
     <!--google maps dependencies start-->
     <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=<GOOGLE_KEY>>&libraries=geometry"></script>
     <script src="http://googlemaps.github.io/js-rich-marker/src/richmarker-compiled.js"></script>
     <!--google maps dependencies end-->
     <!--hypertrack dependencies start-->
     <script src="../node_modules/ht-utility/dist/ht-utility_browser.js"></script>
     <script src="../node_modules/ht-data/dist/ht-data_browser.js"></script>
     <script src="../node_modules/ht-maps/dist/ht-maps_browser.js"></script>
     <script src="../node_modules/ht-client/dist/ht-client_browser.js"></script>
     <link rel="stylesheet" href="../node_modules/ht-maps/dist/styles.css">
     <!--hypertrack dependencies end-->
     <style>
             #map {
                 height: 400px;
             }
    
             html, body {
                 height: 100%;
                 margin: 0;
                 padding: 0;
             }
    
         </style>
    </head>
    <body>
    <div id="map"></div>
    <script>
    
       //scripts to render placeline on the map
    
    </script>
    </body>
    </html>
    

Render map

javascript

var mapClass = new htMaps.HtMapClass('google');
mapClass.initMap(document.getElementById('map'));

typescript

import {HtMapClass} from "ht-maps";

var mapClass = new HtMapClass('google');
mapClass.initMap(document.getElementById('map'));
  1. Create a new mapClass using HtMapClass('google') class. (replace "google" with "leaflet" to render a osm based map)
  2. Use initMap(elem: Element, options: MapOptions = {}) function in mapClass to render the map.

Setup user client

javascript

var token = "sk_55fc65eb64c0b10300c54ff79ea3f6ef22981793";
var client = htClient.initClient(token);
var usersClient = htClient.usersClientFactory();

typescript

import {initClient, usersClientFactory} from "ht-client";

...
var client = initClient(token);
var usersClient = usersClientFactory();
...
  1. HtClient class needs hypertrack key to be initialized. Create a new instance of HtClient by calling initClient factory function with hypertrack key as argument.
  2. Initialize usersClient property which handles users related api calls. Store this as usersClient

Build primitives

Now that client and mapClass is setup, we can use these for different primitives

  1. Render placeline on map
  2. Render current users on map

results matching ""

    No results matching ""