Store Locator Widget

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

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Store Locator Widget</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;
}

JavaScript

const storeLocatorConfig = {
  theme: {
    primary_color: "#000",
  },
  datasource: {
    max_responses: 5,
    max_distance: 50000,
  },
  internationalization: {
    lang: "en",
    unitSystem: 0,
    customTranslations: {
      en: {
        storeview: {
          visitStorePage: "Visit Store Page",
        },
      },
    },
  },
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
    },
    w3w: true,
  },
  woosmapview: {
    initialCenter: {
      lat: 48.967529,
      lng: 2.368438,
    },
    initialZoom: 6,
    tileStyle: {
      color: "#2d2d2d",
      size: 11,
      minSize: 5,
      typeRules: [
        {
          type: "bose_store",
          color: "#2d2d2d",
          zIndex: 10,
        },
        {
          type: "professional_systems",
          color: "#733f00",
          zIndex: 1,
        },
        {
          type: "bose_excellence_centre",
          color: "#ef8900",
          zIndex: 8,
        },
        {
          type: "bose_reseller",
          color: "#607c92",
          zIndex: 5,
        },
        {
          type: "bose_factory_store",
          color: "#607c92",
          zIndex: 6,
        },
      ],
    },
    baseMapStyle: [
      {
        featureType: "water",
        elementType: "geometry.fill",
        stylers: [
          {
            color: "#d3d3d3",
          },
        ],
      },
      {
        featureType: "transit",
        elementType: "all",
        stylers: [
          {
            saturation: -100,
          },
          {
            visibility: "simplified",
          },
        ],
      },
      {
        featureType: "transit.station",
        elementType: "all",
        stylers: [
          {
            visibility: "on",
          },
        ],
      },
      {
        featureType: "road.highway",
        elementType: "geometry.stroke",
        stylers: [
          {
            visibility: "on",
          },
          {
            color: "#b3b3b3",
          },
        ],
...