Store Locator Widget Reference
Store Locator Widget Javascript API Reference- WebApp class
- AddressConf object Specification
- AutocompleteCallback function definition
- CustomTranslations object Specification
- DataSourceConf object Specification
- DirectionsConf object Specification
- EmailClickCallback function definition
- FavoritedCallback function definition
- Filter object Specification
- FilterValue object Specification
- Filters object Specification
- FiltersConf object Specification
- GeocodeCallback function definition
- GeocoderConf object Specification
- GetDirectionsCallback function definition
- HANDLED_EVENT object Specification
- I18nConf object Specification
- I18nValues object Specification
- InitialSearchConf object Specification
- LocalitiesComponentRestrictions object Specification
- LocalitiesConf object Specification
- Location object Specification
- LocationSelectedCallback function definition
- MapsConf object Specification
- MarkerConf object Specification
- PhoneClickCallback function definition
- SelectDirectionCallback function definition
- SelectedDirection object Specification
- SelectedDirectionStartEndObject object Specification
- SelectedStoreCallback function definition
- Style object Specification
- StyleRule object Specification
- ThemeConf object Specification
- TileStyle object Specification
- TypesRules object Specification
- ViewportConf object Specification
- WebAppConf object Specification
- WoosmapViewConf object Specification
- DirectionMode constants
- FilterOperator constants
- FilterProperty constants
- LocalitiesDataModes constants
- LocalitiesTypes constants
- MapType constants
WebApp class 🔗
WebApp
Constructor | |
WebApp( |
Construct a new Webapp. |
Methods | |
render( |
Render the webapp. |
setConf( |
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( |
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( |
Set the webapp to init with a selected store. |
setInitialStateToGeolocation( |
Set initial state to use the Geolocation API and load nearby stores. |
listenOn( |
Use this method to register a callback on a webapp event. The listener will be called everytime the event is fired. |
listenOnce( |
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( |
Deprecated Set the language of the webapp. |
setInitialSearch( |
Deprecated Set an initial search to the webapp. It will be automatically geocoded to display stores. |
setInitialDataSourceConf( |
Deprecated Set an initial datasource configuration for the webapp. Use it to display a subset of your data. |
setInitialViewport( |
Deprecated Set an initial Viewport to the webapp. |
setFullStoreRenderer( |
Sets the store details renderer. This is a function that takes Store data and renders the store details to an Element. |
setSummaryStoreRenderer( |
Sets the store summary renderer. This is a function that takes Store data and renders the store summary to an Element. |
setFilterRenderer( |
Sets a custom filter renderer. This is a function that takes Filter data and renders the filter to a DOM Element. |
setFilterPanelRenderer( |
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( |
Deprecated Set the google maps geocoder options. |
setInitialDirectionMode( |
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| 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>| 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>
The typed rules, each rule bears a |
StyleRule object Specification 🔗
Properties | |
icon |
Type: google.maps.Icon
|
selectedIcon |
Type: google.maps.Icon
|
numberedIcon |
Type: google.maps.Icon
|
type? |
Type: String
A |
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>
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).
|
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 |
|
| |
woosmap |
|