Community Forum

Store Locator Widget Reference

Store Locator Widget Javascript API Reference
  1. WebApp class 
  2. AddressConf object Specification 
  3. AutocompleteCallback function definition 
  4. CustomTranslations object Specification 
  5. DataSourceConf object Specification 
  6. DirectionsConf object Specification 
  7. EmailClickCallback function definition 
  8. FavoritedCallback function definition 
  9. Filter object Specification 
  10. FilterValue object Specification 
  11. Filters object Specification 
  12. FiltersConf object Specification 
  13. GeocodeCallback function definition 
  14. GeocoderConf object Specification 
  15. GetDirectionsCallback function definition 
  16. HANDLED_EVENT object Specification 
  17. I18nConf object Specification 
  18. I18nValues object Specification 
  19. InitialSearchConf object Specification 
  20. LocalitiesComponentRestrictions object Specification 
  21. LocalitiesConf object Specification 
  22. Location object Specification 
  23. LocationSelectedCallback function definition 
  24. MapsConf object Specification 
  25. MarkerConf object Specification 
  26. PhoneClickCallback function definition 
  27. SelectDirectionCallback function definition 
  28. SelectedDirection object Specification 
  29. SelectedDirectionStartEndObject object Specification 
  30. SelectedStoreCallback function definition 
  31. Style object Specification 
  32. StyleRule object Specification 
  33. ThemeConf object Specification 
  34. TileStyle object Specification 
  35. TypesRules object Specification 
  36. ViewportConf object Specification 
  37. WebAppConf object Specification 
  38. WoosmapViewConf object Specification 
  39. DirectionMode constants 
  40. FilterOperator constants 
  41. FilterProperty constants 
  42. LocalitiesDataModes constants 
  43. LocalitiesTypes constants 
  44. MapType constants 

WebApp class 🔗

WebApp

Constructor
WebApp(elementId:String, projectKey:String)

Construct a new Webapp.


Methods
render(isMobile:Boolean)

Render the webapp.

setConf(conf:WebAppConf)

Set a custom configuration for the webapp.

setInitialStateToNearbyStores()

Set the webapp to ask for HTML5 location and display nearby stores on load.

setInitialStateToHtmlLocation()

Set the webapp to ask for HTML5 location, center on the position on load.

setInitialStateToDirections(storeId:String, zoom?:Number, travelMode:DirectionMode, askForLocation?:Boolean, originLocation?:Location)

Set the webapp to init with directions from an HTML5 location or custom origin to a store. Custom origin is not a fallback to HTML5 location and could be used only if HTML5 location is not asked.

setInitialStateToSelectedStore(store_id:String, zoom:Number)

Set the webapp to init with a selected store.

setInitialStateToGeolocation()

Set initial state to use the Geolocation API and load nearby stores.

listenOn(event:HANDLED_EVENT, listener:Function)

Use this method to register a callback on a webapp event. The listener will be called everytime the event is fired.

listenOnce(event:HANDLED_EVENT, listener:Function)

Use this method to register a callback on a webapp event. The listener will be called only the first time the event is fired.

setI18nConf(i18nConf:I18nConf)

Deprecated

Set the language of the webapp.

setInitialSearch(initialSearch:InitialSearchConf)

Deprecated

Set an initial search to the webapp. It will be automatically geocoded to display stores.

setInitialDataSourceConf(dataSourceConf:DataSourceConf)

Deprecated

Set an initial datasource configuration for the webapp. Use it to display a subset of your data.

setInitialViewport(viewportConf:ViewportConf)

Deprecated

Set an initial Viewport to the webapp.

setFullStoreRenderer(fullStoreRenderer:Function)

Sets the store details renderer. This is a function that takes Store data and renders the store details to an Element.

setSummaryStoreRenderer(summaryStoreRenderer:Function)

Sets the store summary renderer. This is a function that takes Store data and renders the store summary to an Element.

setFilterRenderer(filterRenderer:Function)

Sets a custom filter renderer. This is a function that takes Filter data and renders the filter to a DOM Element.

setFilterPanelRenderer(filterPanelRenderer:Function)

Sets the filter panel renderer. This is a function that takes Filter panel data and renders the filter panel to a DOM Element. If setFilterRenderer is not set, setFilterPanelRenderer will not be applied.

setInitialGeocoderOptions(geocoderOptions:GeocoderConf)

Deprecated

Set the google maps geocoder options.

setInitialDirectionMode(directionMode:DirectionMode)

Deprecated

Set the google maps default directions mode.

AddressConf object Specification  🔗

AddressConf Example

{
    language: "fr",
    componentRestrictions: {
        country: ["be", "fr"]
    },
}
Properties
componentRestrictions? Type: LocalitiesComponentRestrictions

The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country.

language Type: String

The language code, indicating in which language the results should be returned, if possible. Searches are also biased to the selected language; results in the selected language may be given a higher ranking. If language is not supplied, the Localities service will use the default language of each country. No language necessary for postal_code request.

To use this parameter a dedicated option on your licence is needed. Please contact us if you are interested in using this parameter and you do not have subscribed the proper option yet.

AutocompleteCallback function definition  🔗

AutocompleteCallback

Function
function(query:String)

AUTOCOMPLETE Event Callback

CustomTranslations object Specification  🔗

CustomTranslations Example

The first level must be a string corresponding to the wanted language (see I18nConf lang parameter). Next levels allow to customize “More details” and “Set as favorite” buttons when a store is selected.

{
    fr: {
          storeview: {
              visitStorePage: "Plus de détails"
          },
         favoritebuttonview: {
             setAsFavorite: "Définir comme Favori"
         }
    }
}

DataSourceConf object Specification  🔗

DataSourceConf example

{
     baseFilter: '(type:"type1" OR type:"type2") AND tag:"tag1"',
     maxResponses: 10,
     maxDistance: 10000,
     useDistanceMatrix: true,
     distanceMatrixProvider: 'google',
     routeProvider: 'woosmap',
     openedStoresFilter: true
}
Properties
baseFilter Type: String

A filter to display only a part of your stores. Using this disables Filters feature.

maxResponses Type: Number

Maximum numbers of assets to return on a search. Default is 5.

maxDistance Type: Number

Maximum distance, in meters, between the searched location and the assets. Default is 0.

useDistanceMatrix Type: Boolean

Toggles the usage of Google Distance Matrix to compute time & distance to the search results. Default is true.

distanceMatrixProvider Type: String

Choose the distance matrix provider between ‘woosmap’ and ‘google’. Default is google. Woosmap does not return duration.

routeProvider Type: String

Sets the Woosmap route provider using ‘woosmap’. Default is google (or baidu if set as maps provider).

openedStoresFilter Type: Boolean

Displays a toggle filtering search results on the opening status of stores. If defined, the toggle can be set as true (display only open stores) or as false (display all stores). If not defined, all stores are shown.

DirectionsConf object Specification  🔗

DirectionsConf example

{
    selectedMode: "WALKING",
    traffic: true
}
Properties
selectedMode Type: DirectionMode

The default selected mode in directions.

traffic? Type: Boolean

Allows getting predicted time in traffic (Google only, DRIVING mode only). Default is false.

EmailClickCallback function definition  🔗

EmailClickCallback

Function
function(id_store:String,email:String)

EMAIL_CLICK Event Callback

FavoritedCallback function definition  🔗

FavoritedCallback

Function
function(id_store:String)

FAVORITED Event Callback

Filter object Specification  🔗

Properties
propertyType Type: FilterProperty

Set the property of the asset to filter on.

title Type: I18nValues

Set the title of the current filter.

choices Type: Array.<FilterValue>

Set the different values to filter on.

innerOperator Type: FilterOperator

Operator applied against the different value of the filter.

FilterValue object Specification  🔗

This object specification extends I18nValues.
Properties
key Type: String

The value to filter on or a custom query for custom filters.

selected? Type: Boolean

The default status of the filter: set true to make it active by default when loading.

hidden? Type: Boolean

The hidden status of the filter: set true to make it hidden when loading. It can’t be modified after loading.

Filters object Specification  🔗

Properties
filters Type: Array.<Filter>

A list of all filters to apply.

outerOperator Type: FilterOperator

Operator applied against filters.

FiltersConf object Specification  🔗

FiltersConf example

{
    filters: {
         opened: true,
         filters: [
             {
                 propertyType: "type",
                 title: {
                     en: "Store Type"
                 },
                 choices: [
                     {
                         key: "bose_store",
                         en: "Bose Store",
                         selected: true
                     },
                     {
                         key: "bose_reseller",
                         en: "Bose Reseller"
                     }
                 ],
                 innerOperator: "and"
             },
             {
                 propertyType: "tag",
                 title: {
                     en: "Services"
                 },
                 choices: [
                     {
                         key: "wheelchair_access",
                         en: "Wheelchair Access"
                     },
                     {
                         key: "in-store_wi-fi",
                         en: "Wifi"
                     }
                 ],
                 innerOperator: "and"
             },
             {
                 propertyType: "custom",
                 title: {
                     en: "Location"
                 },
                 choices: [
                     {
                         key: "country:France OR user.region:europe",
                         en: "France or Europe"
                     },
                 ],
                 innerOperator: "and"
             }
         ],
         outerOperator: "or"
   }
}
Properties
filters Type: Filters
opened? Type: Boolean

The default state of the filter panel, set true to make it opened by default when loading.

GeocodeCallback function definition  🔗

GeocodeCallback

Function
function(query:String)

GEOCODE Event Callback

GeocoderConf object Specification  🔗

GeocoderConf Example

{
    provider: 'address',
    componentRestrictions: {'country': fr}
}
Properties
provider? Type: String

Define which geocode provider to use between address and google. If not specified, google geocoder will be used when the map provider is google otherwise address geocoder will be used.

region? Type: String

Country code used to bias the search, specified as a Unicode region subtag / CLDR identifier.

componentRestrictions? Type: google.maps.GeocoderComponentRestrictions

Components are used to restrict results to a specific area. A filter consists of one or more of: route, locality, administrativeArea, postalCode, country. Only the results that match all the filters will be returned. Filter values support the same methods of spelling correction and partial matching as other geocoding requests.

GetDirectionsCallback function definition  🔗

GetDirectionsCallback

Function
function(id_store:String,start:Latlng,end:Latlng)

GET_DIRECTIONS Event Callback

HANDLED_EVENT object Specification  🔗

Properties
FAVORITED Type: FavoritedCallback

Triggered when a store is set as favorite.

SELECT_STORE Type: SelectedStoreCallback

Triggered when a store is selected.

PHONE_CLICK Type: PhoneClickCallback

Triggered when the phone number of a selected store is clicked.

EMAIL_CLICK Type: EmailClickCallback

Triggered when the email of a selected store is clicked.

LOCATION_SELECTED Type: LocationSelectedCallback

Triggered when the user location is selected.

GEOCODE Type: GeocodeCallback

Triggered when a geocode request succeeds.

AUTOCOMPLETE Type: AutocompleteCallback

Triggered when an autocomplete request is sent.

GET_DIRECTIONS Type: GetDirectionsCallback

Triggered when retrieving directions.

SELECT_DIRECTION Type: SelectDirectionCallback

Triggered when an itinerary is selected from the directions list.

I18nConf object Specification  🔗

I18nConf example

{
    lang: "es",
    period: "en-US",
    unitSystem: 1;
    customTranslations: {en: {storeview: {visitStorePage: "View more details"}}}
}
Properties
lang? Type: String

The language, values available are [fr, en, es, de, it, nl, ca, pt, pt-br, ru, zh, zh-HK, ja, uk, he, pl, ro].

period? Type: String

Hour system to display openning hours [‘fr’ (for 24h), ‘en-US’ (for 12h)].

unitSystem? Type: Number

The unit system to display distances [0 (Metric), 1 (Imperial)].

customTranslations? Type: Object

Provides custom internationalization for given languages.

I18nValues object Specification  🔗

Properties
en? Type: String

English value.

de? Type: String

Deutsch value.

fr? Type: String

French value.

es? Type: String

Spanish value.

it? Type: String

Italian value.

ca? Type: String

Catalan value.

nl? Type: String

Dutch value.

pt? Type: String

Portuguese value.

pt-br? Type: String

Brazilian Portuguese value.

ru? Type: String

Russian value.

zh? Type: String

Chinese simplified value.

ja? Type: String

Japanese value.

he? Type: String

Hebrew value.

pl? Type: String

Polish value.

ro? Type: String

Romanian value.

InitialSearchConf object Specification  🔗

InitialSearchConf example

{
    text: "Paris"
}
Properties
text Type: String

The text to geocode.

LocalitiesComponentRestrictions object Specification  🔗

LocalitiesComponentRestrictions Example

{
   country: ["be", "fr"]
}
Properties
country? Type: String|Array.<String>

Restricts predictions to the specified country (ISO 3166-1 Alpha-2 country code, case insensitive). For example, ‘us’, ‘br’, or ‘au’. You can provide a single one, or an array of up to five country code strings.

LocalitiesConf object Specification  🔗

LocalitiesConf Example

{
    language: "fr",
    componentRestrictions: {
        country: ["be", "fr"]
    },
    types: ["locality"],
}
Properties
types? Type: Array.<LocalitiesTypes>|LocalitiesTypes

The types of predictions to be returned

componentRestrictions? Type: LocalitiesComponentRestrictions

The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country.

language Type: String

The language code, indicating in which language the results should be returned, if possible. Searches are also biased to the selected language; results in the selected language may be given a higher ranking. If language is not supplied, the Localities service will use the default language of each country. No language necessary for postal_code request.

extended Type: String

parameter, can be set to ‘postal_code’ to search localities by name or postal codes.

data Type: LocalitiesDataModes

Sets the data mode for your request to localities. Advanced mode is used to get worldwide postcodes.

To use this parameter a dedicated option on your licence is needed. Please contact us if you are interested in using this parameter and you do not have subscribed the proper option yet.

Location object Specification  🔗

Location Example

{
    lat: 43.4
    lng: 3.883
}
Properties
lat Type: Number

The latitude.

lng Type: Number

The longitude.

LocationSelectedCallback function definition  🔗

LocationSelectedCallback

Function
function(location:Latlng)

LOCATION_SELECTED Event Callback

MapsConf object Specification  🔗

MapsConf Example

{
    provider: "google",
    apiKey: "AKqsdlj19898s_qsdk",
    localities: {
        language: "fr"
    },
    geocoder: {
        provider: 'google',
        region: "gb"
    }
}
Properties
provider? Type: MapType

Sets whether you want the widget to load and use baidu or google maps.

apiKey? Type: String

Your Baidu or Google Maps api key.

clientKey? Type: String

Your Client id (Google only).

channel? Type: String

A string to track usage across different applications using the same client ID (Google only).

places? Type: google.maps.places.AutocompletionRequest

If this key is defined, then places library will be used. Use this to configure Places requests.

address? Type: AddressConf

If this key is defined, search will use address service. It overrides places key configuration. This feature is not currently available in China.

localities? Type: LocalitiesConf

If this key is defined, search will use localities service. It overrides address and places key configuration. This feature is not currently available in China.

geocoder? Type: GeocoderConf

Use this to configure the Geocoder requests (If Places is not used).

minLength? Type: Number

The minimum number of characters a user must type before search is performed. Default is 3 and when using Baidu default is 1.

disableDirections? Type: Boolean

If set to true and map provider is Google, Directions in the widget will be disabled and directions button will open Directions on google maps in a new window.

MarkerConf object Specification  🔗

MarkerConf example

{
    icon: {
         url: "http://webapp.woosmap.com/img/geolocated_marker.png",
         scaledSize: {height: 32, width: 32},
         anchor: {x: 16, y: 16}
   }
}
Properties
icon Type: google.maps.Icon

Defines the icons parameters.

To prevent display issues on IE11 with SVG, be sure to set a scaledSize to markers.

PhoneClickCallback function definition  🔗

PhoneClickCallback

Function
function(id_store:String,phone:String)

PHONE_CLICK Event Callback

SelectDirectionCallback function definition  🔗

SelectDirectionCallback

Function
function(id_store:String,Selected:SelectedDirection)

SELECT_DIRECTION Event Callback

SelectedDirection object Specification  🔗

Properties
transportMode Type: String

Direction transport mode.

bounds Type: Latlngbounds

Direction bounds.

summary Type: String

Direction summary.

start Type: SelectedDirectionStartEndObject

Object with address and location.

end Type: SelectedDirectionStartEndObject

Object with address and location.

SelectedDirectionStartEndObject object Specification  🔗

Properties
address Type: String
locattion. Type: Latlng

SelectedStoreCallback function definition  🔗

SelectedStoreCallback

Function
function(id_store:String)

SELECTED_STORE Event Callback

Style object Specification  🔗

Style Example

{
    rules: [
        {
            type: 'value1',
            icon: {url: 'http://url/img/marker1.png'},
            selectedIcon: {url: 'http://url/img/marker1-selected.png'}
        },
        {
            type: 'value2',
            icon: {url: 'http://url/img/marker2.png'},
            selectedIcon: {url: 'http://url/img/marker2-selected.png'}
        }
    ],
    default: {
        icon: {url: 'http://url/img/marker.png'},
        numberedIcon: {url: 'http://url/img/{number}.png'},
        selectedIcon: {url: 'http://url/img/selected.png'}
    }
}
Properties
default Type: StyleRule

The default styling rules, applies when no typed rule matched.

rules Type: Array.<StyleRule&gt

The typed rules, each rule bears a store type, the last one matching prevails.

StyleRule object Specification  🔗

Properties
icon Type: google.maps.Icon
selectedIcon Type: google.maps.Icon
numberedIcon Type: google.maps.Icon
type? Type: String

A store type that controls the rule application.

ThemeConf object Specification  🔗

ThemeConf example

{
    primaryColor: "#FF66CC",
    storeWebsiteInSameWindow: true
}
Properties
primaryColor? Type: String

The primary color used for the webapp visuals. It should be in hexadecimal format (#FF0066).

storeWebsiteInSameWindow? Type: Boolean

Defines whether clicking on a store’s website link should open in a new window.

TileStyle object Specification  🔗

Properties
color? Type: String

An rgba formatted color.

size? Type: Number

The size of the marker in pixels, between 1 and 16.

minSize? Type: Number

The minimum size acceptable for the marker.

updatedAt Type: Number

The timestamp at which the data was updated.

typeRules? Type: Array.<TypesRules&gt

Rules to display different color depending of types. Two different rules cannot be applied to the same store. In case of conflict the latest type in the array win. If a store has no rule, the default type is apply.

TypesRules object Specification  🔗

Properties
type Type: String

Type of a store.

color Type: String

An rgba formatted color.

zIndex? Type: Number

The zIndex priority of the points.

ViewportConf object Specification  🔗

ViewportConf example

{
    initialZoom: 12,
    initialCenter: {
        lat: 43.3,
        lng: 3.883
    }
}
Properties
initialZoom Type: Number

The initial zoom, should be a value of from this range [0-22].

initialCenter Type: Location

The geographic position of the center of the map.

WebAppConf object Specification  🔗

Properties
internationalization? Type: I18nConf

Configure the language and display settings of your widget.

dataSource? Type: DataSourceConf

Configure the data source and set filters on your assets.

directions? Type: DirectionsConf

Configure the way directions feature will behave.

theme? Type: ThemeConf

Configure the theme color of the widget.

woosmapView? Type: WoosmapViewConf

Configure the Woosmap View overlay.

filters? Type: FiltersConf

Configure The filters buttons to filter on some key values in your asset’s properties.

initialSearch? Type: InitialSearchConf

Set an initial search to the webapp. It will be automatically geocoded to display stores.

maps? Type: MapsConf

Configure the maps Api (Baidu or Google).

WoosmapViewConf object Specification  🔗

Properties
locationMarker? Type: MarkerConf

Use this property to configure the current location marker.

startLocationMarker? Type: MarkerConf

Use this property to configure the start location marker used in directions.

initialZoom? Type: Number

Use this property to configure the initial zoom on the map. Value is between 0 and 22.

breakPoint? Type: Number

Use this property to configure the breaking point between Tiled view and Marker View. Value is between 0 and 22.

initialCenter? Type: Location

Use this property to configure the initial center of the map.

fitBounds? Type: Boolean

If true, the widget will set the viewport of the map to fit all the displayed assets.

baseMapStyle? Type: google.maps.MapTypeStyle

Use this property to change Google Map basemap style.

baiduMapStyle? Type: BMap.MapStyle

Use this property to change Baidu map style (only some themes are available).

{
    ...
    baiduMapStyle: {
         style: 'dark'
    }
    ...
}
tileStyle? Type: TileStyle

Use this property to configure the style of the tiled view.

style? Type: Style

This property references styling rules (StyleRule) used by Woosmap Views.

DirectionMode constants  🔗

DirectionMode

Constants
DRIVING
WALKING
BICYCLING
TRANSIT

FilterOperator constants  🔗

FilterOperator

Constants
and
or

FilterProperty constants  🔗

FilterProperty

Constants
type
tag
custom

LocalitiesDataModes constants  🔗

Values for localities data mode

Constants
standard

Allows access to Western Europe postal code suggestions (default value).

advanced

Allows access to worldwide postcodes suggestions (dedicated licence option needed).

LocalitiesTypes constants  🔗

LocalitiesTypes

Constants
locality

Includes locality names and suburbs worldwide.

postal_code

Publicly-used postcodes around the world.

admin_level

Most commonly used administrative areas.

country

Countries as whole point of interest.

airport

Includes all medium sized to international sized airports.

train_station

Includes all train stations.

metro_station

Includes all metro stations.

shopping

Includes shopping malls (or “shopping centers”) - may include private retail brands.

museum

Includes museums.

zoo

Includes zoos.

tourist_attraction

Includes tourist attractions like the Eiffel tower.

art_gallery

Includes art galleries.

amusement_park

Includes amusement parks like Disneyland Paris.

address

Includes street addresses for UK and France territories.

MapType constants  🔗

MapType

Constants
baidu
google
woosmap

‹ Configuration Get Started ›
Was this article helpful?
Have more questions? Submit a request