Store Locator Widget - Custom Renderer

Sample code for Woosmap Map JavaScript API author(s): Woosmap

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Store Locator Widget - Custom Renderer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <script src="https://webapp.woosmap.com/webapp.js"></script>

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

#myCustomContentID {
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  padding: 0;
}
#myCustomContentID > li {
  display: flex;
  align-items: flex-start;
  list-style: none;
  min-height: 32px;
  line-height: 24px;
  padding-bottom: 10px;
  padding-left: 5px;
}
#myCustomContentID p {
  margin: 0;
}

.marker-image {
  height: 24px;
  width: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 20px;
  margin-right: 10px;
}

#store-hours .marker-image {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/%3E%3C/svg%3E");
}

#store-address .marker-image {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2724%27 viewBox=%270 0 24 24%27 width=%2724%27%3E%3Cpath d=%27M0 0h24v24H0V0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zM7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9z%27/%3E%3Ccircle cx=%2712%27 cy=%279%27 r=%272.5%27/%3E%3C/svg%3E");
}

#store-website...

JavaScript

const configLocator = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
    },
  },
  datasource: {
    max_responses: 5,
    max_distance: 0,
  },
  theme: {
    primary_color: "#00754a",
  },
  woosmapview: {
    initialZoom: 15,
    breakPoint: 16,
    tileStyle: {
      color: "#00754a",
      size: 13,
      minSize: 5,
    },
    style: {
      default: {
        icon: {
          url: "https://images.woosmap.com/starbucks-marker.svg",
          scaledSize: {
            height: 40,
            width: 34,
          },
        },
        selectedIcon: {
          url: "https://images.woosmap.com/starbucks-marker-selected.svg",
          scaledSize: {
            height: 50,
            width: 43,
          },
        },
      },
    },
  },
};

function getPhone({ properties }) {
  const phone = properties.contact?.phone;
  return phone
    ? `<li id='store-phone'><span class='marker-image'></span><p><a class='text-black' href='tel:${phone}'>${phone}</a></p></li>`
    : "";
}

function getWebSite({ properties }) {
  const website = properties.contact?.website;
  return website
    ? `<li id='store-website'><span class='marker-image'></span><a class='text-black' href='${website}' target='_blank'>More Details</a></li>`
    : "";
}

function getDistanceAndTime({ properties }) {
  const distanceLabel =
    (properties.distance_text || "") +
    (properties.duration_text ? ` (${properties.duration_text})` : "");
  return `<p class='summary-distance'>${distanceLabel}</p>`;
}

function formatAddress(properties) {
  return properties && properties.address
    ? `${properties.address.lines || ""}, ${properties.address.zipcode || ""} ${properties.address.city || ""}`
    : "";
}

function getAddress({ properties }) {
  const address = formatAddress(properties);
  return `
    <li id='store-address'>
      <span class='marker-image'></span>
      <div>
        <p>${address}</p>
        <p>${getDistanceAndTime({ properties })}</p>
      </div>
   ...