Interacting via JavaScript

It’s possible to interact with the map from the host website via the Boldest maps JavaScript API. For instance, this API can be used to set filter values, retrieve map values as they change, or learn about various states of the Boldest widget from your application.

Widget ready event

MapIframeCom.on('ready', function() {
    console.log('The widget has loaded and is ready to receive commands');
});

Passing filters to the map widget from your environment

Set the value of the filters as needed.

MapIframe.setFiltersFromParent( {
    mainCategory: [
      {
        operatorValues: "OR",
        values: ["term-41", "term-1", "term-2"]
      },
      {
        operatorGroup: "AND",
        operatorValues: "OR",
        values: ["term-52"]
      }
    ]
    routeDifficulty:  [min, max],
    routeDuration: [min, max],
    routeCircular: true
} );

• mainCategory (struct array: optional) list of object that contains idNames to filter categories.

  • operatorValues defines the operator criteria AND / OR, between values.

  • operatorGroup defines the operator criteria between the group and other groups.

Only for routes model:

• routeDifficulty (int array: optional) filter difficulty values between ranges

• routeDuration (int array: optional) filter duration values between ranges

• routeCircular (boolean: optional) the routes are circular (loop tracks)

Getting filter values from the widget when they change

A callback is used that is executed every time the value of one or more filters changes in the widget.

MapIframe.onSetFiltersFromSon( function (filtersFromSonData) {
    console.log('Boldest widget filter values has changed', filtersFromSonData)
});