Widgets

Webapp Reference

Javascript reference

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.


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
}
Properties
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"
}
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
}
Properties
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  🔗


Properties
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"
}
Properties
text Type: String

The text to geocode.


Location object Specification  🔗


Location Example

{
    lat: 43.4
    lng: 3.883
}
Properties
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}
   }
}
Properties
icon Type: google.maps.Icon

Defines the icons parameters.


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.


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.

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