Issue with added custom visualizer

[tgt87]

Hi, I'm trying to add a custom map viewer (to use my own map image) by creating a CustomMapViewer that inherits from Viewer and also imported it it in the index.js file.
I am able to subscribe to the custom topic but the custom map viewer is not being loaded.

Below is my CustomMapViewer.js:

"use strict";

class CustomMapViewer extends Viewer {
  /**
    * Gets called when Viewer is first initialized.
    * @override
  **/
  onCreate() {
    this.viewer = $('<div></div>')
      .css({'font-size': '11pt'
    , "filter": "invert(100%) saturate(50%)"})
      .appendTo(this.card.content);

    this.mapId = "map-" + Math.floor(Math.random()*10000);

    this.map = $('<div id="' + this.mapId + '"></div>')
      .css({
        "height": "1000px",
      })
      .appendTo(this.viewer);

    this.mapLeaflet = L.map(this.mapId, {
        crs: L.CRS.Simple
    })

    this.bounds = [[0,0], [1000,1000]];
    this.image = L.imageOverlay('/home/xxxx/catkin_ws/src/rosboard/rosboard/html/assets/my_map.jpeg', this.bounds).addTo(this.mapLeaflet);
    this.mapLeaflet.fitBounds(bounds)

    this.markers = [];
  }

  onData(msg) {
      this.card.title.text(msg._topic_name);
      if(msg.data.length > 0){
        this.markers = msg.data
      } else {
        this.markers = []
      }

      for(let i=0; i < this.marker.length; i++){
        this.mapLeaflet.removeLayer(this.marker[i]);
      }

      for(let i=0; i < msg.data.length; i++){
        L.marker([msg.data[i].y, msg.data[i].x]).addTo(this.mapLeaflet);
      }
  }
}

CustomMapViewer.friendlyName = "Custom Map";

CustomMapViewer.supportedTypes = [
    "test_msg/CoordArr",
];

CustomMapViewer.maxUpdateRate = 10.0;

Viewer.registerViewer(CustomMapViewer);

Can someone help to point out if there are any issue with my code or did I miss out any other places that need further configuration?

[tgt87]

Managed to figure out why the custom viewer is not loading.
It is because in the Viewer base class there's a logic that appends "msg" to the message type if the splitted token is of length 2.

Therefore changing the CustomMapViewer.supportedTypes as shown below solves the issue.

CustomMapViewer.supportedTypes = [
    "test_msg/msg/CoordArr",
];