AVUXI's TopPlace™ Location Descriptions is a component that can be integrated into any webpage. It will display a text area with a description of a specific location, based on the venues and amenities that are located within walking or driving range.

For example:

The widget provides a div tag with id location-description and no extra formatting. The site must apply CSS rules to stylize the text:

<div id="location-description">The location provides easy access to public ...</div>

To integrate the widget simply load the script from our CDN “https://scripts.avuxi.com/travel/location-descriptions/widget/latest/location-descriptions-widget.js” (please note that you can replace latest with any specific version — i.e. 1.0 — to freeze the codebase) and execute it on an empty div with the data- settings as needed:

<div id="app"
     data-avuxi-key='YOUR AVUXI KEY'
     data-language='es'
     data-latitude='41.39029' data-longitude='2.140638'
     data-mode='walk'/>

When ready, simply execute the downloaded script:

new AvuxiLocationDescriptionsWidget("app")

The following example will display the widget once the window has finished loading:

<!DOCTYPE html>
<html>
    <head>
        <title>Empty project</title>
        <link href="<https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css>" rel="stylesheet">
        <meta charset="utf-8">
    </head>
    <body>
    <div class='flex'>
      <div id="app" class='font-light ml-8 mr-8 mt-4 text-justify'
           data-avuxi-key='YOUR AVUXI KEY'
           data-language='es'
           data-latitude='41.39029' data-longitude='2.140638'
           data-mode='walk'
      ></div>
    </div>
        <script type="module" src="<https://scripts.avuxi.com/travel/location-descriptions/widget/latest/location-descriptions-widget.js>"></script>
        <script>window.addEventListener("DOMContentLoaded",function (event) {new AvuxiLocationDescriptionsWidget("app")})</script>
    </body>
</html>

The available options are:

• data-avuxi-key this required parameter is obtained from the configuration site.
• data-language optional parameter to specify the language that should be used to display the text. If omitted it will be English. Use the ISO 3166-1 alpha-2 country code.
• data-latitude and data-longitude are mandatory parameters using WG84 GPS coordinates (EPSG:4326).
• data-mode is an optional parameter that can take the values "walk" or "drive", if omitted, "walk" will be used.
• data-sections is an optional parameter that can be used to decide which text sections are included and the sort order. By default all sections with data will be used in the following order publicTransport, privateTransport, culture, education, health, outdoors, eating, everyDay

Please note that the integration instructions above are meant for a widget that renders in the browser. However, this widget is just a very thin wrapper over one single endpoint, designed to make it extra easy to integrate. Alternatively, the endpoint can be called directly from the back-end to get the text, for example to include it inside a server-side rendered html. This is quite straight forward. Contact us if this solution would be more suitable for your use case.