Store Locator Widget - Events

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

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Store Locator Widget - Events</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="container">
      <div id="map"></div>
      <div class="events" id="sidebar"></div>
    </div>

    <script
      src="https://sdk.woosmap.com/map/map.js?key=woos-e1e5490b-19d1-34f8-9955-fd5cfc8c880f&callback="
      defer
    ></script>
  </body>
</html>

CSS

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;
}

#container {
  height: 100%;
  display: flex;
}

#sidebar {
  flex-basis: 12rem;
  flex-grow: 1;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

#map {
  flex-basis: 70vw;
  flex-grow: 5;
  height: 100%;
}

/*
 * 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;
}

.events {
  font-family: "Droid Sans Mono", monospace;
}

.event {
  transition: background-color 0.5s ease-out;
  padding: 0.5em;
  overflow: hidden;
  font-size: 14px;
}

.active {
  background-color: #ffdd00;
  color: #000;
}

.inactive {
  background-color: white;
}

JavaScript

const configLocator = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
    },
  },
  datasource: {
    max_responses: 5,
    max_distance: 0,
  },
  theme: {
    primary_color: "#00754a",
  },
  woosmapview: {
    initialCenter: {
      lat: 51.50940214,
      lng: -0.133012,
    },
    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,
          },
        },
      },
    },
  },
};
const events = [
  "AUTOCOMPLETE",
  "EMAIL_CLICK",
  "FAVORITED",
  "GEOCODE",
  "GET_DIRECTIONS",
  "LOCATION_SELECTED",
  "PHONE_CLICK",
  "SELECT_DIRECTION",
  "SELECT_STORE",
];

function populateTable() {
  const eventsTable = document.getElementById("sidebar");

  eventsTable.innerHTML = events
    .map((event) => `<div class="event" id="${event}">${event}</div>`)
    .join("");
}

function setupListener(name) {
  const eventRow = document.getElementById(name);

  eventRow.classList.remove("inactive");
  eventRow.classList.add("event", "active");
  window.setTimeout(() => {
    eventRow.classList.remove("active");
    eventRow.classList.add("inactive");
  }, 1000);
}

function isMobileDevice() {
  return window.innerWidth < 500;
}

function initStoreLocator() {
  const webapp = new window.WebApp("map", "YOUR_API_KEY");

  populateTable();
  webapp.listenOn(webapp.HANDLED_EVENT.SELECT_STORE, (storeId) => {
    console.log(storeId);
    setupListener("SELECT_STORE");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.PHONE_CLICK, (storeId, phone) => {
    console.log(storeId, phone);
    setupListener("PHONE_CLICK");
  });
 ...