# StoreLocator

Component locating and marking on map using tile data.

# Most common usage scenario

<template>
  <div style="max-width: 1240px;">
    <SfStoreLocator
      :tile-server-url="tileServerUrl"
      :tile-server-attribution="tileServerAttribution"
      :center="center"
      :zoom="zoom"
      :max-zoom="maxZoom"
      :marker-icon-size="markerIconSize"
      :marker-icon-anchor="markerIconAnchor"
      :map-options="mapOptions"
      :tile-layer-options="tileLayerOptions"
      :marker-options="markerOptions"
      :fly-to-store-zoom="flyToStoreZoom"
    >
      <SfStore
        v-for="(store, key) in stores"
        :key="key"
        :latlng="store.latlng"
        :name="store.name"
        :email="store.email"
        :phone="store.phone"
        :address="store.address"
        :picture="store.picture"
      />
    </SfStoreLocator>
  </div>
</template>
<script>
import { SfStoreLocator } from "@storefront-ui/vue";
export default {
  components: {
    SfStoreLocator,
  },
  data() {
    return {
      stores: [
        {
          latlng: [47.4968864, 19.0531093],
          address: "Budapest, Deák Ferenc u. 19, 1052",
          phone: "(70) 881 9463",
          email: "example@email.com",
          name: "DivWear",
          picture: {
            mobile: { url: "/assets/storybook/SfStore/storeA.png" },
            desktop: { url: "/assets/storybook/SfStore/storeA.png" },
          },
        },
        {
          latlng: [51.1176696, 17.0183064],
          address: "Romana Dmowskiego",
          phone: "(1) 311 9666",
          email: "example@email.com",
          name: "Divante Wear",
          picture: {
            mobile: { url: "/assets/storybook/SfStore/storeB.png" },
            desktop: { url: "/assets/storybook/SfStore/storeB.png" },
          },
        },
      ],
      tileServerUrl:
        "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",
      tileServerAttribution: "",
      center: [47.5104387, 19.0444433],
      zoom: 6,
      maxZoom: 16,
      markerIconSize: [21, 28],
      markerIconAnchor: [10.5, 0],
      mapOptions: {},
      tileLayerOptions: {},
      markerOptions: {},
      flyToStoreZoom: 15,
    };
  },
};
</script>

# 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 &copy; Esri &mdash; Esri, DeLorme, NAVTEQ"
  • center

    • Initial center of the map, overridden 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: centerOn, registerStore, removeStore, userPosition, getGeoDistance, locateUser
  • 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

# Events

  • update:zoom

  • 'library:loaded'

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

  • 'location:errors'

    • Location error event.
  • update:center

# CSS modifiers

None.

# CSS custom properties (variables)

  • --store-padding
  • --store-margin
  • --store-border
  • --store-border-width
  • --store-distance-flex
  • --store-distance-order
  • --store-distance-margin
  • --store-item-distance-font
  • --store-item-distance-font-weight
  • --store-item-distance-font-size
  • --store-item-distance-font-line-height
  • --store-item-distance-font-family
  • --store-media-flex
  • --store-item-addres-margin
  • --store-item-property-font
  • --store-item-property-font-weight
  • --store-item-property-font-size
  • --store-item-property-font-line-height
  • --store-item-property-font-family
  • --store-item-name-margin
  • --store-item-property-font
  • --store-item-property-font-weight
  • --store-item-property-font-size
  • --store-item-property-font-line-height
  • --store-item-property-font-family
  • --store-item-property-margin
  • --store-item-property-font
  • --store-item-property-font-weight
  • --store-item-property-font-size
  • --store-item-property-font-line-height
  • --store-item-property-font-family
  • --store-locator-wrapper-flex-direction
  • --store-locator-wrapper-justify-content
  • --store-locator-wrapper-align-items
  • --store-locator-list-flex
  • --store-locator-list-padding
  • --store-locator-list-margin
  • --store-locator-map-flex
  • --store-locator-map-width
  • --store-locator-map-height
  • --store-locator-stores-padding
  • --store-locator-stores-border
  • --store-locator-stores-border-width
  • --store-locator-store-colot
  • --store-locator-stores-font
  • --store-locator-stores-font-weight
  • --store-locator-stores-font-size
  • --store-locator-stores-font-line-height
  • --store-locator-stores-font-family

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Internal components

# Store

# Props

  • latlng

    • Name of the store
    • type: array
    • defaultValue: () => []
  • name

    • Name of the store
    • type: string
    • defaultValue: ""
  • picture

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

    • Address of the store
    • type: string
    • defaultValue: ""
  • phone

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

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

# Slots

  • distance

    • Use this slot to change distance element
  • media

    • Use this slot to show media elements
  • heading

    • Use this slot to show heading
  • default

    • This is the default slot of the component, placed on the right of the picture

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

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