console woosmap.com contact

Store Locator Widget Reference

Store Locator Widget Javascript API Reference
  1. WebApp class
  2. CustomTranslations object Specification
  3. DataSourceConf object Specification
  4. DirectionsConf object Specification
  5. Filter object Specification
  6. FilterValue object Specification
  7. Filters object Specification
  8. FiltersConf object Specification
  9. HANDLED_EVENT object Specification
  10. I18nConf object Specification
  11. I18nValues object Specification
  12. InitialSearchConf object Specification
  13. LocalitiesComponentRestrictions object Specification
  14. LocalitiesConf object Specification
  15. Location object Specification
  16. MapsConf object Specification
  17. MarkerConf object Specification
  18. RecommendationConf object Specification
  19. Style object Specification
  20. StyleRule object Specification
  21. ThemeConf object Specification
  22. TileStyle object Specification
  23. TypesRules object Specification
  24. ViewportConf object Specification
  25. WebAppConf object Specification
  26. WoosmapViewConf object Specification
  27. consentCallback function definition
  28. DirectionMode constants
  29. FilterOperator constants
  30. FilterProperty constants
  31. LocalitiesDataModes constants
  32. LocalitiesTypes constants
  33. 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, askForLocation?:Boolean)

Set the webapp to init with directions from an HTML5 location to a store.

setInitialStateToSelectedStore(store_id:String, zoom:Number)

Set the webapp to init with a selected store.

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.

setInitialGeocoderOptions(geocoderOptions:google.maps.GeocoderComponentRestrictions)

Deprecated

Set the google maps geocoder options.

setInitialDirectionMode(directionMode:DirectionMode)

Deprecated

Set the google maps default directions mode.

optIn()

Sets the user as opted in for recommendation/contribution.

optOut()

Sets the user as opted out for recommendation/contribution.

getConsent(consentCallback:consentCallback)

Returns the current status of user consent

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
}
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 or a recommendation. 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.

DirectionsConf object Specification  🔗

DirectionsConf example

{
    selectedMode: "WALKING"
}
Properties
selectedMode Type: DirectionMode

The default selected mode in directions.

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.

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: {
         filters: [
             {
                 propertyType: "type",
                 title: {
                     en: "Store Type"
                 },
                 choices: [
                     {
                         key: "bose_store",
                         en: "Bose Store"
                     },
                     {
                         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"
             }
         ],
         outerOperator: "or"
   }
}
Properties
filters Type: Filters

HANDLED_EVENT object Specification  🔗

Properties
FAVORITED Type: Function

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-br, ru, zh, ja, uk].

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-br? Type: String

Brazilian Portuguese value.

ru? Type: String

Russian value.

zh? Type: String

Chinese simplified value.

ja? Type: String

Japanese 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.

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.

MapsConf object Specification  🔗

MapsConf Example

{
    provider: "google",
    apiKey: "AKqsdlj19898s_qsdk",
    localities: {
        language: "fr"
    },
    geocoder: {
        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.

localities? Type: LocalitiesConf

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

geocoder? Type: google.maps.GeocoderComponentRestrictions

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.

RecommendationConf object Specification  🔗

RecommendationConf example

{
    useRecommendation: true,
    contribute: true
}
Properties
useRecommendation? Type: Boolean

Defines whether the widget should start up using recommended store.

contribute? Type: Boolean

Defines whether the widget should contribute to Woosmap Recommendation.

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 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>

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.

recommendation? Type: RecommendationConf

Configure the Recommendation service in 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.

consentCallback function definition  🔗

consentCallback

Function
function(consent:Boolean)

Get Consent callback

DirectionMode constants  🔗

DirectionMode

Constants
DRIVING
WALKING
BICYCLING
TRANSIT

FilterOperator constants  🔗

FilterOperator

Constants
and
or

FilterProperty constants  🔗

FilterProperty

Constants
type
tag

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
postal_code

Restrict suggestions to postcodes only.

locality

Restrict suggestions to city names only

MapType constants  🔗

MapType

Constants
baidu
google

‹ Configuration Quick Start ›
Was this article helpful?
Have more questions? Submit a request