Mcdonald's Store Locator (basic)

by woosmap

HTML

<div id="store-locator"></div>
<script type="text/javascript" src="https://webapp.woosmap.com/webapp.js"></script>
<script type="text/javascript">
const locatorConfig = {
  "theme": {
    "primaryColor": "#074413"
  },
  "datasource": {
    "maxResponses": 20,
    "maxDistance": 50000
  },
  "internationalization": {
    "lang": "fr"
  },
  "maps": {
    "provider": "google",
    "apiKey": "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk",
    "channel": "",
    "localities": {
      "language": "fr",
      "componentRestrictions": {
        "country": [
          "fr-fr", "mc"
        ]
      }
    }
  },
  "woosmapview": {
    "initialCenter": {
      "lat": 46.967893,
      "lng": 2.661248
    },
    "initialZoom": 6,
    "tileStyle": {
      "color": "#074413",
      "size": 10,
      "minSize": 8
    },
    "breakPoint": 10,
    "style": {
      "default": {
        "icon": {
          "url": "https://s3.eu-central-1.amazonaws.com/webapp-conf.woosmap.com/woos-5c01c14b-d766-3a17-865a-5c7373b67b8a/default_mcdo.svg"
        },
        "selectedIcon": {
          "url": "https://s3.eu-central-1.amazonaws.com/webapp-conf.woosmap.com/woos-5c01c14b-d766-3a17-865a-5c7373b67b8a/selected_mcdo.svg"
        }
      }
    }
  },
  "filters": {
    "filters": [
      {
        "propertyType": "type",
        "title": {
          "fr": "Services"
        },
        "choices": [
          {
            "key": "3",
            "fr": "McCafé"
          },
          {
            "key": "5",
            "fr": "McDrive"
          },
          {
            "key": "26",
            "fr": "P'tit Dej"
          },
          {
            "key": "29",
            "fr": "Minuit ou plus"
          }
        ],
        "innerOperator": "and"
      }
    ]
  }
}

function loadStoreLocator() {
  const webapp = new WebApp('store-locator', 'woos-5c01c14b-d766-3a17-865a-5c7373b67b8a');
  const isMobile = document.querySelector('body').clientWidth < 650;
  webapp.setConf(locatorConfig);
 ...

CSS

#store-locator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}