Webapp Reference

Javascript reference

WebApp class 🔗


WebApp(elementId:String, projectKey:String)

Construct a new Webapp.


Render the webapp.


Set a custom configuration for the webapp.


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


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.



Set the language of the webapp.



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



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



Set an initial Viewport to the webapp.


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


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



Set the google maps geocoder options.



Set the google maps default directions mode.

DataSourceConf object Specification  🔗

DataSourceConf example

     baseFilter: '(type:"type1" OR type:"type2") AND tag:"tag1"'
     apiKey: "woos-2ecba4bd-df92-34d2-b799-59cd9f80a9e1",
     maxResponses: 10,
     maxDistance: 10000,
     useDistanceMatrix: true
baseFilter Type: String

A filter to display only a part of your stores.

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.

DirectionsConf object Specification  🔗

DirectionsConf example

    selectedMode: "WALKING"
selectedMode Type: DirectionMode

The default selected mode in directions.

Filter object Specification  🔗

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.
key Type: String

The value to filter on.

Filters object Specification  🔗

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"
filters Type: Filters

HANDLED_EVENT object Specification  🔗

FAVORITED Type: Function

I18nConf object Specification  🔗

I18nConf example

    lang: "es",
    period: "en-US",
    unitSystem: 1
lang? Type: String

The language, values available are [fr, en, es, de, it, nl, ca, pt-br, ru].

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)].

I18nValues object Specification  🔗

en? Type: String

English value.

de? Type: String

Deutsch value.

fr? Type: String

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

InitialSearchConf object Specification  🔗

InitialSearchConf example

    text: "Paris"
text Type: String

The text to geocode.

Location object Specification  🔗

Location Example

    lat: 43.4
    lng: 3.883
lat Type: Number

The latitude.

lng Type: Number

The longitude.

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}
icon Type: google.maps.Icon

Defines the icons parameters.

RecommendationConf object Specification  🔗

RecommendationConf example

    useRecommendation: true,
    contribute: true
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'}
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  🔗

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

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  🔗

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

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.

WoosmapViewConf object Specification  🔗

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.

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  🔗



FilterOperator constants  🔗



FilterProperty constants  🔗