The "map" is an SVG file embedded in HTML. Utah's outline is an SVG <path> element. Markers are SVG <circle> and <path> elements. JavaScript handles the click interactions.

1. The Utah outline — just a path

<!-- The state border is a single SVG path -->
<path
  class="utah-state"
  d="M 30,22 L 460,22 L 461,105 L 490,106 L 491,560 L 30,560 Z"
/>

<!-- CSS makes it look like an illustrated map -->
.utah-state {
  fill: #e8f0e3;          /* sage green fill */
  stroke: #3d6b44;        /* darker border */
  stroke-width: 2.5;
  filter: url(#roughen);  /* subtle hand-drawn wobble */
}

2. Coordinate math for placing markers

// Convert lat/lon to SVG pixel coordinates
// Utah lon range: -114.05 to -109.05 → x: 30 to 490
// Utah lat range: 42.0 to 37.0     → y: 20 to 560

function toSVG(lat, lon) {
  const x = 30 + ((114.05 - (-lon)) / 5) * 460;
  const y = 20 + ((42.0 - lat) / 5) * 540;
  return { x, y };
}

// Example: Logan, UT (41.735°N, 111.834°W)
// x = 30 + (114.05 - 111.834) / 5 * 460 = 234
// y = 20 + (42.0 - 41.735) / 5 * 540 = 49

3. A marker is just SVG shapes

<!-- Each marker: a stem, a circle, and an icon shape -->
<g class="install-marker" onclick="selectInstall('cache-valley')">
  <line x1="234" y1="49" x2="234" y2="62" stroke="#2d5432"/>
  <circle cx="234" cy="42" r="12" fill="url(#grad-aqua)" stroke="white"/>
  <!-- leaf path inside the circle -->
  <path d="M 230,45 Q 234,36 238,45 Q 234,43 230,45 Z" fill="white"/>
</g>

/* Hover animation — pure CSS */
.install-marker:hover .marker-outer {
  transform: scale(1.25);
  /* transform-origin: center ensures it scales around the marker center */
}

4. The hand-drawn filter (SVG magic)

<!-- This SVG filter adds subtle organic wobble to the state outline -->
<filter id="roughen">
  <feTurbulence
    type="fractalNoise"
    baseFrequency="0.025"  /* lower = more spread out wobble */
    numOctaves="3"
    seed="2"
  />
  <feDisplacementMap
    in="SourceGraphic"
    scale="1.8"           /* higher = more wobble */
    xChannelSelector="R"
    yChannelSelector="G"
  />
</filter>

<!-- Apply to any element -->
<path filter="url(#roughen)" ... />

The real design work for an illustrated map is in Illustrator or Inkscape — drawing an outline with the character you want, exporting as SVG, then pasting the <path> data into your HTML. The code handles the interaction; you handle the drawing.