Render custom map data

In Addition to rendering hypertrack specific entities, ht-maps library can be used to render any data on the map of your choice. This provides a framework which ties the data to map like anyother front-end framework for DOM. When the data provided to ht-maps gets updated, it handles updating the corresponding map items and removing those which are removed from data.

Complete code for this tutorial can be found here

[info] References

Read about the ht-maps api in references section

Example data

For this example lets take an sample data, an array where each entry contains position information with other data

var data = [
    {
        name: 'Test 1',
        id: '1',
        position: [37.7533, -122.43913],
    },
    {
        name: 'Test 2',
        id: '2',
        position: [37.7364, -122.43042],
    },
    {
        name: 'Test 3',
        id: '3',
        position: [37.7564, -122.43042],
    }
];

after some point api from backend provides new data as follows.

var updatedData = [
    {
        name: 'Test 1',
        id: '1',
        position: [37.7503, -122.42313],
    },
    {
        name: 'Test 2',
        id: '2',
        position: [37.7064, -122.43942],
    },
    {
        name: 'Test 4',
        id: '4',
        position: [37.7104, -122.40442],
    }
];

In updated data, item of id 3 has been removed and item of id 4 has been added. Moreover the location data has got updated for all the items.

Steps to render on map

1. Initialize map

Follow the setup tutorial to setup the map. HtClient is not required for this tutorial, so that that may be omitted.

2. Setup mapItems

We need to use mapItemsFactory function to create mapItems. Here we will let the object know how to extract required information from the data to render it on the map, and also provide styling and other configuration.

dataConfig

javascript

var dataConfig = {
    getPosition: function(data) {
        var lat = data.position[0];
        var lng = data.position[1];
        return {lat: lat, lng: lng}
    },
    getDivContent: function(data) {
        var string = '<div style="background: #000">' +
                        '<strong style="color: #fff">' +
                        data.name +
                        '</strong>' +
                        '</div>';

        return string
    }
}

typescript

var dataConfig = {
    getPosition(data) {
        let lat = data.position[0];
        let lng = data.position[1];
        return {lat, lng}
    },
    getDivContent(data) {
        let string = `<div style="background: #000">
    <strong style="color: #fff">${data.name}</strong>
    </div>`;
        return string
    }
}

Because we want to render a div marker on the map, we would need the position and custom html string. These are provided using the object which contains the relevant functions.

StylesObject

Suppose we wanted to render a circular marker at the data location, an example stylesObj would look like the following

var stylesObj = {
    default: {
      icon: {
        fillColor: "#ccc",
        fillOpacity: 1,
        strokeColor: "#000",
        strokeOpacity: 1,
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8,
        strokeWeight: 2,
      }
    }
  },
  leaflet: {
    default: {
      radius: 10,
      fillColor: "#ccc"
      fillOpacity: 1,
      weight: 1,
      color: "#000",
      pane: 'markerPane'
    }
  }

For this example, we will render the marker as a custom html with name property on google map. The stylesObj should like the following.

var stylesObj = {
    google: {
      default: {
        flat: true,
        anchor: RichMarkerPosition.GEOMETRIC_CENTER,
        zIndex: 1
      }
    },
    leaflet: {
      default: {

      }
    }
  };

To render Div marker, we internally uses RichMarker library.

3. Create MapItemsEntity

With the above config objects we can now create MapItemsEntity

javascript

var mapItems = htMaps.mapItemsFactory({
    stylesObj: stylesObj,
    dataConfig: dataConfig,
    isDiv: true
})

typescript

import {mapItemsFactory} from "ht-maps";

var mapItems = mapItemsFactory({
    styleObj,
    dataConfig,
    isDiv: true
})

4. Trace data

mapItems.trace(data);
setTimeout(function() {
  mapItems.trace(updatedData) // trace updated data after 5 secs
}, 5000)

That's it. Whenever new data set is available, just call trace function of MapItemsEntity and the library will take care of the rest.

5. Reset map with items in bounds

HtMapClass provides resetBounds() function which sets the bounds of the map such that all the items get in the view. For this to work with custom data, push the new mapItems in HtMapClass.mapItemsSet array

mapClass.mapItemsSet.push(mapItems);

mapClass.resetBounds() // this work now with new mapItems

Customizations

1. Render markers as clusters

If the data array contains huge number of items, its might get difficult to see so many markers on the map. Moreover rendering them becomes performance issue. For such cases we can renders the markers as clusters (close by markers combines to become a cluster).

To render mapItems as clusters has isCluster as true in mapItemsFactoryConfig object

var mapItems = htMaps.mapItemsFactory({
    styleObj: styleObj,
    dataConfig: dataConfig,
    isDiv: true,
    isCluster: true // <--- to render as cluster
})

2. Show popup on hover

To show popup on hover over the markers, we need to define the text/html which will be displayed in the popup, and has hasPopup as true in MapItemsFactoryConfig.

...
var dataConfig = {
    getPosition(data) {
            let lat = data.position[0];
            let lng = data.position[1];
            return {lat: lat, lng: lng}
        },
    getDivContent(data) {
        let string = `<div style="background: #000">
    <strong style="color: #fff">${data.name}</strong>
    </div>`;
        return string
    },
    //add below function in dataConfig to return content of popup.
    getInfoContent(data) {
      return "Name is "+ data.name
    }
};
var mapItems = htMaps.mapItemsFactory({
    styleObj: styleObj,
    dataConfig: dataConfig,
    isDiv: true,
    isCluster: true,
    isPopup: true // <--- to show popup on hover
});
...

Popup might need additional styling, like setting anchor points, etc. Popup styling options can be passed with stylesObj as popup key.

Example
var stylesObj = {
    google: {
      default: {
        flat: true,
        anchor: RichMarkerPosition.GEOMETRIC_CENTER,
        zIndex: 1
      },
      popup: { //<---- example styling options for google map popup
          disableAutoPan: true,
          pixelOffset: new google.maps.Size(0, -14)
      }
    },
    leaflet: {
      default: {

      }
    }
  };

results matching ""

    No results matching ""