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
WebAppConstruct 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:
stringThe 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
FunctionAUTOCOMPLETE Event Callback
| Function |
AutocompleteCallback(query)Parameters:
AUTOCOMPLETE Event Callback |
AutocompleteStoresConf Interface
AutocompleteStoresConf Example
{
maxStores:3,
}
| Properties | |
|
Type:
Numberthe 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:
stringA filter to display only a part of your stores. Using this disables Filters feature. | |
|
Type:
stringChoose the distance matrix provider between ‘woosmap’ and ‘google’. Default is google. Woosmap does not return duration. | |
|
Type:
NumberMaximum distance, in meters, between the searched location and the assets. Default is 0. | |
|
Type:
NumberMaximum numbers of assets to return on a search. Default is 5. | |
|
Type:
BooleanDisplays 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:
stringSets the Woosmap route provider using ‘woosmap’. Default is google (or baidu if set as maps provider). | |
|
Type:
BooleanToggles 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:
DirectionModeThe default selected mode in directions. | |
|
Type:
BooleanAllows getting predicted time in traffic (DRIVING mode only). Default is false. | |
|
Type:
BooleanAllows getting directions for the public transit mode. Default is false. | |
EmailClickCallback Interface
FunctionEMAIL_CLICK Event Callback
| Function |
EmailClickCallback(id_store, email)Parameters:
EMAIL_CLICK Event Callback |
FavoritedCallback Interface
FunctionFAVORITED Event Callback
| Function |
FavoritedCallback(id_store)Parameters:
FAVORITED Event Callback |
Filter Interface
| Properties | |
|
Type:
FilterValue[]Set the different values to filter on. | |
|
Type:
FilterOperatorOperator applied against the different value of the filter. | |
|
Type:
FilterPropertySet the property of the asset to filter on. | |
|
Type:
I18nValuesSet the title of the current filter. | |
FilterValue Interface
| Properties | |
|
Type:
BooleanThe hidden status of the filter: set true to make it hidden when loading. It can’t be modified after loading. | |
|
Type:
stringThe value to filter on or a custom query for custom filters. | |
|
Type:
BooleanThe 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:
FilterOperatorOperator 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:
BooleanApplies customised sorting of filter groups. Set true to sort the filters in the order defined in the filters array. | |
|
Type:
Filters | |
|
Type:
BooleanThe default state of the filter panel, set true to make it opened by default when loading. | |
GeocodeCallback Interface
FunctionGEOCODE 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:
stringDefine 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:
stringCountry code used to bias the search, specified as a Unicode region subtag / CLDR identifier. | |
GetDirectionsCallback Interface
FunctionGET_DIRECTIONS Event Callback
| Function |
GetDirectionsCallback(id_store, start, end)Parameters:
GET_DIRECTIONS Event Callback |
HANDLED_EVENT Interface
HANDLED_EVENT| Properties | |
|
Type:
AutocompleteCallbackTriggered when an autocomplete request is sent. | |
|
Type:
EmailClickCallbackTriggered when the email of a selected store is clicked. | |
|
Type:
FunctionTriggered when a store is set as favorite. | |
|
Type:
GeocodeCallbackTriggered when a geocode request succeeds. | |
|
Type:
GetDirectionsCallbackTriggered when retrieving directions. | |
|
Type:
LocationSelectedCallbackTriggered when the user location is selected. | |
|
Type:
PhoneClickCallbackTriggered when the phone number of a selected store is clicked. | |
|
Type:
SelectDirectionCallbackTriggered when an itinerary is selected from the directions list. | |
|
Type:
SelectedStoreCallbackTriggered when a store is selected. | |
|
Type:
UnselectedStoreCallbackTriggered 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:
ObjectProvides custom internationalization for given languages. | |
|
Type:
stringThe 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:
stringHour system to display openning hours [‘fr’ (for 24h), ‘en-US’ (for 12h)]. | |
|
Type:
NumberThe unit system to display distances [0 (Metric), 1 (Imperial)]. | |
I18nValues Interface
| Properties | |
|
Type:
stringCatalan value. | |
|
Type:
stringCzech value. | |
|
Type:
stringDeutsch value. | |
|
Type:
stringGreek value. | |
|
Type:
stringEnglish value. | |
|
Type:
stringSpanish value. | |
|
Type:
stringFrench value. | |
|
Type:
stringHebrew value. | |
|
Type:
stringCroatian value. | |
|
Type:
stringHungarian value. | |
|
Type:
stringItalian value. | |
|
Type:
stringJapanese value. | |
|
Type:
stringDutch value. | |
|
Type:
stringPolish value. | |
|
Type:
stringPortuguese value. | |
|
Type:
stringBrazilian Portuguese value. | |
|
Type:
stringRomanian value. | |
|
Type:
stringRussian value. | |
|
Type:
stringSlovak value. | |
|
Type:
stringSlovenian value. | |
|
Type:
stringSwedish value. | |
|
Type:
stringChinese simplified value. | |
InitialSearchConf Interface
InitialSearchConf example
{
text: "Paris"
}
| Properties | |
|
Type:
stringThe text to geocode. | |
LatLngBoundsLiteral Interface
| Properties | |
|
Type:
LatLngLiteralLatitude in degrees. | |
|
Type:
LatLngLiteralLongitude in degrees. | |
LatLngLiteral Interface
LatLngLiteral Example
{
lat: 43.4
lng: 3.883
}
| Properties | |
|
Type:
numberLatitude in degrees. | |
|
Type:
numberLongitude in degrees. | |
LocalitiesComponentRestrictions Interface
LocalitiesComponentRestrictions Example
{
country: ["be", "fr"]
}
| Properties | |
|
Type:
stringRestricts 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:
LocalitiesDataModesSets 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:
stringparameter, can be set to ‘postal_code’ to search localities by name or postal codes. | |
|
Type:
stringThe 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
FunctionLOCATION_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:
AddressConfIf this key is defined, search will use address service. It overrides places key configuration. This feature is not currently available in China. | |
|
Type:
stringYour Baidu or Google Maps api key. | |
|
Type:
AutocompleteStoresConfIf set and autocomplete provider is not Google Places, using the autocomplete will get prediction from stores alongside locations predictions. | |
|
Type:
stringA string to track usage across different applications using the same client ID (Google only). | |
|
Type:
stringYour Client id (Google only). | |
|
Type:
BooleanIf set to true, Directions in the widget will be disabled and directions button will open Directions on google maps in a new window. | |
|
Type:
GeocoderConfUse this to configure the Geocoder requests (If Places is not used). | |
|
Type:
LocalitiesConfIf 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:
NumberThe 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:
MapTypeSets whether you want the widget to load and use baidu or google maps. | |
|
Type:
BooleanActivates 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.IconDefines 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
FunctionPHONE_CLICK Event Callback
| Function |
PhoneClickCallback(id_store, phone)Parameters:
PHONE_CLICK Event Callback |
SelectDirectionCallback Interface
FunctionSELECT_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:
stringDirection summary. | |
|
Type:
stringDirection transport mode. | |
SelectedDirectionStartEndObject Interface
| Properties | |
|
Type:
string | |
|
Type:
LatLngLiteral | |
SelectedStoreCallback Interface
FunctionSELECTED_STORE Event Callback
| Function |
SelectedStoreCallback(id_store)Parameters:
SELECTED_STORE Event Callback |
SetMarkerStyleCallback Interface
FunctionsetMarkerStyle 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:
StyleRuleThe 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:
stringA | |
ThemeConf Interface
ThemeConf example
{
primaryColor: "#FF66CC",
storeWebsiteInSameWindow: true
}
| Properties | |
|
Type:
BooleanImprove accessibility compliance by adding labels and dedicated buttons to the HTML structure. May enter in conflict with unsupported custom CSS integrations. | |
|
Type:
stringThe primary color used for the webapp visuals. It should be in hexadecimal format (#FF0066). | |
|
Type:
BooleanDefines whether clicking on a store’s website link should open in a new window. | |
TileStyle Interface
| Properties | |
|
Type:
stringAn rgba formatted color. | |
|
Type:
NumberThe minimum size acceptable for the marker. | |
|
Type:
NumberThe 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:
NumberThe timestamp at which the data was updated. | |
TypesRules Interface
| Properties | |
|
Type:
stringAn rgba formatted color. | |
|
Type:
stringType of a store. | |
|
Type:
NumberThe zIndex priority of the points. | |
UnselectedStoreCallback Interface
FunctionUNSELECTED_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:
LatLngLiteralThe geographic position of the center of the map. | |
|
Type:
NumberThe initial zoom, should be a value of from this range [0-22]. | |
WebAppConf Interface
| Properties | |
|
Type:
DataSourceConfConfigure the data source and set filters on your assets. | |
|
Type:
DirectionsConfConfigure the way directions feature will behave. | |
|
Type:
FiltersConfConfigure The filters buttons to filter on some key values in your asset’s properties. | |
|
Type:
InitialSearchConfSet an initial search to the webapp. It will be automatically geocoded to display stores. | |
|
Type:
I18nConfConfigure the language and display settings of your widget. | |
|
Type:
MapsConfConfigure the maps Api (Baidu or Google). | |
|
Type:
ThemeConfConfigure the theme color of the widget. | |
|
Type:
WoosmapViewConfConfigure the Woosmap View overlay. | |
WoosmapViewConf Interface
| Properties | |
|
Type:
BMap.MapStyleUse this property to change Baidu map style (only some themes are available).
| |
|
Type:
google.maps.MapTypeStyleUse this property to change Google Map basemap style. | |
|
Type:
NumberUse this property to configure the breaking point between Tiled view and Marker View. Value is between 0 and 22. | |
|
Type:
BooleanIf true, the widget will set the viewport of the map to fit all the displayed assets. | |
|
Type:
LatLngLiteralUse this property to configure the initial center of the map. | |
|
Type:
NumberUse this property to configure the initial zoom on the map. Value is between 0 and 22. | |
|
Type:
MarkerConfUse this property to configure the current location marker. | |
|
Type:
MarkerConfUse this property to configure the start location marker used in directions. | |
|
Type:
StyleThis property references styling rules (StyleRule) used by Woosmap Views. | |
|
Type:
TileStyleUse 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:
stringAllows access to worldwide postcodes suggestions (dedicated licence option needed). | |
|
Type:
stringAllows access to Western Europe postal code suggestions (default value). | |
LocalitiesTypes Enum
LocalitiesTypes
| Constants | |
|
Type:
stringIncludes street addresses for UK and France territories. | |
|
Type:
stringMost commonly used administrative areas. | |
|
Type:
stringIncludes all medium sized to international sized airports. | |
|
Type:
stringIncludes amusement parks like Disneyland Paris. | |
|
Type:
stringIncludes art galleries. | |
|
Type:
stringCountries as whole point of interest. | |
|
Type:
stringIncludes locality names and suburbs worldwide. | |
|
Type:
stringIncludes all metro stations. | |
|
Type:
stringIncludes museums. | |
|
Type:
stringPublicly-used postcodes around the world. | |
|
Type:
stringIncludes shopping malls (or “shopping centers”) - may include private retail brands. | |
|
Type:
stringIncludes tourist attractions like the Eiffel tower. | |
|
Type:
stringIncludes all train stations. | |
|
Type:
stringIncludes zoos. | |
MapType Enum
MapType
| Constants | |
|
Type:
string | |
|
Type:
string | |
|
Type:
string | |