The Nearby Transport Badge is a simple icon that can be placed anywhere in a page and requires only a lat / long position.

It will display itself if there are public transportation stops nearby with a hover menu that lists the closest stops. By default it will use only nearby metro stations but optionally it can show extended transportation means.

Application example on the listing page:

Integration

To integrate the widget you first need to load the base code into your page:

<script src="<https://scripts.avuxi.com/travel/location-scores/widget/latest/nearby-transport-badge-widget.js>"></script>

The badge requires an HTML tag (div, span) to expand itself inside it:

<div
    id="vxapp"
    data-avuxi-key="YOUR AVUXI KEY"
    data-location="41.38816434752833, 2.1682977226206144"
></div>

As a minimum, you will require to specify the location and your AVUXI key from the dashboard site. Then execute the code, for example by using:

<script>window.addEventListener("DOMContentLoaded",function (event) {new AvuxiTransportBadgeWidget("vxapp")})</script>

Multiple badges can exist in the same page, simply call the function for each one.

Configuration

You can further configure the badge by specifying optional settings:

• data-icon use your own icon, specify it as a data URL (https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls)
• data-icon-color any HTML color code or name
• data-icon-size in pixels
• data-language by default the widget will auto-detect the browser language and will fallback to English, use this setting to override the language