mapview_infotip.mjs

/**
## Mapview.infotip()

@module /mapview/infotip

@param {Object} content
*/

const infotip = {};

export default function (content) {
  const mapview = this;

  // Remove infotip node element
  infotip.node?.remove();

  // The mapview must have a position to place the infotip.
  if (!mapview.position) return;

  // Remove infotip positioning event from mapview Map.
  mapview.Map.un('pointermove', position);

  // Just clears the infotip.
  if (!content) return;

  if (content instanceof HTMLElement) {
    infotip.node = content;

    // Content type object but not HTMLElement cannot be rendered.
  } else if (typeof content === 'object') {
    console.warn(
      `Content type object cannot be rendered in infotip: ${JSON.stringify(content)}`,
    );
    return;
  } else {
    // Check for braces in content string.
    if (mapview.locale.xss_check && /[()]/.test(content)) {
      console.warn(`Potential XSS detected in infotip content ${content}`);
    }

    // Creates the infotip node.
    infotip.node = mapp.utils.html.node`<div class="infotip box-shadow">`;

    // Assigns the infotip content.
    infotip.node.innerHTML = content;
  }

  // Appends the infotip to the mapview.Map.
  mapview.Map.getTargetElement().append(infotip.node);

  // Assign infotip positioning event to mapview.Map.
  mapview.Map.on('pointermove', position);

  // Set the position of the infotip.
  position();

  function position() {
    // The infotip class has a default opacity of 0, with transition effect.
    infotip.node.style.opacity = 1;

    // Set the infotip position from mapview pointerLocation.
    infotip.node.style.left =
      mapview.pointerLocation.x - infotip.node.offsetWidth / 2 + 'px';
    infotip.node.style.top =
      mapview.pointerLocation.y - infotip.node.offsetHeight - 15 + 'px';
  }
}