The Offer Map Component

Description

This 6M component displays the best offers. To specify which accommodations should be displayed, it can be filled with geo4Travel IDs, WKTs, GIATA IDs, a geo circle, HUB group IDs (regions) or used with an "open search".

Screenshots

Map with offers (marker and cluster).

Maintainer	technikportalentwicklung@tui.at
Locales	`en-US`, `de-DE`

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://feature.cloud.tui.com/cdn/offer-map/offer-map.js" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. Remember to replace VALUE with actual valid values for the given attribute.

<tui-offer-map api-key="VALUE"></tui-offer-map>

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	Required
`brand`	Allows setting a brand, which will used to style the component. Defaults to 'tui'	`airtours`, `gulet`, `robinson`, `tui`	no
`tenant`	Allows setting a tenant, which will used to query the correct Peakwork Hub. Defaults to 'TUICOM'	`12FLYAT`, `12FLYCOM`, `GULET`, `TUIAT`, `TUICH`, `TUICOM`	no
`api-key`	The Google Maps API-Key		yes
`geo-4-travel-ids`	Allows setting GEO 4 Travel ID(s), which will be used to fill the map with accommodations that are within the polygon defined in GEO 4 Travel. Multiple IDs need to be separated with a comma.		no
`giata-ids`	Allows setting GIATA ID(s), which will be used to fill the map with accommodations that match the GIATA IDs. Multiple IDs need to be separated with a comma.		no
`geo-circle-latitude`	Allows setting the latitude of a geocoordination point. If set, geo-circle-longitude is required as well. With coordinates and radius a circle will be generated and the map will be filled with accommodations that are within this circle.		no
`geo-circle-longitude`	Allows setting the longitude of a geocoordination point. If set, geo-circle-latitude is required as well. With coordinates and radius a circle will be generated and the map will be filled with accommodations that are within this circle.		no
`geo-circle-radius`	Allows setting the radius of a circle. If set, geoCircleLatitude and geoCircleLongitude are required as well. With coordinates and radius a circle will be generated and the map will be filled with accommodations that are within this circle. Defaults to '5000'		no
`wkt`	Allows setting a wkt (Well-known text is a text markup language for representing vector geometry objects), which will used to fill the map with accommodations that are within this polygon.		no
`hub-group-ids`	Allows setting HUB Group ID(s), which will be used to fill the map with accommodations that match the HUB Group IDs. Multiple IDs need to be separated with a comma.		no
`hub-geo-tree-id`	Allows setting a Peakwork HUB Geotree ID, which will be used to specify the Geotree ID for the Peakwork Player queries. Defaults to '4'		no
`travel-type`	Allows setting a travel type. Defaults to 'hotel'	`hotel`, `package`	no
`travellers-adults`	Allows setting the ages of the adults per room. Ages are separated by a comma, rooms by a semicolon. E.g. 25,25;25,20,21 (room 1: 2 adults, room2: 3 adults). Defaults to '25,25'		no
`travellers-children`	Allows setting the ages of the children per room. Ages are separated by a comma, rooms by a semicolon. E.g. ;8,12 (room 1: 0 children, room2: 2 children). Defaults to '' (no children)		no
`tour-operator`	Allows setting a tour operator as a filter parameter for the query.		no
`departure-date`	Allows setting a departure date as a filter parameter for the query. The format is YYYY-MM-DD (e.g. 2022-10-30).		no
`return-date`	Allows setting a return date as a filter parameter for the query. The format is YYYY-MM-DD (e.g. 2022-10-30).		no
`length-of-stay`	Allows setting length of stay as a filter parameter for the query. Allowed values are 'number' (e.g. '2') or 'number-number' (e.g. '7-14'). Defaults to '7'.		no
`sorting-order`	Allows setting a sorting order for the results. Defaults to 'price'.		no
`secondary-sorting-order`	Allows setting a secondary sorting order for the results. Defaults to 'price'.		no
`gt-list-and`	Allows setting a list of global types that are combined with a logical AND as a filter parameter for the query.		no
`gt-list-or`	Allows setting a list of global types that are combined with a logical OR as a filter parameter for the query.		no
`hotel-attr-and`	Allows setting a list of hotel attributes that are combined with a logical AND as a filter parameter for the query.		no
`hotel-attr-or`	Allows setting a list of hotel attributes that are combined with a logical OR as a filter parameter for the query.		no
`category`	Allows setting a hotel category as a filter parameter for the query.		no
`currency`	Allows setting a currency that will be used for the prices returned by the middle layer. Defaults to 'EUR'.		no
`min-price`	Allows setting a minimum total price for an offer as a filter parameter for the query.		no
`max-price`	Allows setting a maximum total price for an offer as a filter parameter for the query.		no
`departure-airports`	Allows setting departure airports as a filter parameter for the query. IATA codes must be used. Multiple codes need to be separated with a comma.		no
`results-total`	Allows setting the maximum number of offers that should be displayed on the map. NOTE: for performance reasons the maximum number can not exceed 200 (even if a value greater than 200 is entered here).		no
`price-view`	Allows setting the price view, which is either total or per-person. Defaults to 'total'	`total`, `pP`	no

Events

Event accommodation.clicked

Type publish

Description

Occurs when the CTA button in the offer-overlay or the list item in the cluster-overlay is clicked and provides data about the query that was used to get this offer and the offer itself.

Payload

The payload object of this event has the following properties:

Name	`meta`
Description	Metadata returned from the middlelayer. This contains all query parameters that have been sent to the middlelayer and the followinf fields: travelType, rooms, lengthOfStay, numberOfRooms.
Type	object

Name	`searchParameter`
Description	The search parameters that have been used for the player query.
Type	object
Schema	{ "type": "object", "properties": { "adults": { "type": "string" }, "category": { "type": "string" }, "children": { "type": "string" }, "currency": { "type": "string" }, "departureAirports": { "type": "string" }, "departureDate": { "type": "string" }, "gtListAnd": { "type": "string" }, "gtListOr": { "type": "string" }, "hotelAttrAnd": { "type": "string" }, "hotelAttrOr": { "type": "string" }, "hubGeoTreeId": { "type": "string" }, "lengthOfStay": { "type": "string" }, "locale": { "type": "string" }, "priceView": { "type": "string" }, "resultsTotal": { "type": "string" }, "returnDate": { "type": "string" }, "secondarySortingOrder": { "type": "string" }, "sortingOrder": { "type": "string" }, "tenant": { "type": "string" }, "tourOperator": { "type": "string" }, "travelType": { "type": "string" } } }

Name	`offer`
Description	The data of the selected offer.
Type	object
Schema	{ "type": "object", "properties": { "ArrivalDate": { "type": "string" }, "Brand": { "type": "string" }, "LengthOfStay": { "type": "number" }, "Price": { "type": "number" }, "PricePerNight": { "type": "number" }, "PricePerPerson": { "type": "number" }, "ProductCode": { "type": "string" }, "Room": { "type": "array", "items": { "type": "object", "properties": { "Board": { "type": "string" }, "BoardCode": { "type": "string" }, "BookingCode": { "type": "string" }, "RoomLabel": { "type": "string" } }, "required": [ "Board", "BoardCode", "BookingCode", "RoomLabel" ] } }, "Flight": { "type": "object", "properties": { "DepartureAirport": { "type": "string" }, "DepartureAirportCode": { "type": "string" } } }, "TourOperator": { "type": "string" } }, "required": [ "ArrivalDate", "Brand", "LengthOfStay", "Price", "PricePerNight", "PricePerPerson", "ProductCode", "Room", "TourOperator" ] }

Name	`giataId`
Description	The GIATA ID of the accommodation of the offer that has been clicked.
Type	string

Name	`name`
Description	The name of the accommodation of the offer that has been clicked.
Type	string

Event	`showMoreButton.clicked`
Type	publish
Description	Occurs when the show more button in the cluster-overlay is clicked.
Payload	none

Event	`markerClusterer.clicked`
Type	publish
Description	Occurs when a marker clusterer is clicked.
Payload	none

Event	`map.initialized`
Type	publish
Description	Occurs as soon as the map has been initialized.
Payload	none

The Offer Map Component

Description

Screenshots

Meta

Usage

Attributes

Events