GeoDistSearch - AFS

AFS Integration Guide

Product
AFS
AFS_Version
7.7
Category
Reference Guide

This widget works with the AFS geodist functionality. It requires a geolocation-supporting search service.

This widget is based on a map provided by Open Street Map.AFS GeoDist functionality enables to search results located around a point described by its coordinates at a maximum distance (radius).

To select this point, users just have to click a point on the map, it will draw a circle of the selected radius around this point. The radius can be adjusted thanks to a slider. A button "around me" enables users to select automatically their current position thanks to browsers geolocation API.

GeoDistSearch - This widget works with the AFS geodist functionality. It requires a geolocation-supporting search service.

Parameter

Type

Card

Default

Description

map

Object

Optional

N/A

See Map Subobject Configuration

radius

Object

Optional

N/A

See Radius Subobject Configuration

labels

Object

Optional

N/A

See Labels Subobject configuration

distanceUnit

Enumeration (KM or MILE)

Optional

KM

The distance unit you want to use. User KM for kilometers and MILE for miles.

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

marker

Object

Optional

N/A

See Marker Subobject for details.

markerUrl

String

Optional

images/marker.jpg

Path of the image that shows the selected point on the map.

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.

Radius Subobject - Search radius configuration.

Component

Type

Card

Default

Description

color

String

Optional

#FF6600 (orange)

CSS color expression corresponding to the inside color of the radius.

borderColor

String

Optional

#EE5500 (red)

CSS color expression corresponding to border color of the radius.

borderWidth

Integer

Optional

3

Path of the image that shows the selected point on the map

minValue

Integer

Optional

0

The minimum value (in the distanceUnit defined at the root of the widget configuration) displayed in the radius slider.

maxValue

Integer

Optional

500

The maximum value (in the distanceUnit defined at the root of the widget configuration) displayed in the radius slider.

defaultValue

Integer

Optional

50

The default value (in the distanceUnit defined at the root of the widget configuration) displayed in the radius slider.

Label Subobject - Labels configuration.

Parameter

Type

Card

Default

Description

title

String

Optional

Geolocation

Label displayed as widget title

description

String

Optional

Click the map to define a search area

A kind of short widget manual

removeGeoDist

String

Optional

Remove geographic criterion

Label of the button that enables to remove the geodist criterion

aroundMe

String

Optional

Around me

Label of the button that enables to search around user's position

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.