April 22, 2024

Store Locator Widget - Custom Filters

Change the default filters block by applying your own style and creating filters based on search query.

Example
Running the Sample Locally

Example

            const availableServices = [
  { key: "WF", en: "Wireless Hotspot" },
  { key: "CD", en: "Mobile Payment" },
  { key: "DT", en: "Drive-Thru" },
  { key: "DR", en: "Digital Rewards" },
  { key: "hrs24", en: "Open 24 hours per day" },
  { key: "WA", en: "Oven-warmed Food" },
  { key: "LB", en: "LaBoulange" },
  { key: "XO", en: "Mobile Order and Pay" },
  { key: "VS", en: "Verismo" },
  { key: "NB", en: "Nitro Cold Brew" },
  { key: "CL", en: "Starbucks Reserve-Clover Brewed" },
];

const storeLocatorConfig = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
      componentRestrictions: { country: "gb" },
    },
  },
  filters: {
    filters: [
      {
        propertyType: "tag",
        title: {
          en: "Amenities",
        },
        choices: availableServices,
        innerOperator: "or",
      },
      {
        propertyType: "custom",
        title: {
          en: "Country",
        },
        choices: [
          {
            key: 'country:="US"',
            en: "United States",
          },
          {
            key: 'country:="GB"',
            en: "United Kingdom",
          },
          {
            key: 'country:="DE"',
            en: "Germany",
          },
          {
            key: 'country:="FR"',
            en: "France",
          },
        ],
        innerOperator: "or",
      },
    ],
    outerOperator: "and",
  },
  theme: {
    primary_color: "#008248",
  },
  woosmapview: {
    initialCenter: {
      lat: 54,
      lng: -3,
    },
    initialZoom: 7,
    breakPoint: 11,
    style: {
      default: {
        icon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
          scaledSize: {
            height: 47,
            width: 40,
          },
        },
        numberedIcon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
          scaledSize: {
            height: 47,
            width: 40,
          },
        },
        selectedIcon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker-selected.svg",
          scaledSize: {
            height: 71,
            width: 61,
          },
        },
      },
    },
    tileStyle: {
      color: "#008248",
      size: 15,
      minSize: 6,
    },
  },
};

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

function createDiv(className = "", innerHTML = ""): HTMLDivElement {
  const div = document.createElement("div");
  div.className = className;
  div.innerHTML = innerHTML;
  return div;
}

function filterPanelRenderer(
  title: string,
  children: HTMLElement[],
): HTMLDivElement {
  const div = createDiv(
    "filters-list",
    `<div class='filter-group'>${title}</div>`,
  );
  children.forEach((item: HTMLElement) => {
    div.appendChild(item);
  });
  return div;
}

function filterRenderer(
  key: string,
  label: string,
  selected: boolean,
): HTMLDivElement {
  const className = key.startsWith("country")
    ? `${key.split("=").pop()?.replace(/[",]+/g, "")} country`
    : key;
  return createDiv(
    selected ? "active" : "",
    `<button><div class='icon-service icon-${className}'></div><div class='flex-grow'>${label}</div><div class='active-icon-wrapper'></div></button>`,
  );
}

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

  webapp.setConf(storeLocatorConfig);
  webapp.setFilterPanelRenderer(filterPanelRenderer);
  webapp.setFilterRenderer(filterRenderer);

  webapp.render(isMobileDevice());
}

initStoreLocator();

declare global {
  // currently, the WebApp typings are not exported, so we use `any` here
  interface Window {
    WebApp: new (elementId: string, projectKey: string) => any;
  }
}

    

            const availableServices = [
  { key: "WF", en: "Wireless Hotspot" },
  { key: "CD", en: "Mobile Payment" },
  { key: "DT", en: "Drive-Thru" },
  { key: "DR", en: "Digital Rewards" },
  { key: "hrs24", en: "Open 24 hours per day" },
  { key: "WA", en: "Oven-warmed Food" },
  { key: "LB", en: "LaBoulange" },
  { key: "XO", en: "Mobile Order and Pay" },
  { key: "VS", en: "Verismo" },
  { key: "NB", en: "Nitro Cold Brew" },
  { key: "CL", en: "Starbucks Reserve-Clover Brewed" },
];
const storeLocatorConfig = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
      componentRestrictions: { country: "gb" },
    },
  },
  filters: {
    filters: [
      {
        propertyType: "tag",
        title: {
          en: "Amenities",
        },
        choices: availableServices,
        innerOperator: "or",
      },
      {
        propertyType: "custom",
        title: {
          en: "Country",
        },
        choices: [
          {
            key: 'country:="US"',
            en: "United States",
          },
          {
            key: 'country:="GB"',
            en: "United Kingdom",
          },
          {
            key: 'country:="DE"',
            en: "Germany",
          },
          {
            key: 'country:="FR"',
            en: "France",
          },
        ],
        innerOperator: "or",
      },
    ],
    outerOperator: "and",
  },
  theme: {
    primary_color: "#008248",
  },
  woosmapview: {
    initialCenter: {
      lat: 54,
      lng: -3,
    },
    initialZoom: 7,
    breakPoint: 11,
    style: {
      default: {
        icon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
          scaledSize: {
            height: 47,
            width: 40,
          },
        },
        numberedIcon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
          scaledSize: {
            height: 47,
            width: 40,
          },
        },
        selectedIcon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker-selected.svg",
          scaledSize: {
            height: 71,
            width: 61,
          },
        },
      },
    },
    tileStyle: {
      color: "#008248",
      size: 15,
      minSize: 6,
    },
  },
};

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

function createDiv(className = "", innerHTML = "") {
  const div = document.createElement("div");

  div.className = className;
  div.innerHTML = innerHTML;
  return div;
}

function filterPanelRenderer(title, children) {
  const div = createDiv(
    "filters-list",
    `<div class='filter-group'>${title}</div>`,
  );

  children.forEach((item) => {
    div.appendChild(item);
  });
  return div;
}

function filterRenderer(key, label, selected) {
  let _a;
  const className = key.startsWith("country")
    ? `${(_a = key.split("=").pop()) === null || _a === void 0 ? void 0 : _a.replace(/[",]+/g, "")} country`
    : key;
  return createDiv(
    selected ? "active" : "",
    `<button><div class='icon-service icon-${className}'></div><div class='flex-grow'>${label}</div><div class='active-icon-wrapper'></div></button>`,
  );
}

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

  webapp.setConf(storeLocatorConfig);
  webapp.setFilterPanelRenderer(filterPanelRenderer);
  webapp.setFilterRenderer(filterRenderer);
  webapp.render(isMobileDevice());
}

initStoreLocator();

    

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

button {
  color: #1d1d1d;
  margin: 6px 0;
  align-items: center;
  border-radius: 32px;
  cursor: pointer;
  display: flex;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dadce0;
  font: inherit;
  list-style: none;
  outline: 0;
  overflow: visible;
  vertical-align: baseline;
  background: #fff;
}

.filter-group {
  padding: 0.8rem 10px;
  font-size: 0.8rem;
  background: #008248;
  text-transform: uppercase;
  color: white;
}

.title-filters {
  font-size: 1.1rem;
}

.filters-list button {
  position: relative;
  text-align: left;
  width: 100%;
  border-radius: 0;
  padding: 1.5rem 10px;
  margin: 0;
  border: none;
}

.active-icon-wrapper {
  width: 21px;
  height: 21px;
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false' style='width: 21px;height: 21px;'%3E%3Cpath d='M4.29 12.104c-.277-.308-.75-.332-1.06-.054-.306.278-.33.752-.053 1.06l4.485 4.963c.29.322.795.33 1.096.017L20.414 6.003c.288-.298.28-.773-.02-1.06-.297-.288-.772-.28-1.06.02L8.237 16.47 4.29 12.105z' fill='%2300a862' %3E%3C/path%3E%3C/svg%3E");
}

.active button {
  background: rgba(0, 168, 98, 0.15);
}

.active .active-icon-wrapper {
  display: block;
}

.flex-grow {
  flex-grow: 1;
}

.active-icon-wrapper {
  width: 21px;
  height: 21px;
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false' style='width: 21px;height: 21px;'%3E%3Cpath d='M4.29 12.104c-.277-.308-.75-.332-1.06-.054-.306.278-.33.752-.053 1.06l4.485 4.963c.29.322.795.33 1.096.017L20.414 6.003c.288-.298.28-.773-.02-1.06-.297-.288-.772-.28-1.06.02L8.237 16.47 4.29 12.105z' fill='%2300a862' %3E%3C/path%3E%3C/svg%3E");
}

.icon-service {
  width: 28px;
  height: 28px;
  margin-right: 12px;
  vertical-align: middle;
  position: relative;
}

.icon-WF {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M8.874 18.09c1.727-1.726 4.53-1.726 6.257 0 .196.197.512.197.708 0 .195-.194.195-.51 0-.706-2.12-2.118-5.553-2.118-7.672 0-.195.196-.195.512 0 .707.196.197.512.197.708 0zM5.234 14.447c3.74-3.74 9.804-3.74 13.544 0 .195.196.512.196.707 0 .195-.195.195-.51 0-.707-4.13-4.13-10.827-4.13-14.96 0-.194.196-.194.512 0 .707.197.196.513.196.71 0z'%3E%3C/path%3E%3Cpath d='M1.594 10.81c5.748-5.747 15.068-5.747 20.816 0 .195.197.512.197.707 0 .196-.194.196-.51 0-.706-6.138-6.14-16.09-6.14-22.23 0-.196.196-.196.512 0 .707.195.197.51.197.707 0z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-CD {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M18.9,9.5c0,0.8-0.6,1.4-1.4,1.4S16,10.3,16,9.5s0.6-1.4,1.4-1.4S18.9,8.7,18.9,9.5z M20,7.9v8.6 c0,0.5-0.4,0.9-0.9,0.9H5C4.5,17.4,4,17,4,16.5V7.9C4,7.4,4.5,7,5,7H19C19.5,7,20,7.4,20,7.9z M15,10.3H4.5v3.9H15V10.3z M19.4,7.9 c0-0.2-0.2-0.4-0.5-0.4h-3.4v9.4h3.4c0.3,0,0.5-0.2,0.5-0.4V7.9z M12.3,13.6h0.5v-1.7h-0.1v-0.5v-0.6h-0.5v0.6V12h0.1V13.6z M11.7,10.8h-0.5v1.7h0.5V10.8z M10.6,11.4h0.5v-0.6h-0.5h-0.5v1.1h0.5V11.4z M14.4,10.8h-1.1v2.8h1.1V10.8z M6.2,10.8H5.1v2.8h1.1 V10.8z M7.3,13H6.8v0.6h0.5V13z M12.2,13.1v-0.6h-0.5v0.6H12.2z M10.5,13.6V13H10v0.6H10.5z M11.1,12.5h-0.5v0.6h0.5v0.5h0.5V13 h-0.5V12.5z M10,11.9H9.5V13H10V11.9z M8.4,11.9v0.6H7.8v0.6h0.6v0.5h0.5h0.5V13H8.9v-0.5V12h0.5v-0.6H8.9v0.5H8.4z M7.8,12h0.5 v-0.6h0.6v-0.6H7.8H7.3v1.7h0.5V12z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-DT {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M7.23 15.46c-.618 0-1.12-.503-1.12-1.12 0-.617.502-1.12 1.12-1.12.618 0 1.12.503 1.12 1.12 0 .617-.502 1.12-1.12 1.12M12.9 13H8.86c-.39-.472-.972-.78-1.63-.78-1.17 0-2.12.95-2.12 2.12 0 1.17.95 2.12 2.12 2.12 1.17 0 2.12-.95 2.12-2.12 0-.117-.016-.23-.034-.34H12.9c.276 0 .5-.224.5-.5s-.224-.5-.5-.5'%3E%3C/path%3E%3Cpath d='M15.687 15.46c-.618 0-1.12-.503-1.12-1.12 0-.617.502-1.12 1.12-1.12.618 0 1.12.503 1.12 1.12 0 .617-.502 1.12-1.12 1.12m4.995-2.18l-.11-.72c-.105-.31-.226-.57-.42-.747l-.6-.886c-.19-.19-.388-.388-.727-.414l-2.618-.715-.1-.063C14.482 8.3 12.5 7.54 10.378 7.54h-1.89c-.086 0-.167 0-1.648.47l-1.37.536-.86.428c-.342.228-.604.576-.752 1.034l-.45 2.164c-.13.64.21 1.305.86 1.697.236.14.544.065.687-.172.143-.236.066-.544-.17-.686-.286-.17-.442-.425-.4-.64l.437-2.104c.032-.098.082-.19.135-.265l9.55 1.947c.034.007.067.01.1.01.233 0 .44-.163.49-.4.055-.27-.12-.535-.39-.59L6.412 9.278l.76-.326c.592-.187 1.273-.394 1.315-.412h1.89c1.875 0 3.627.673 5.047 1.925.144.142.393.287.624.32l2.646.708c.026.016.093.086.087.065l.604.885c.108.108.163.21.218.347l.095.657c.04.208-.095.426-.325.52-.035.013-.068.03-.098.05-.026.003-.06.003-.077.003h-1.422c-.156-1.017-1.03-1.8-2.088-1.8-1.17 0-2.12.95-2.12 2.12 0 1.17.95 2.12 2.12 2.12.93 0 1.713-.606 1.998-1.44h1.512c.125 0 .395 0 .62-.158.63-.29.992-.954.865-1.583'%3E%3C/path%3E%3C/svg%3E");
}

.icon-WA {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M13.0855488,13.9416667 C16.8673874,6.98142857 9.99511648,4.125 9.99511648,4.125 C10.9658715,5.29045238 10.8404945,7.46414286 7.95829063,10.325 C2.99086977,16.6327619 11.5326341,19.625 11.5326341,19.625 C10.5428159,16.6888571 12.3464846,15.13 13.0855488,13.9416667 L13.0855488,13.9416667 Z M13.037488,19.6563859 C13.0298004,19.6278299 13.0198064,19.5946432 13.0098125,19.5606846 C12.9882871,19.6409502 13.037488,19.6563859 13.037488,19.6563859 L13.037488,19.6563859 Z M15.6535868,9.78475104 C16.0366632,10.485147 15.2609518,13.5405607 14.1109872,14.875895 C12.2779555,17.1298172 12.8610258,18.7226179 13.056608,19.3677386 C13.0985184,19.2091858 13.4374786,18.7786205 15.1440437,17.6287493 C19.3799426,14.704978 15.6535868,9.78475104 15.6535868,9.78475104 L15.6535868,9.78475104 Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-DR {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M14.45 5.517c.09-.26.237-.256.326 0l.263.75.8.017c.276.006.32.146.102.31l-.64.48.233.762c.08.262-.04.346-.265.192l-.658-.455-.66.455c-.225.156-.343.067-.264-.192l.232-.762-.638-.48c-.22-.166-.17-.305.102-.31l.802-.016.263-.75z'%3E%3C/path%3E%3Cpath d='M13.6 16.6c0-.884-.716-1.6-1.6-1.6-.884 0-1.6.716-1.6 1.6 0 .884.716 1.6 1.6 1.6.884 0 1.6-.716 1.6-1.6zm1 0c0 1.436-1.164 2.6-2.6 2.6-1.436 0-2.6-1.164-2.6-2.6 0-1.436 1.164-2.6 2.6-2.6 1.436 0 2.6 1.164 2.6 2.6z'%3E%3C/path%3E%3Cpath d='M8.598 12.7l.644 8.628c.005.094.083.167.176.167h5.17c.093 0 .17-.073.176-.174l.643-8.62h-6.81zm7.812 0l-.648 8.688c-.037.622-.552 1.107-1.175 1.107h-5.17c-.62 0-1.136-.485-1.173-1.1L7.596 12.7H7.25c-.298 0-.53-.258-.497-.554l.177-1.598c.122-.527.458-1.048.983-1.048h8.18c.525 0 .86.522.992 1.106l.168 1.54c.032.296-.2.554-.497.554h-.346zm-.21-1l-.1-.927c-.016-.07-.062-.18-.112-.26-.005-.006-.007-.01-.004-.013H8.022c.002.002 0 .007-.005.014-.05.078-.096.188-.103.2l-.107.986H16.2z'%3E%3C/path%3E%3Cpath d='M16.547 1.39c.183-.522.48-.518.663 0l.262.75.798.015c.557.01.645.294.204.626l-.636.48.23.76c.163.53-.08.7-.535.386l-.655-.452-.656.452c-.46.316-.698.14-.538-.387l.232-.76-.636-.48c-.444-.334-.347-.614.196-.625l.81-.016.26-.75z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-XO {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M19.14 14.65c0 1.43-1.17 2.59-2.613 2.59-1.445 0-2.615-1.16-2.615-2.59 0-1.432 1.17-2.593 2.615-2.593 1.444 0 2.614 1.16 2.614 2.592m1 0c0-1.986-1.618-3.593-3.613-3.593-1.996 0-3.615 1.607-3.615 3.592 0 1.984 1.62 3.59 3.615 3.59s3.614-1.606 3.614-3.59'%3E%3C/path%3E%3Cpath d='M21.823 8.325h-11.29l.124-.682c.047-.197.234-.486.186-.486h11.18c-.048 0 .14.29.19.51l.12.658h-.51zM20.39 22.04c-.013.226-.198.4-.424.4H12.9c-.226 0-.41-.174-.425-.395l-.896-12.72h9.707L20.39 22.04zm2.803-14.574c-.154-.664-.572-1.31-1.17-1.31h-11.18c-.598 0-1.016.646-1.165 1.285l-.234 1.296c-.056.307.18.59.492.59h.64l.9 12.785c.046.745.67 1.33 1.424 1.33h7.066c.753 0 1.378-.585 1.423-1.334l.9-12.78h.64c.312 0 .547-.283.492-.59l-.23-1.27z'%3E%3C/path%3E%3Cpath d='M10.615 20.338h-7.2c-.384 0-.694-.308-.694-.685V2.283c0-.377.31-.685.695-.685h9.103c.384 0 .694.308.694.685v2.523c0 .276.223.5.5.5.276 0 .5-.224.5-.5V2.283c0-.93-.76-1.685-1.694-1.685H3.415c-.935 0-1.694.754-1.694 1.685v17.37c0 .93.76 1.685 1.695 1.685h7.2c.276 0 .5-.224.5-.5s-.224-.5-.5-.5'%3E%3C/path%3E%3Cpath d='M4.31 15.345V3.415l7.493.002V4.83c0 .277.224.5.5.5s.5-.223.5-.5V2.917c0-.277-.224-.5-.5-.5H3.81c-.277 0-.5.223-.5.5v12.928c0 .275.223.5.5.5h6.435c.276 0 .5-.224.5-.5 0-.277-.224-.5-.5-.5H4.31zM8.482 18.426c0 .315-.26.572-.58.572-.322 0-.58-.257-.58-.572 0-.315.258-.572.58-.572.32 0 .58.257.58.572m1 0c0-.87-.708-1.572-1.58-1.572-.873 0-1.58.703-1.58 1.572 0 .87.707 1.572 1.58 1.572.872 0 1.58-.703 1.58-1.572'%3E%3C/path%3E%3C/svg%3E");
}

.icon-NB {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M12.2117247,15.2225464 C10.8125947,15.2225464 9.67870268,14.1212139 9.67870268,12.7629135 C9.67870268,11.4043205 10.8125947,10.3029879 12.2117247,10.3029879 C13.6108547,10.3029879 14.7447467,11.4043205 14.7447467,12.7629135 C14.7447467,14.1212139 13.6108547,15.2225464 12.2117247,15.2225464 M18.7160816,5.39689239 C18.7151774,5.38020996 18.7136703,5.36382022 18.7109577,5.34743047 C18.7085464,5.33367479 18.7052309,5.32021178 18.7016141,5.30674877 C18.6973944,5.29152972 18.6928733,5.27660334 18.687448,5.26196964 C18.6820226,5.2487993 18.6762959,5.23592165 18.6699664,5.22333666 C18.663034,5.20987365 18.6558002,5.19670332 18.6476623,5.18382566 C18.6401271,5.17153335 18.6316877,5.16011906 18.6226455,5.14870477 C18.6136033,5.13699781 18.6039583,5.12558352 18.5937105,5.1144619 C18.583764,5.10421831 18.5732148,5.09456007 18.5623642,5.08490182 C18.5509107,5.0749509 18.5394573,5.06529266 18.5270996,5.05651244 C18.5150433,5.04802489 18.502987,5.04041536 18.4900266,5.03309851 C18.4770661,5.02548899 18.4638042,5.01817213 18.4499395,5.0117333 C18.4360748,5.00558715 18.4219086,5.00002634 18.4074411,4.99505088 C18.3929736,4.99007542 18.3788075,4.98568531 18.3640385,4.98217322 C18.3486668,4.97836846 18.3326923,4.97573439 18.3167177,4.973393 C18.3073741,4.9722223 18.2989347,4.96929556 18.2895911,4.96841754 C18.2832616,4.96812487 18.2772334,4.96929556 18.2712053,4.96900289 C18.2639715,4.96871021 18.2573406,4.96695417 18.2504082,4.96695417 L5.96868744,4.96695417 C5.96115227,4.96695417 5.95421992,4.96871021 5.94698616,4.96900289 C5.94035521,4.96929556 5.93402567,4.96841754 5.92739472,4.96871021 C5.91865393,4.96958824 5.91081735,4.9722223 5.90237796,4.973393 C5.88549919,4.97573439 5.86922322,4.97866113 5.85294726,4.9824659 C5.83878115,4.98597799 5.82491644,4.9903681 5.81135314,4.99505088 C5.7962828,5.00031901 5.78181528,5.00587982 5.76734776,5.01261133 C5.75408586,5.01875748 5.74112537,5.02578166 5.72846629,5.03309851 C5.7155058,5.04070804 5.70284672,5.04890291 5.69048904,5.05768313 C5.67843277,5.06617068 5.66728073,5.07524358 5.65643008,5.08490182 C5.64497663,5.09485274 5.63412599,5.10509633 5.62387816,5.11592527 C5.61393174,5.12646154 5.60488954,5.13729048 5.59614874,5.14870477 C5.58680513,5.16070441 5.57806434,5.17270405 5.56992636,5.1855817 C5.56239119,5.19758134 5.55576024,5.21016633 5.54912929,5.22275131 C5.54249835,5.23650699 5.53616881,5.24997 5.53074348,5.26431103 C5.52561957,5.27777404 5.52139988,5.29182239 5.51748159,5.30587075 C5.5135633,5.32050445 5.50994642,5.33484548 5.50753517,5.35006453 C5.50512391,5.36499091 5.50391829,5.37991729 5.50301407,5.39542902 C5.50241125,5.40420924 5.5,5.41269679 5.5,5.42176968 C5.5,5.42908653 5.50180844,5.43552536 5.50241125,5.44254954 C5.50271266,5.44898837 5.50150703,5.4554272 5.50210985,5.46186603 L5.61121908,6.66065904 C5.63261895,6.8971397 5.83697271,7.07537821 6.07689245,7.07537821 C6.09075716,7.07537821 6.10492327,7.07479286 6.11878798,7.07362216 C6.37649072,7.05167161 6.56697977,6.83070268 6.54407286,6.58046635 L6.48017463,5.8765852 L17.7410309,5.8765852 L17.6126316,7.36424752 L9.92374634,7.36424752 C9.39507896,8.23787963 10.7625612,10.584833 8.8983607,10.584833 C7.03416017,10.584833 8.15207768,8.23787963 7.8612202,7.36424752 L6.12089783,7.36424752 C5.98194934,7.36424752 5.85053601,7.42424571 5.76131962,7.52785233 C5.67240464,7.63116628 5.63533161,7.76784507 5.66004697,7.90042643 L5.76252525,8.44919032 L6.81624312,20.6569187 C6.86265975,21.4102617 7.50797153,22 8.28499804,22 L15.9395229,22 C16.7165495,22 17.3612584,21.4102617 17.4073736,20.6680403 L18.5129335,7.85740334 C18.5135363,7.84891579 18.5120292,7.84101359 18.5123307,7.83252604 L18.7169858,5.45981731 C18.7175886,5.45308581 18.716383,5.44635431 18.7166844,5.4396228 C18.7169858,5.43347665 18.7184928,5.42791584 18.7184928,5.42176968 C18.7184928,5.41328213 18.716383,5.40537993 18.7160816,5.39689239 Z M5.82096801,4.59484835 C6.03888506,4.7286004 6.32823551,4.6653828 6.4668826,4.45407212 C6.47652761,4.43885307 7.47147117,2.94621529 8.99206805,2.94621529 C9.77421847,2.94621529 10.0840646,3.16103806 10.44304,3.41010369 C10.8381842,3.68404663 11.286376,3.9948665 12.2116946,3.9948665 C13.0670868,3.9948665 13.4902618,3.69487557 13.8637048,3.43029821 C14.2416688,3.16250143 14.5985343,2.90963103 15.5856413,2.90963103 C17.3235524,2.90963103 17.8877858,4.30246695 17.9134054,4.36831862 C17.9830303,4.55182526 18.1620659,4.66596815 18.3528564,4.66596815 C18.4059039,4.66596815 18.4598557,4.65689525 18.5129033,4.63816411 C18.7561385,4.55241061 18.8815237,4.29163801 18.7932116,4.05545003 C18.7615639,3.97174524 17.9959908,2 15.5856413,2 C14.2932093,2 13.7488688,2.38545176 13.3115277,2.6953936 C12.9802817,2.93011821 12.7614604,3.0849428 12.2116946,3.0849428 C11.586577,3.0849428 11.3352038,2.91080172 10.9873805,2.66963828 C10.5804814,2.38750048 10.0741181,2.03658426 8.99206805,2.03658426 C6.94853053,2.03658426 5.72542208,3.8897965 5.67418294,3.9688185 C5.53704289,4.18100721 5.60274955,4.46080362 5.82096801,4.59484835 Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-hrs24 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M20.947 19.25c0 2.068-1.68 3.75-3.748 3.75l-10.786.004c-2.067 0-3.75-1.68-3.75-3.748l-.002-7.666c0-2.066 1.68-3.748 3.747-3.75l10.785-.002c2.067 0 3.75 1.68 3.75 3.747l.002 7.666zM14.61 1.01c.305 0 .555.25.555.555 0 .307-.25.557-.556.557-.308 0-.558-.25-.558-.556 0-.307.25-.557.557-.557zm4.07 6.09c-.03-.056-.07-.107-.12-.15l-4.733-3.895.098-.098c.207.102.438.165.684.165.858 0 1.556-.7 1.555-1.557 0-.858-.698-1.557-1.557-1.556-.858 0-1.556.697-1.556 1.556 0 .246.063.477.166.684l-1.703 1.704c-.195.195-.195.512 0 .707.098.1.226.147.354.147.126 0 .254-.05.352-.146l.895-.894 3.73 3.072-10.09.003 5.362-4.42c.212-.175.242-.49.066-.704-.177-.21-.49-.243-.704-.067L5.045 6.954c-.05.042-.09.093-.12.148-1.89.627-3.264 2.39-3.263 4.488l.002 7.667c0 2.618 2.132 4.748 4.75 4.747L17.2 24c2.618 0 4.748-2.13 4.747-4.75l-.002-7.665c0-2.097-1.377-3.86-3.266-4.486z'%3E%3C/path%3E%3Cpath d='M10.71 19.48H7.372l2.638-3.703c1.237-1.502 1.355-3.59.24-4.9-.72-.82-1.796-1.085-2.81-.697-1.14.438-1.87 1.533-1.855 2.79l.007.638c.003.275.227.495.5.495h.005c.276-.002.498-.23.495-.505l-.007-.64c-.01-1.014.646-1.626 1.212-1.844.623-.24 1.26-.082 1.728.45.757.893.63 2.463-.308 3.605l-3.223 4.52c-.108.153-.123.354-.037.52.086.166.257.27.445.27h4.308c.277 0 .5-.224.5-.5 0-.277-.224-.5-.5-.5M15.607 17.125h-2.62l2.62-4.7v4.7zm2.198-.002l-1.197.002-.003-6.623c0-.228-.154-.427-.373-.485-.223-.056-.45.043-.563.242l-3.972 7.123c-.087.154-.084.344.006.495.09.154.253.247.43.247h3.473l.002 1.854c-.002.274.223.497.498.497.276 0 .5-.223.5-.5v-1.852l1.197-.002c.276 0 .5-.223.5-.5 0-.276-.224-.5-.5-.5z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-CL {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M3.23090951,11.311021 L20.5802026,11.311021 L20.5802026,12.2564529 L3.23090951,12.2564529 L3.23090951,11.311021 Z M11.8109044,7.09288379 L9.40506834,8.67561832 L10.2148873,5.96913845 L7.91817991,4.24084231 L10.8245116,4.15088028 L11.8109044,1.5 L12.7972971,4.15088028 L15.7036288,4.24084231 L13.4069214,5.96913845 L14.2167404,8.67561832 L11.8109044,7.09288379 Z M9.21349903,22.0059765 L10.4329217,22.0059765 L10.4329217,19.6718073 L11.9398505,19.6718073 L11.9596785,19.6718073 L13.6648875,22.0059765 L15.1024183,22.0059765 L13.2286712,19.4709157 C14.2002438,19.2030602 14.8843102,18.5429878 14.8843102,17.4428671 L14.8843102,17.4237346 C14.8843102,16.8401923 14.676116,16.3427464 14.3092978,15.9792283 C13.8631676,15.5583125 13.1791012,15.3095896 12.3066687,15.3095896 L9.21349903,15.3095896 L9.21349903,22.0059765 Z M10.4329217,18.6290842 L10.4329217,16.3810115 L12.2075287,16.3810115 C13.1097032,16.3810115 13.6450595,16.7732284 13.6450595,17.4906985 L13.6450595,17.509831 C13.6450595,18.189036 13.0898752,18.6290842 12.2174427,18.6290842 L10.4329217,18.6290842 Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-isOpen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M20.94 19.25c0 2.067-1.68 3.75-3.747 3.75H6.407C4.34 23 2.66 21.316 2.66 19.25v-7.666c0-2.066 1.68-3.748 3.747-3.748h10.786c2.066 0 3.748 1.682 3.748 3.748v7.666zM14.61 1.006c.307 0 .557.25.557.557 0 .306-.25.556-.557.556-.307 0-.557-.25-.557-.557 0-.307.25-.557.558-.557zm4.068 6.09c-.03-.054-.07-.105-.12-.147l-4.73-3.898.098-.098c.207.102.437.165.684.165.858 0 1.557-.7 1.557-1.557 0-.86-.7-1.557-1.557-1.557-.858 0-1.557.698-1.557 1.557 0 .246.064.476.167.684L11.513 3.95c-.195.196-.195.512 0 .707.098.098.226.147.354.147.128 0 .256-.05.353-.147l.895-.895 3.73 3.074H6.756l5.364-4.42c.212-.175.242-.49.066-.703-.177-.212-.49-.243-.704-.067L5.044 6.95c-.05.04-.09.092-.12.147-1.89.626-3.265 2.39-3.265 4.487v7.666c0 2.618 2.13 4.75 4.747 4.75h10.786c2.618 0 4.748-2.132 4.748-4.75v-7.666c0-2.097-1.375-3.86-3.264-4.487z'%3E%3C/path%3E%3Cpath d='M11.81 13.61c.954 0 1.73.777 1.73 1.73 0 .956-.776 1.732-1.73 1.732s-1.73-.776-1.73-1.73c0-.955.776-1.73 1.73-1.73m0 4.46c1.506 0 2.73-1.225 2.73-2.73 0-1.506-1.224-2.73-2.73-2.73s-2.73 1.224-2.73 2.73c0 1.505 1.224 2.73 2.73 2.73'%3E%3C/path%3E%3Cpath d='M14.498 20.668c-.005.086-.077.153-.163.153H9.273c-.086 0-.157-.065-.162-.157l-.63-9.022h6.65l-.632 9.028zm-6.696-10.33c.02-.085.07-.196.114-.26h7.777c.042.063.093.168.11.234l.057.33H7.747l.055-.304zm8.007-1.26H7.8c-.578 0-.89.675-.978 1.058l-.164.917c-.026.145.014.295.11.41.094.112.234.178.382.178h.327l.636 9.088c.036.613.545 1.093 1.16 1.093h5.062c.613 0 1.124-.478 1.16-1.087l.637-9.092h.326c.148 0 .288-.065.384-.178.094-.114.135-.264.108-.41l-.17-.94c-.08-.358-.39-1.035-.97-1.035z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-LB {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' focusable='false'%3E%3Cpath d='M11.1,14.9c0.2,0.2,0.3,0.5,0.3,0.9c0,0.2-0.1,0.6-0.2,1c-0.1,0.4-0.3,0.8-0.3,1c0,0.2,0.2,0.4,0.3,0.7l0,0.3 l-0.8-0.8c-0.5,0.6-1,0.8-1.9,0.8c-0.9,0-1.6-0.3-2.1-0.9c-0.2,0.4-0.5,0.9-0.9,0.9c-0.1,0-0.5,0-1.1,0H4.1v-1.3 c0.5,0,0.9-0.1,1.1-0.4c0.1-0.1,0.3-0.4,0.3-0.8v-3.5c-0.3,0-0.6-0.2-0.6-0.5c0-0.3,0.2-0.6,0.6-0.6v-3c0-0.4-0.1-0.6-0.3-0.8 C5,7.7,4.7,7.6,4.1,7.6V6.3h0.1c0.6,0,1,0.1,1.3,0.2C6,6.5,6.3,6.8,6.4,7.2c0.2-0.3,0.4-0.6,0.7-0.7c0.3-0.1,0.8-0.2,1.4-0.2h0.2 v1.3c-0.5,0-1,0.1-1.2,0.3C7.4,8,7.4,8.3,7.4,8.7v3c0.3,0,0.5,0.3,0.5,0.6c0,0.3-0.2,0.5-0.5,0.5v2.7c0,1.3,0.4,1.9,1.2,1.9 c0.4,0,0.7-0.2,0.9-0.4C9.2,16.6,9,16.2,9,15.8c0-0.4,0.1-0.7,0.3-0.9c0.2-0.2,0.5-0.4,0.9-0.4C10.6,14.5,10.9,14.7,11.1,14.9z M20,15c0,2.5-1.1,3.7-3.2,3.7c-1.1,0-1.8-0.3-2.2-0.9c-0.1,0.4-0.5,0.9-1,0.9c-0.1,0-0.5,0-1.1,0h-0.3v-1.4c0.5,0,1-0.1,1.2-0.3 c0.1-0.1,0.2-0.4,0.2-0.8v-3.5c-0.3,0-0.4-0.2-0.4-0.5c0-0.3,0.1-0.6,0.4-0.6l0-3c0-0.4,0-0.6-0.2-0.8c-0.2-0.2-0.7-0.3-1.2-0.4V6.3 h0.3c1.2,0,1.9,0.4,2.1,0.9c0.5-0.6,1.2-0.9,2.2-0.9c2.1,0,3.2,1.1,3.2,3.4c0,1.4-0.5,2.3-1.4,2.6C19.5,12.8,20,13.7,20,15z M15.4,11.7l1,0c1,0,1.5-0.7,1.5-2c0-0.3,0-0.5,0-0.8c0-0.3-0.1-0.5-0.1-0.7s-0.2-0.4-0.4-0.5c-0.2-0.1-0.3-0.1-0.6-0.1 C16,7.6,15.4,8,15.4,9V11.7z M18.1,15c0-1.4-0.7-2.2-1.8-2.2l-0.9,0l0,3.3c0,1,0.5,1.4,1.2,1.4C17.5,17.5,18.1,16.7,18.1,15z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-VS {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' focusable='false'%3E%3Cpath d='M4.843 5.279v-.196h1.997c1.924 0 2.511 1.196 2.511 1.196l5.361 9.386 2.579-5.424s.474-.993-.311-.993c-1.24 0-2.247-1.011-2.247-2.257 0-1.247 1.007-2.26 2.247-2.26h-.001c1.24 0 2.245 1.012 2.245 2.26h.001c0 .386-.219.895-.219.895-.171.419-.402.884-.473 1.028l-4.682 9.912-7.21-12.548s-.597-1-1.797-1'%3E%3C/path%3E%3C/svg%3E");
}

.country {
  background-size: contain;
}

.icon-GB {
  background-image: url("https://developers.woosmap.com/assets/images/countries/united_kingdom_2x.png");
}

.icon-FR {
  background-image: url("https://developers.woosmap.com/assets/images/countries/france_2x.png");
}

.icon-US {
  background-image: url("https://developers.woosmap.com/assets/images/countries/us_2x.png");
}

.icon-DE {
  background-image: url("https://developers.woosmap.com/assets/images/countries/germany_2x.png");
}


    

            <html>
  <head>
    <title>Store Locator Widget - Custom Filters</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>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

    

Running the Sample Locally

Before you can run this sample on your local machine, you need to have Git and Node.js installed. If they’re not already installed, follow these instructions to get them set up.

Once you have Git and Node.js installed, you can run the sample by following these steps:

Clone the repository and navigate to the directory of the sample.
Install the necessary dependencies.
Start running the sample.

Here are the commands you can use in your terminal to do this:

        git clone -b sample/store-locator-widget-custom-filters https://github.com/woosmap/js-samples.git
cd js-samples
npm i
npm start

You can experiment with other samples by switching to any branch that starts with the pattern sample/SAMPLE_NAME.

        git checkout sample/SAMPLE_NAME
npm i
npm start

Was this article helpful?

Have more questions? Submit a request