MapResults - AFS

AFS Integration Guide

Product
AFS
AFS_Version
7.9
Category
Reference Guide

This widget is able to display geolocated search results on a map. Each marker corresponds to a result. When a marker is clicked, a tool tip is displayed.

This widget is a composite one (see Composite mechanism for more information). It accepts a template that contains Result Components (see Results Components) inside its declaration. This template is used to display the content of the tool tip shown when a marker is clicked.

MapResults - Displays geolocated search results on a map. Each marker corresponds to a result. When a marker is clicked, a tool tip is displayed.

Parameter

Type

Card

Default

Description

feedName

String

Optional

N/A

Name of the feed for which results must be displayed on the map. If not specified, all feeds will be selected.

latitudeExpr

String

Mandatory

N/A

Reply Formatting Expressions that brings object reply latitude.

longitudeExpr

String

Mandatory

N/A

Reply Formatting Expressions that brings object reply longitude.

map

Object

Optional

N/A

See Map Subobject Configuration

Map Subobject - Map configuration

Parameter

Type

Card

Default

Description

width

String

Optional

"100%"

CSS expression corresponding to the map width

height

String

Optional

500px

CSS expression corresponding to the map height

markerUrl

String

Optional

images/marker.jpg

Path or URL of the image that shows the results on the map

marker

Object

Optional

N/A

See Marker subobject for details

customMarkers

Object

Optional

N/A

See CustomMarkers subobject for details

initialCenterLongitude

number

Optional

0.0

This is the initial longitude (in WGS 84 system) in the middle of displayed map, before a search is performed.

initialCenterLatitude

number

Optional

45.0

This is the initial latitude (in WGS 84 system) in the middle of displayed map, before a search is performed.

initialZoom

number

Optional

5

This is the initial zoom of displayed map, before a search is performed.

CustomMarkers Subobject - Use different markers

Parameter

Type

Card

Default

Description

switch

String

Mandatory

N/A

A custom expression which result is used to decide what marker has to be displayed (see Custom Expression)

cases

Array

Mandatory

N/A

The list of cases in which the choice is being made (See Case object)

Case Subobject

Parameter

Type

Card

Default

Description

case

String

Mandatory

N/A

A possible result of the switch custom expression evaluation

markerUrl

String

Optional

N/A

Path or URL of the image that shows a result on the map

marker

Object

Optional

N/A

See Marker subobject for details

Marker Subobject - Map configuration

Parameter

Type

Card

Default

Description

url

String

Optional

N/A

Path or URL of the image that shows a result on the map

width

Integer

Optional

21

The marker width when displayed (in pixels)

height

Integer

Optional

25

The marker height when displayed (in pixels)

offsetX

Integer

Optional

-10

The horizontal marker adjustment (in pixels)

offsetY

Integer

Optional

-25

The vertical marker adjustment (in pixels)

opacity

Decimal

Optional

1.0

The marker opacity when displayed (between 0.0 and 1.0)

Default settings are based on the use of the following marker image. Do not forget to adjust offsets if a personal image is used.

The marker objects are introduced to replace the markerUrl property providing more flexibility in the way the image is displayed. The two properties can be used at the same time but the URL property of the marker object has priority on the old markerUrl property.

How to define custom markers

Custom markers allow to display result subsets with different images. The choice is made based on a switch/case/default mechanism. A custom expression allows to extract an information from a result and to select the right marker configuration to use. 

Example:

AFSWidgetMapResults = {
  "latitudeExpr" : "xpath://hotel/latitude",
  "longitudeExpr" : "xpath://hotel/longitude",
  "map": {
    "width" : "100%",
    "height" : "200px",
    "markerUrl": "default-marker.png",
    "marker": { "opacity": 0.2 },
    "customMarkers": {
      "switch": "xpath://hotel/countryCode",
      "cases": [{
          "case": "FR",
          "markerUrl": "fr-marker.png"
        }, {
          "case": "DE",
          "marker": {
            "url": "de-marker.png",
            "width": 48,
            "height": 24,
            "offsetX": -24,
            "offsetY": -12
          }
        }
      ]
    }
  }
};

In the example above, a custom expression is used to read a country code in the reply client data section. expression evaluation leads to use

  • the fr-marker.png if FR is returned,
  • the de-marker.png if DE is returned,
  • the default-marker.png in all the other cases.

The custom expression offers much more possibilities when a JavaScript function is used. More sophisticated treatments can be done to return the case value.