Store Locator Widget Reference

Store Locator Widget Javascript API Reference
  1. WebApp class
  2. AddressConf Interface
  3. AutocompleteCallback Interface
  4. AutocompleteStoresConf Interface
  5. CustomTranslations Interface
  6. DataSourceConf Interface
  7. DirectionsConf Interface
  8. EmailClickCallback Interface
  9. FavoritedCallback Interface
  10. Filter Interface
  11. FilterValue Interface
  12. Filters Interface
  13. FiltersConf Interface
  14. GeocodeCallback Interface
  15. GeocoderConf Interface
  16. GetDirectionsCallback Interface
  17. HANDLED_EVENT Interface
  18. I18nConf Interface
  19. I18nValues Interface
  20. InitialSearchConf Interface
  21. LatLngBoundsLiteral Interface
  22. LatLngLiteral Interface
  23. LocalitiesComponentRestrictions Interface
  24. LocalitiesConf Interface
  25. LocationSelectedCallback Interface
  26. MapsConf Interface
  27. MarkerConf Interface
  28. MarkerStyleOption Interface
  29. PhoneClickCallback Interface
  30. SelectDirectionCallback Interface
  31. SelectedDirection Interface
  32. SelectedDirectionStartEndObject Interface
  33. SelectedStoreCallback Interface
  34. SetMarkerStyleCallback Interface
  35. Style Interface
  36. StyleRule Interface
  37. ThemeConf Interface
  38. TileStyle Interface
  39. TypesRules Interface
  40. UnselectedStoreCallback Interface
  41. ViewportConf Interface
  42. WebAppConf Interface
  43. WoosmapViewConf Interface
  44. DirectionMode Enum
  45. FilterOperator Enum
  46. FilterProperty Enum
  47. LocalitiesDataModes Enum
  48. LocalitiesTypes Enum
  49. MapType Enum

WebApp class

WebApp

Construct a new Webapp.

Create a new WebApp example

JavaScript
         const webapp = new WebApp('html-container-id', 'woosmap-project-key');
 webapp.render();

    
Constructor
WebApp(elementId, projectKey)
Parameters:
  • elementId: string The ID of the div that should contain the webapp.
  • projectKey: string The public project key.

Construct a new Webapp.


Properties

Methods
render(isMobile)
Parameters:
  • isMobile: Boolean

Render the webapp.

setConf(conf)
Parameters:

Set a custom configuration for 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:
  • store_id: string
  • zoom: Number

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:
  • fullStoreRenderer: Function a function that takes a Store and returns a DOM Element

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

setSummaryStoreRenderer(summaryStoreRenderer)
Parameters:
  • summaryStoreRenderer: Function a function that takes a Store and returns a DOM Element

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

setFilterRenderer(filterRenderer)
Parameters:
  • filterRenderer: Function function returning a DOM Element

Sets a custom filter renderer. This is a function that takes Filter data and renders the filter to a DOM Element.

setFilterPanelRenderer(filterPanelRenderer)
Parameters:
  • filterPanelRenderer: Function function returning a DOM Element

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:
  • customMarkerStyle: SetMarkerStyleCallback a function that takes a Store, an options object (with selected bool) and returns a google.maps.Icon Object

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

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

Type: Function

AUTOCOMPLETE Event Callback

Function
AutocompleteCallback(query)
Parameters:
  • query: string

AUTOCOMPLETE Event Callback


AutocompleteStoresConf Interface

AutocompleteStoresConf Example

JavaScript
        {
    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.

JavaScript
        {
    fr: {
          storeview: {
              visitStorePage: "Plus de détails"
          },
         favoritebuttonview: {
             setAsFavorite: "Définir comme Favori"
         }
    }
}

    

DataSourceConf Interface

DataSourceConf example

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

JavaScript
        {
    selectedMode: "WALKING",
    traffic: true,
}

    
Properties

The default selected mode in directions.

Type: Boolean

Allows getting predicted time in traffic (Google only, DRIVING mode only). Default is false.


EmailClickCallback Interface

Type: Function

EMAIL_CLICK Event Callback

Function
EmailClickCallback(id_store, email)
Parameters:
  • id_store: string
  • email: string

EMAIL_CLICK Event Callback


FavoritedCallback Interface

Type: Function

FAVORITED Event Callback

Function
FavoritedCallback(id_store)
Parameters:
  • id_store: string

FAVORITED Event Callback


Filter Interface

Properties
Type: FilterValue[]

Set the different values to filter on.

Operator applied against the different value of the filter.

Set the property of the asset to filter on.

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.

Operator applied against filters.


FiltersConf Interface

FiltersConf example

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

Type: Function

GEOCODE Event Callback

Function
GeocodeCallback(query)
Parameters:
  • query: string

GEOCODE Event Callback


GeocoderConf Interface

GeocoderConf Example

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

Type: Function

GET_DIRECTIONS Event Callback

Function
GetDirectionsCallback(id_store, start, end)
Parameters:

GET_DIRECTIONS Event Callback


HANDLED_EVENT Interface

Properties

Triggered when an autocomplete request is sent.

Triggered when the email of a selected store is clicked.

Type: Function

Triggered when a store is set as favorite.

Triggered when a geocode request succeeds.

Triggered when retrieving directions.

Triggered when the user location is selected.

Triggered when the phone number of a selected store is clicked.

Triggered when an itinerary is selected from the directions list.

Triggered when a store is selected.

Triggered when a store is unselected.


I18nConf Interface

I18nConf example

JavaScript
        {
    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].

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

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

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

Swedish value.

Type: string

Chinese simplified value.


InitialSearchConf Interface

InitialSearchConf example

JavaScript
        {
    text: "Paris"
}

    
Properties
Type: string

The text to geocode.


LatLngBoundsLiteral Interface

Properties

Latitude in degrees.

Longitude in degrees.


LatLngLiteral Interface

LatLngLiteral Example

JavaScript
        {
    lat: 43.4
    lng: 3.883
}

    
Properties
Type: number

Latitude in degrees.

Type: number

Longitude in degrees.


LocalitiesComponentRestrictions Interface

LocalitiesComponentRestrictions Example

JavaScript
        {
   country: ["be", "fr"]
}

    
Properties
Type: string | 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

JavaScript
        {
    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.

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.

The types of predictions to be returned


LocationSelectedCallback Interface

Type: Function

LOCATION_SELECTED Event Callback

Function
LocationSelectedCallback(location)
Parameters:

LOCATION_SELECTED Event Callback


MapsConf Interface

MapsConf Example

JavaScript
        {
    provider: "google",
    apiKey: "AKqsdlj19898s_qsdk",
    localities: {
        language: "fr"
    },
    geocoder: {
        provider: 'google',
        region: "gb"
    }
}

    
Properties

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.

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.

Use this to configure the Geocoder requests (If Places is not used).

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.


MarkerConf Interface

MarkerConf example

JavaScript
        {
    icon: {
         url: "http://webapp.woosmap.com/img/geolocated_marker.png",
         scaledSize: {height: 32, width: 32},
         anchor: {x: 16, y: 16}
   }
}

    
Properties

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

Type: Function

PHONE_CLICK Event Callback

Function
PhoneClickCallback(id_store, phone)
Parameters:
  • id_store: string
  • phone: string

PHONE_CLICK Event Callback


SelectDirectionCallback Interface

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

SelectedStoreCallback Interface

Type: Function

SELECTED_STORE Event Callback

Function
SelectedStoreCallback(id_store)
Parameters:
  • id_store: string

SELECTED_STORE Event Callback


SetMarkerStyleCallback Interface

Type: Function

setMarkerStyle Callback

Function
SetMarkerStyleCallback(feature, options?)
Parameters:

setMarkerStyle Callback


Style Interface

Style Example

JavaScript
        {
    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 store type, the last one matching prevails.


StyleRule Interface

Properties
Type: string

A store type that controls the rule application.


ThemeConf Interface

ThemeConf example

JavaScript
        {
    primaryColor: "#FF66CC",
    storeWebsiteInSameWindow: true
}

    
Properties
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

Type: Function

UNSELECTED_STORE Event Callback

Function
UnselectedStoreCallback()
Parameters: None

UNSELECTED_STORE Event Callback


ViewportConf Interface

ViewportConf example

JavaScript
        {
    initialZoom: 12,
    initialCenter: {
        lat: 43.3,
        lng: 3.883
    }
}

    
Properties

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

Configure the data source and set filters on your assets.

Configure the way directions feature will behave.

Configure The filters buttons to filter on some key values in your asset’s properties.

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.

Configure the Woosmap View overlay.


WoosmapViewConf Interface

Properties

Use this property to change Baidu map style (only some themes are available).

JavaScript
        {
    ...
    baiduMapStyle: {
         style: 'dark'
    }
    ...
}

    

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.

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.

Use this property to configure the current location marker.

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

Was this article helpful?
Have more questions? Submit a request