tmdesigned

function EventBus() {
    const eventCallbacksPairs = [];
    
    this.subscribe = function( eventType, callback ) {
        const eventCallbacksPair = findEventCallbacksPair(eventType);

        if(eventCallbacksPair)
            eventCallbacksPair.callbacks.push(callback);
        else
            eventCallbacksPairs.push( new EventCallbacksPair(eventType, callback) );

tmdesigned

    // Excerpt from https://github.com/Losant/google-map-advanced-markers/blob/main/custom-head-content.html

    // Initialize globals
    const markers = {};
    let devices = [];
    let map;
    let numSelected = 0;
    let AdvancedMarkerElement;
    let bounds;
    let selectedAttribute = $('#attribute-selector').val() || 'battery';

tmdesigned

    // set up individual marker
    const setUpMarker = (id, data) => {

      if(!data.attributeValues?.location){
        return false;
      }

      // Pull marker from dictionary, or create new
      let marker = markers[id];
      

tmdesigned

    const buildIcon = (data,attr) => {
      
      const value = data.attributeValues?.[attr];
      const meta = data.attributes?.find(a => a.name === attr);

      if(!value || !meta){
        throw new TypeError('Missing values'); // value at this point is string, so "0" won't fail
      }

      const min = meta.attributeTags?.min ? Number(meta.attributeTags.min) : 0;

tmdesigned

    // html for the marker
    const iconHTML = (attr,percent,value,colors,unit) => {

      if(attr === "battery"){
        return `
            <div title="${value}${unit}" class="marker">
              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="0 0 55 120">
                <rect x="10" y="7" width="45" height="102" stroke="black" fill="white" stroke-width="5"/>
                <rect x="12" y="${107-percent}" width="40" height="${percent + 1}" stroke="black" fill="${colors.background}" stroke-width="0"/>
                <rect x="12" y="30" width="20" height="4" fill="black" />

tmdesigned

    const iconWindowHTML = (data, iconsData) => {
        const iconWindowElement = document.createElement('div');
        iconWindowElement.classList.add('card', 'marker-window');

        const iconsHTML = Object.values(iconsData).map(iconData => {
          if(!iconData?.icon){
            return '';
          }
          return `
            <div class="d-flex flex-column align-items-center mr-1">