Store Locator Widget Reference
Store Locator Widget Javascript API Reference- WebApp class
- AddressConf Interface
- AutocompleteCallback Interface
- AutocompleteStoresConf Interface
- CustomTranslations Interface
- DataSourceConf Interface
- DirectionsConf Interface
- EmailClickCallback Interface
- FavoritedCallback Interface
- Filter Interface
- FilterValue Interface
- Filters Interface
- FiltersConf Interface
- GeocodeCallback Interface
- GeocoderConf Interface
- GetDirectionsCallback Interface
- HANDLED_EVENT Interface
- I18nConf Interface
- I18nValues Interface
- InitialSearchConf Interface
- LatLngBoundsLiteral Interface
- LatLngLiteral Interface
- LocalitiesComponentRestrictions Interface
- LocalitiesConf Interface
- LocationSelectedCallback Interface
- MapsConf Interface
- MarkerConf Interface
- MarkerStyleOption Interface
- PhoneClickCallback Interface
- SelectDirectionCallback Interface
- SelectedDirection Interface
- SelectedDirectionStartEndObject Interface
- SelectedStoreCallback Interface
- SetMarkerStyleCallback Interface
- Style Interface
- StyleRule Interface
- ThemeConf Interface
- TileStyle Interface
- TypesRules Interface
- UnselectedStoreCallback Interface
- ViewportConf Interface
- WebAppConf Interface
- WoosmapViewConf Interface
- DirectionMode Enum
- FilterOperator Enum
- FilterProperty Enum
- LocalitiesDataModes Enum
- LocalitiesTypes Enum
- MapType Enum
WebApp class
WebApp
Construct a new Webapp.
Create a new WebApp example
const webapp = new WebApp('html-container-id', 'woosmap-project-key');
webapp.render();
Constructor |
WebApp(elementId, projectKey) Parameters:
Construct a new Webapp. |
Properties | |
Type:
HANDLED_EVENT |
Methods | |
render(isMobile) Parameters:
Render the webapp. | |
setInitialStateToNearbyStores() Parameters:
None
Set the webapp to ask for HTML5 location and display nearby stores on load. | |
setInitialStateToHtmlLocation() Parameters:
None
Set the webapp to ask for HTML5 location, center on the position on load. | |
setInitialStateToDirections(storeId, zoom?, travelMode, askForLocation?, originLocation?) Parameters:
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, zoom) Parameters:
Set the webapp to init with a selected store. | |
setInitialStateToGeolocation() Parameters:
None
Set initial state to use the Geolocation API and load nearby stores. | |
listenOn(event, listener) Parameters:
Use this method to register a callback on a webapp event. The listener will be called everytime the event is fired. | |
listenOnce(event, listener) Parameters:
Use this method to register a callback on a webapp event. The listener will be called only the first time the event is fired. | |
setFullStoreRenderer(fullStoreRenderer) Parameters:
Sets the store details renderer. This is a function that takes Store data and renders the store details to an Element. | |
setSummaryStoreRenderer(summaryStoreRenderer) Parameters:
Sets the store summary renderer. This is a function that takes Store data and renders the store summary to an Element. | |
setFilterRenderer(filterRenderer) Parameters:
Sets a custom filter renderer. This is a function that takes Filter data and renders the filter to a DOM Element. | |
setFilterPanelRenderer(filterPanelRenderer) Parameters:
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. | |
setMarkerStyle(customMarkerStyle) Parameters:
Sets Custom Marker Style for Stores. This is a function that takes a callback with parameter Store data and which returns a google.maps.Icon (url, anchor, scaledSize). If setMarkerStyle is not set, default style is applied. |
AddressConf Interface
AddressConf Example
{
language: "fr",
componentRestrictions: {
country: ["be", "fr"]
},
}
Properties | |
The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country. | |
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 Interface
Function
AUTOCOMPLETE Event Callback
Function |
AutocompleteCallback(query) Parameters:
AUTOCOMPLETE Event Callback |
AutocompleteStoresConf Interface
AutocompleteStoresConf Example
{
maxStores:3,
}
Properties | |
Type:
Number the maximum number of stores to add to the autocomplete predictions. Default is 1. |
CustomTranslations Interface
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 Interface
DataSourceConf example
{
baseFilter: '(type:"type1" OR type:"type2") AND tag:"tag1"',
maxResponses: 10,
maxDistance: 10000,
useDistanceMatrix: true,
distanceMatrixProvider: 'google',
routeProvider: 'woosmap',
openedStoresFilter: true
}
Properties | |
Type:
string A filter to display only a part of your stores. Using this disables Filters feature. | |
Type:
string Choose the distance matrix provider between ‘woosmap’ and ‘google’. Default is google. Woosmap does not return duration. | |
Type:
Number Maximum distance, in meters, between the searched location and the assets. Default is 0. | |
Type:
Number Maximum numbers of assets to return on a search. Default is 5. | |
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. | |
Type:
string Sets the Woosmap route provider using ‘woosmap’. Default is google (or baidu if set as maps provider). | |
Type:
Boolean Toggles the usage of Google Distance Matrix to compute time & distance to the search results. Default is true. |
DirectionsConf Interface
DirectionsConf example
{
selectedMode: "WALKING",
traffic: true,
}
Properties | |
Type:
DirectionMode The default selected mode in directions. | |
Type:
Boolean Allows getting predicted time in traffic (DRIVING mode only). Default is false. | |
Type:
Boolean Allows getting directions for the public transit mode. Default is false. |
EmailClickCallback Interface
Function
EMAIL_CLICK Event Callback
Function |
EmailClickCallback(id_store, email) Parameters:
EMAIL_CLICK Event Callback |
FavoritedCallback Interface
Function
FAVORITED Event Callback
Function |
FavoritedCallback(id_store) Parameters:
FAVORITED Event Callback |
Filter Interface
Properties | |
Type:
FilterValue[] Set the different values to filter on. | |
Type:
FilterOperator Operator applied against the different value of the filter. | |
Type:
FilterProperty Set the property of the asset to filter on. | |
Type:
I18nValues Set the title of the current filter. |
FilterValue Interface
Properties | |
Type:
Boolean The hidden status of the filter: set true to make it hidden when loading. It can’t be modified after loading. | |
Type:
string The value to filter on or a custom query for custom filters. | |
Type:
Boolean The default status of the filter: set true to make it active by default when loading. |
Filters Interface
Properties | |
Type:
Filter[] A list of all filters to apply. | |
Type:
FilterOperator Operator applied against filters. |
FiltersConf Interface
FiltersConf example
{
filters: {
opened: true,
customOrder: false,
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 | |
Type:
Boolean Applies customised sorting of filter groups. Set true to sort the filters in the order defined in the filters array. | |
Type:
Filters | |
Type:
Boolean The default state of the filter panel, set true to make it opened by default when loading. |
GeocodeCallback Interface
Function
GEOCODE Event Callback
Function |
GeocodeCallback(query) Parameters:
GEOCODE Event Callback |
GeocoderConf Interface
GeocoderConf Example
{
provider: 'address',
componentRestrictions: {'country': fr}
}
Properties | |
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. | |
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. | |
Type:
string Country code used to bias the search, specified as a Unicode region subtag / CLDR identifier. |
GetDirectionsCallback Interface
Function
GET_DIRECTIONS Event Callback
Function |
GetDirectionsCallback(id_store, start, end) Parameters:
GET_DIRECTIONS Event Callback |
HANDLED_EVENT Interface
HANDLED_EVENT
Properties | |
Type:
AutocompleteCallback Triggered when an autocomplete request is sent. | |
Type:
EmailClickCallback Triggered when the email of a selected store is clicked. | |
Type:
Function Triggered when a store is set as favorite. | |
Type:
GeocodeCallback Triggered when a geocode request succeeds. | |
Type:
GetDirectionsCallback Triggered when retrieving directions. | |
Type:
LocationSelectedCallback Triggered when the user location is selected. | |
Type:
PhoneClickCallback Triggered when the phone number of a selected store is clicked. | |
Type:
SelectDirectionCallback Triggered when an itinerary is selected from the directions list. | |
Type:
SelectedStoreCallback Triggered when a store is selected. | |
Type:
UnselectedStoreCallback Triggered when a store is unselected. |
I18nConf Interface
I18nConf example
{
lang: "es",
period: "en-US",
unitSystem: 1;
customTranslations: {en: {storeview: {visitStorePage: "View more details"}}}
}
Properties | |
Type:
Object Provides custom internationalization for given languages. | |
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, hr, sv, el, sl, hu, cs, sk]. | |
Type:
string Hour system to display openning hours [‘fr’ (for 24h), ‘en-US’ (for 12h)]. | |
Type:
Number The unit system to display distances [0 (Metric), 1 (Imperial)]. |
I18nValues Interface
Properties | |
Type:
string Catalan value. | |
Type:
string Czech value. | |
Type:
string Deutsch value. | |
Type:
string Greek value. | |
Type:
string English value. | |
Type:
string Spanish value. | |
Type:
string French value. | |
Type:
string Hebrew value. | |
Type:
string Croatian value. | |
Type:
string Hungarian value. | |
Type:
string Italian value. | |
Type:
string Japanese value. | |
Type:
string Dutch value. | |
Type:
string Polish value. | |
Type:
string Portuguese value. | |
Type:
string Brazilian Portuguese value. | |
Type:
string Romanian value. | |
Type:
string Russian value. | |
Type:
string Slovak value. | |
Type:
string Slovenian value. | |
Type:
string Swedish value. | |
Type:
string Chinese simplified value. |
InitialSearchConf Interface
InitialSearchConf example
{
text: "Paris"
}
Properties | |
Type:
string The text to geocode. |
LatLngBoundsLiteral Interface
Properties | |
Type:
LatLngLiteral Latitude in degrees. | |
Type:
LatLngLiteral Longitude in degrees. |
LatLngLiteral Interface
LatLngLiteral Example
{
lat: 43.4
lng: 3.883
}
Properties | |
Type:
number Latitude in degrees. | |
Type:
number Longitude in degrees. |
LocalitiesComponentRestrictions Interface
LocalitiesComponentRestrictions Example
{
country: ["be", "fr"]
}
Properties | |
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 Interface
LocalitiesConf Example
{
language: "fr",
componentRestrictions: {
country: ["be", "fr"]
},
types: ["locality"],
}
Properties | |
The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country. | |
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. | |
Type:
string parameter, can be set to ‘postal_code’ to search localities by name or postal codes. | |
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. | |
Type:
LocalitiesTypes[] The types of predictions to be returned |
LocationSelectedCallback Interface
Function
LOCATION_SELECTED Event Callback
Function |
LocationSelectedCallback(location) Parameters:
LOCATION_SELECTED Event Callback |
MapsConf Interface
MapsConf Example
{
provider: "google",
apiKey: "AKqsdlj19898s_qsdk",
localities: {
language: "fr"
},
geocoder: {
provider: 'google',
region: "gb"
}
}
Properties | |
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. | |
Type:
string Your Baidu or Google Maps api key. | |
Type:
AutocompleteStoresConf If set and autocomplete provider is not Google Places, using the autocomplete will get prediction from stores alongside locations predictions. | |
Type:
string A string to track usage across different applications using the same client ID (Google only). | |
Type:
string Your Client id (Google only). | |
Type:
Boolean If set to true, Directions in the widget will be disabled and directions button will open Directions on google maps in a new window. | |
Type:
GeocoderConf Use this to configure the Geocoder requests (If Places is not used). | |
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. | |
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. | |
If this key is defined, then places library will be used. Use this to configure Places requests. | |
Type:
MapType Sets whether you want the widget to load and use baidu or google maps. | |
Type:
Boolean Activates the what3words autocomplete and 3wa retrieval for assets. Localities should be the base autocomplete provider. Use /// prefix to search for words. |
MarkerConf Interface
MarkerConf example
{
icon: {
url: "http://webapp.woosmap.com/img/geolocated_marker.png",
scaledSize: {height: 32, width: 32},
anchor: {x: 16, y: 16}
}
}
Properties | |
Type:
google.maps.Icon Defines the icons parameters.To prevent display issues on IE11 with SVG, be sure to set a scaledSize to markers. |
MarkerStyleOption Interface
Properties | |
Type:
bool | |
Type:
bool |
PhoneClickCallback Interface
Function
PHONE_CLICK Event Callback
Function |
PhoneClickCallback(id_store, phone) Parameters:
PHONE_CLICK Event Callback |
SelectDirectionCallback Interface
Function
SELECT_DIRECTION Event Callback
Function |
SelectDirectionCallback(id_store, Selected) Parameters:
SELECT_DIRECTION Event Callback |
SelectedDirection Interface
Properties | |
Direction bounds. | |
Object with address and location. | |
Object with address and location. | |
Type:
string Direction summary. | |
Type:
string Direction transport mode. |
SelectedDirectionStartEndObject Interface
Properties | |
Type:
string | |
Type:
LatLngLiteral |
SelectedStoreCallback Interface
Function
SELECTED_STORE Event Callback
Function |
SelectedStoreCallback(id_store) Parameters:
SELECTED_STORE Event Callback |
SetMarkerStyleCallback Interface
Function
setMarkerStyle Callback
Function |
SetMarkerStyleCallback(feature, options?) Parameters:
setMarkerStyle Callback |
Style Interface
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 | |
Type:
StyleRule The default styling rules, applies when no typed rule matched. | |
Type:
StyleRule[] The typed rules, each rule bears a |
StyleRule Interface
Properties | |
Type:
google.maps.Icon | |
Type:
google.maps.Icon | |
Type:
google.maps.Icon | |
Type:
string A |
ThemeConf Interface
ThemeConf example
{
primaryColor: "#FF66CC",
storeWebsiteInSameWindow: true
}
Properties | |
Type:
Boolean Improve accessibility compliance by adding labels and dedicated buttons to the HTML structure. May enter in conflict with unsupported custom CSS integrations. | |
Type:
string The primary color used for the webapp visuals. It should be in hexadecimal format (#FF0066). | |
Type:
Boolean Defines whether clicking on a store’s website link should open in a new window. |
TileStyle Interface
Properties | |
Type:
string An rgba formatted color. | |
Type:
Number The minimum size acceptable for the marker. | |
Type:
Number The size of the marker in pixels, between 1 and 16. | |
Type:
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. | |
Type:
Number The timestamp at which the data was updated. |
TypesRules Interface
Properties | |
Type:
string An rgba formatted color. | |
Type:
string Type of a store. | |
Type:
Number The zIndex priority of the points. |
UnselectedStoreCallback Interface
Function
UNSELECTED_STORE Event Callback
Function |
UnselectedStoreCallback() Parameters:
None
UNSELECTED_STORE Event Callback |
ViewportConf Interface
ViewportConf example
{
initialZoom: 12,
initialCenter: {
lat: 43.3,
lng: 3.883
}
}
Properties | |
Type:
LatLngLiteral The geographic position of the center of the map. | |
Type:
Number The initial zoom, should be a value of from this range [0-22]. |
WebAppConf Interface
Properties | |
Type:
DataSourceConf Configure the data source and set filters on your assets. | |
Type:
DirectionsConf Configure the way directions feature will behave. | |
Type:
FiltersConf Configure The filters buttons to filter on some key values in your asset’s properties. | |
Type:
InitialSearchConf Set an initial search to the webapp. It will be automatically geocoded to display stores. | |
Type:
I18nConf Configure the language and display settings of your widget. | |
Type:
MapsConf Configure the maps Api (Baidu or Google). | |
Type:
ThemeConf Configure the theme color of the widget. | |
Type:
WoosmapViewConf Configure the Woosmap View overlay. |
WoosmapViewConf Interface
Properties | |
Type:
BMap.MapStyle Use this property to change Baidu map style (only some themes are available).
| |
Type:
google.maps.MapTypeStyle Use this property to change Google Map basemap style. | |
Type:
Number Use this property to configure the breaking point between Tiled view and Marker View. Value is between 0 and 22. | |
Type:
Boolean If true, the widget will set the viewport of the map to fit all the displayed assets. | |
Type:
LatLngLiteral Use this property to configure the initial center of the map. | |
Type:
Number Use this property to configure the initial zoom on the map. Value is between 0 and 22. | |
Type:
MarkerConf Use this property to configure the current location marker. | |
Type:
MarkerConf Use this property to configure the start location marker used in directions. | |
Type:
Style This property references styling rules (StyleRule) used by Woosmap Views. | |
Type:
TileStyle Use this property to configure the style of the tiled view. |
DirectionMode Enum
DirectionMode
Constants | |
Type:
string | |
Type:
string | |
Type:
string | |
Type:
string |
FilterOperator Enum
FilterOperator
Constants | |
Type:
string | |
Type:
string |
FilterProperty Enum
FilterProperty
Constants | |
Type:
string | |
Type:
string | |
Type:
string |
LocalitiesDataModes Enum
Values for localities data mode
Constants | |
Type:
string Allows access to worldwide postcodes suggestions (dedicated licence option needed). | |
Type:
string Allows access to Western Europe postal code suggestions (default value). |
LocalitiesTypes Enum
LocalitiesTypes
Constants | |
Type:
string Includes street addresses for UK and France territories. | |
Type:
string Most commonly used administrative areas. | |
Type:
string Includes all medium sized to international sized airports. | |
Type:
string Includes amusement parks like Disneyland Paris. | |
Type:
string Includes art galleries. | |
Type:
string Countries as whole point of interest. | |
Type:
string Includes locality names and suburbs worldwide. | |
Type:
string Includes all metro stations. | |
Type:
string Includes museums. | |
Type:
string Publicly-used postcodes around the world. | |
Type:
string Includes shopping malls (or “shopping centers”) - may include private retail brands. | |
Type:
string Includes tourist attractions like the Eiffel tower. | |
Type:
string Includes all train stations. | |
Type:
string Includes zoos. |
MapType Enum
MapType
Constants | |
Type:
string | |
Type:
string | |
Type:
string |