Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

Store Locator

v0.0.0

The Store Locator allows visitors to the site to find locations (of pharmacies) within proximity of an address or postal code or within a selected region.

Example shows a store locator inside a container with modifer column. For more layout options look here.

or
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Store Locator  -->
  <div class="vi-store-locator" data-endpoint="/api/map-locator/locations.json" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-ip-lookup-key="6751675a13e2f097805aa47e57aa73bf" data-ip-lookup-service="google" data-latlng="52.1651876,5.6710352" data-nearby-distance="30000" data-nearby-max-results="3" data-noresults="aucun résultat pour %">
    <div class="vi-store-locator__search-bar">
      <div class="vi-store-locator__input vi-form vi-form--accent">
        <label class="sr-only" for="location-d13c3b">Enter City, Province or Postal code</label>
        <!-- Input Extend  -->
        <div class="vi-input-extend" data-form-field-proxy="true">
          <input class="form-control" id="location-d13c3b" placeholder="Enter City, Province or Postal code" type="text">
          <!-- Button type: input-extend  -->
          <button aria-label="Clear Input" disabled data-clear-input="location-d13c3b" type="button" class="vi-btn-input-extend vi-btn"><!-- Icon cross-sign  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg></button>
        </div>
      </div>
      <div class="vi-store-locator__triggers">
        <div class="vi-store-locator__or">or</div>
        <div class="vi-store-locator__current-location">
          <!-- Button type: outline  -->
          <button type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--accent-1 vi-btn">Use my current location
            <span class="vi-store-locator__current-location-loader">
              <!-- Loading Indicator  -->
              <span class="vi-loading-indicator" role="status"><span class="sr-only">Loading</span>
                <progress class="vi-loading-indicator__progress"></progress>
              </span></span></button>
        </div>
      </div>
    </div>
    <div class="vi-store-locator__map"></div>
  </div>
</div>

For the map to work, HTTPS protocol is required.

The map requires the following data-attributes:

  • data-google-key is required use the APIs from google:*
    • Maps JavaScript API (display and control the map)
    • Places API (autocomplete service for suggestions)
    • Geocoding API (reversed lookup to normalize 'input' location)
    • Geolocation API (ip lookup when using google as service)
    • Distance Matrix API (driving distance between normalized 'input' location and store)
  • data-latlng Start position for the map.
  • data-endpoint URL to json or jsonp endpoint (see Markers for JSON structure). Points to a server that returns the stores (location of the marker and data for the corresponding info window) based on given location.

* Instead of using data-google-key on every Store Locator, the key can also be set by creating a meta tag: <meta name="google-key" id="google-key" content="the-key-xyz" />

To switch the IP lookup service use data-attributes:

  • data-ip-lookup-service Can be google or ipstack. Default is google.
  • data-ip-lookup-service-key Only required when using ipstack.*

* Instead of using data-ip-lookup-service-key on every Store Locator, the key can also be set by creating a meta tag: <meta name="ipstack-key" id="ipstack-key" content="the-key-xyz" />

Following data-attributes are optional:

  • data-zoom Start zoom level for the map.
  • data-country Single or comma seperated list of ISO 3166-1 Alpha-2 country codes required to restrict suggestions on the manual input field (the autocomplete). You can provide a single one, or an array of up to five (limited by Google API) country code strings.
  • data-label-get-directions 'Get directions' label displayed in infowindow.
  • data-nearby-distance When set (in meters*) it works as follows:
    • When 1 result in data it shows this with zoomlevel specified by entry
    • When multiple results, the data is checked against google Distance Matrix API:
      • When 1 closer than data-nearby-distance, it shows this with zoomlevel specified by entry
      • When multiple closer than data-nearby-distance, it zooms to a level where those items are in view.
  • data-nearby-max-results Limits the results that receive focus. The map zooms to a level where only those items are in view. Works with or without the combination of data-nearby-distance. This can be useful in urban areas.
  • data-icon-scale Number from 0.2 to 1. The scale factor for the icon. Default is 1.
  • data-noresults to change the 'no results' text (i18n)

* Results from server (point to point distance) are going through googles distanceMatrixService to take driving distance into account. Since 'nearby' is a relative concept, nearby distance has to be set in meters.

InfoWindow Content #

The content of the InfoWindow is divided in four areas. The title, the address lines, the 'Get directions' line and the contact lines.

To change the 'Get directions' text, use the data-label-get-directions on the map.

Displayed inside InfoWindow.

Umami phlogiston vice.

15394 Mraz Camp

Suite 578

10539-8088 Parisianbury

Alaska

Get directions

1-375-147-5074 x82794

bob.koch@example.com

http://example.com 

<!-- Info Window -->
<div class="vi-info-window" style="left: 20px; right: 20px; max-width: 400px;">
  <div class="vi-info-window__container vi-info-window__container--bottom" style="transform: none; width: 100%">
    <div class="vi-info-window__wrap vi-info-window__wrap--bottom" style="width: 100%">
      <div class="vi-info-window__body" style="width: 100%">
        <div class="vi-info-window__close">
          <!-- Button type: close  -->
          <button aria-label="Close" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn-close--sm vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
        </div>
        <div class="vi-info-window__content">
          <!-- Info Window Content -->
          <div class="vi-info-window-content vi-typesystem">
            <h5 class="vi-info-window-content__title">Umami phlogiston vice.</h5>
            <div class="vi-info-window-content__section">
              <p class="vi-info-window-content__section-line">15394 Mraz Camp</p>
              <p class="vi-info-window-content__section-line">Suite 578</p>
              <p class="vi-info-window-content__section-line">10539-8088 Parisianbury</p>
              <p class="vi-info-window-content__section-line">Alaska</p>
            </div>
            <div class="vi-info-window-content__section">
              <p class="vi-info-window-content__section-line">
                <a href="#" target="_blank">Get directions</a>
              </p>
            </div>
            <div class="vi-info-window-content__section">
              <p class="vi-info-window-content__section-line">
                <a href="tel:1-375-147-5074x82794" target="_blank">1-375-147-5074 x82794</a>
              </p>
              <p class="vi-info-window-content__section-line">
                <a href="mailto:bob.koch@example.com" target="_blank">bob.koch@example.com</a>
              </p>
              <p class="vi-info-window-content__section-line">
                <a href="http://example.com/jeannie" target="_blank">http://example.com</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Markers #

When location is selected a GET request to the the url provided by data-endpoint is made with following parameters:

  • lat float ranging between -90 and 90 degrees.
  • lng float ranging between -180 and 180 degrees.

Server should respond with a JSON formatted as an array of markers (locations of pharmacies). Ordered by distance ASC (closest first). Limit the result set at own discretion.

Each marker has the following keys:

  • latitude float ranging between -90 and 90 degrees
  • longitude float ranging between -180 and 180 degrees
  • title string containing the title of the content
  • address array of string containing address lines of the content
  • contact array of objects containing link data for the contact lines of the content
  • zoom (optional) integer tweak zoomlevel of marker, only when shown individually
  • filters (optional) array of objects containing filter data. Only required when using store locator filters.

A link data object contains url, label and target keys. A filter data object contains key and label keys, where the key names corresponds with one of the value attributes of the store locator filter checkboxes.

An example of the JSON with one marker.

[
  {
    "latitude": 52.35679046889015,
    "longitude": 4.690841060708582,
    "title": "Sustainable squid echo.",
    "address": [
      "296 Walker Court",
      "Apt. 543",
      "96042, East Bill",
      "Delaware"
    ],
    "contact": [
      {
        "url": "tel:1-691-122-1784",
        "target": "_blank",
        "label": "1-691-122-1784"
      },
      {
        "url": "mailto:jani@example.net",
        "target": "_blank",
        "label": "jani@example.net"
      },
      {
        "url": "http://example.com/alejandro.glover",
        "target": "_blank",
        "label": "http://example.com"
      }
    ],
    "zoom": 13,
    "filters": [
      {
        "key": "abc",
        "label": "ABC Pharmacy"
      },
      {
        "key": "xyz",
        "label": "XYZ Pharmacy"
      }
    ]
  }
]

This would result in following InfoWindow Content.

<!-- Info Window Content -->
<div class="vi-info-window-content vi-typesystem">
  <h5 class="vi-info-window-content__title">Sustainable squid echo.</h5>
  <div class="vi-info-window-content__section">
    <p class="vi-info-window-content__section-line">296 Walker Court</p>
    <p class="vi-info-window-content__section-line">Apt. 543</p>
    <p class="vi-info-window-content__section-line">96042, East Bill</p>
    <p class="vi-info-window-content__section-line">Delaware</p>
  </div>
  <div class="vi-info-window-content__section">
    <p class="vi-info-window-content__section-line">
      <a href="#" target="_blank">Get directions</a>
    </p>
  </div>
  <div class="vi-info-window-content__section">
    <p class="vi-info-window-content__section-line">
      <a href="tel:1-691-122-1784" target="_blank">1-691-122-1784</a>
    </p>
    <p class="vi-info-window-content__section-line">
      <a href="mailto:jani@example.net" target="_blank">jani@example.net</a>
    </p>
    <p class="vi-info-window-content__section-line">
      <a href="http://example.com/alejandro.glover" target="_blank">http://example.com</a>
    </p>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Change

  • 15 Nov 2024 - feat(store-locator): update input field to use input extend wrapper and input extend button with data-clear-input attribute.
  • 23 Aug 2024 - Submit on select
  • 13 Jun 2024 - Update Map API version to 3.57
  • Update Map API version to 3.47
  • Allow data-icon-scale to be number from 0.2 to 1 (including)

Added

  • 19 Feb 2024 - Show example of noresults data attribute.
  • 19 Feb 2024 - Sanitize empty array items in the data.
  • The ability to use filters and documentation.
  • Data attribute data-icon-scale for scaling the icon.
  • RTL support (need info on dropdown formatting)
  • Initial draft

FIX

  • 15 Aug 2024 - Remove IE11 polyfill
  • 13 Jun 2024 - Fix Malaga issue somwhat blinded. Can not recreate the scenario.
  • IE11 issue after dependency upgrade.
  • Fix RTL support, secondary text different order. Might need finetuning from native speakers.
  • Fix RTL support, demo requires extra js (because of the direction switch)
  • RTL infowindow not under pin.
  • Break long sentences on word.