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="../js-libs/richmarkers.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 = new htClient.HtClient(token);
var usersClient = client.users;

typescript

import {HtClient} from "ht-client";

...
var client = new HtClient(token);
...
  1. HtClient class needs hypertrack key to be initialized. Create a new instance of HtClient and store it as client
  2. client exposes users property which handles users related api calls. Store this as usersClient

Connect client to map

client.mapClass = mapClass;
  1. set mapClass property of client to mapClass which was initialized during initialization of map. This will automatically connect the placeline data to the map instance.

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