map icon HTML

icon-html.js

   // 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" />
                <rect x="12" y="55" width="20" height="4" fill="black" />
                <rect x="12" y="80" width="20" height="4" fill="black" />
                <rect x="25" y="0" width="15" height="8" stroke="black" fill="black" stroke-width="3"/>
              </svg>
            </div>`;
      }
      
      // ... other icon shapes here
      
    }