# StoreLocator

# Most common usage scenario

NOT YET DOCUMENTED

This section is not fully documented yet. We are doing our best to make our documentation a good and complete source of knowledge about Storefront UI. If you would like to help us, please don't hesitate to contribute to our docs. You can read more about it here.

# Props

  • tileServerUrl

    • Url of selected tileserver
    • type: string
    • defaultValue: "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}"
  • tileServerAttribution

    • Attribution line of selected tileserver
    • type: string
    • defaultValue: "Tiles © Esri — Esri, DeLorme, NAVTEQ"
  • center

    • Initial center of the map, overriden when the user position is captured, supports sync modifier
    • type: array|object
    • defaultValue: () => [0, 0]
  • zoom

    • Initial zoom of the map
    • type: number
    • defaultValue: 6
  • maxZoom

    • Max zoom allowed, consider tileserver limitation when setting this
    • type: number
    • defaultValue: 16
  • markerIconSize

    • Size of the icon [width, height]
    • type: array
    • defaultValue: () => [21, 28]
  • markerIconAnchor

    • Position of the anchor in the icon [x, y]
    • type: array
    • defaultValue: () => [10.5, 0]
  • mapOptions

    • Options to pass to leaflet map
    • type: object
    • defaultValue: {}
  • tileLayerOptions

    • Options to pass to leaflet tile-layer
    • type: object
    • defaultValue: {}
  • markerOptions

    • Options to pass to leaflet marker
    • type: object
    • defaultValue: {}
  • flyToStoreZoom

    • Zoom to be set when centering map on clicked store
    • type: number
    • defaultValue: 15

# Slots

  • default

    • Use this slot to show stores cards
    • bindings: center-on, register-store, remove-store, user-position, calculate-distance
  • marker-icon

    • Use this slot to change the icon of the stores, remember to update markerIconSize and markerIconAnchor accordingly
  • map-loading

    • Use this slot to customise the loading indicator while the map librry loads
    • bindings: class

# Events

  • update:zoom

  • map:ready

  • 'location:errors'

    • Location error event.
  • update:center

  • 'library:loaded'

    • Library loaded event, the library is ready and the map is initialising

# CSS modifiers

None.

# SCSS variables

$store-locator__font-family-primary: $body-font-family-primary !default;
$store-locator__list-width-desktop: 33% !default;
$store-locator__list-max-width-desktop: 26.25rem !default;
$store-locator__list-width-mobile: 100% !default;
$store-locator__map-width-desktop: 66% !default;
$store-locator__map-max-width-desktop: 43.75rem !default;
$store-locator__map-min-height-desktop: 34.375rem !default;
$store-locator__map-width-mobile: 100% !default;
$store-locator__map-min-height-mobile: 26.875rem !default;
$store__media-width: 5.125rem !default;
$store__media-height: 7rem !default;
$store__media-margin: 0 1.25rem 0 0  !default;
$store__item-font-size: $font-size-extra-small-desktop !default;
$store__name-font-size: $font-size-regular-desktop !default;
$store__name-font-weight: $h1-font-weight-desktop !default;
$store__color-primary: $c-dark-primary !default;
$store__color-secondary: $c-gray-secondary !default;
$store__font-family-primary: $body-font-family-primary !default;
$store__font-family-secondary: $body-font-family-secondary !default;

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Internal components

# Store

# Props

  • latlng

    • Name of the store
    • type: array
    • required: true
  • name

    • Name of the store
    • type: string
    • required: true
  • picture

    • Url of the picture of the store
    • type: string
    • defaultValue: null
  • address

    • Address of the store
    • type: string
    • required: true
  • phone

    • Phone number of the store
    • type: string
    • defaultValue: null
  • email

    • Email of the store
    • type: string
    • defaultValue: null

# Slots

None.

# Events

None.

# CSS modifiers

None.

# SCSS variables

None.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/organisms/SfStoreLocator/SfStoreLocator.html"></template>
<script src="@storefront-ui/vue/src/components/organisms/SfStoreLocator/SfStoreLocator.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfStoreLocator.scss";
</style>

You can read about using component partials here

# Play with this component

See all available configurations and play with this component on Storybook.