Documentation

• Change of design
• Price calculation by a formula
• Units
• Currency
• Route points
• Fuel calculator
• Speed limit
• Calculation results
• Limit results by list of countries
• Calculate route automatically on page load
• Can I delete the hyperlink with attribution?

Change of design

Use html code configurator to quickly customize the widget's design.

You can link your CSS using the data-css attribute to manage every aspect of the design.

The font family and font size in the widget automatically adjust to the style of your site. Font of hyperlink with attribution is used as a sample font. To disable automatic font customization, add the data-disable-font-auto-tuning attribute or link your CSS.

Price calculation by a formula

For any route, you can calculate the price by your formula. You can name this price as you wish, for example "Freight cost", "Delivery cost" or "Travel expenses". Look at this example.

To enable display of the price calculated by your formula, add the data-show-result-customized-cost attribute. Specify the calculation formula in the data-customized-cost-formula attribute and name in data-customized-cost-label.

When composing a formula, you can use the following variables:

• Length - Route length
• DrivingTime - Driving time in minutes
• FuelConsumption - Fuel consumption
• FuelAmount - Amount of fuel required for the entire route
• FuelPrice - Unit price of fuel
• FuelCost - Fuel cost for the entire route

You can also use the mathematical functions: min, max.

The units of measure for all variables are determined by the values of the data-measure and data-currency attributes.

Units

There are 3 systems of measures available:

• metric - metric measurement system: liter, kilometer
• us_cust - US customary measurement system: US gallon, mile
• imperial - imperial measurement system: UK gallon, mile

Currency

The following currencies are supported:

• ARS - Argentine peso
• AUD - Australian Dollar
• BRL - Brazilian Real
• CAD - Canadian Dollar
• CHF - Swiss franc
• CLP - Chilean peso
• CNY - Chinese Yuan
• COP - Colombian peso
• CZK - Czech koruna
• DKK - Danish krone
• DOP - Dominican peso
• EUR - Euro
• GBP - Pound sterling
• INR - Indian rupee
• IRR - Iranian rial
• MXN - Mexican Peso
• MYR - Malaysian ringgit
• NGN - Nigerian naira
• PEN - Peruvian sol
• PHP - Philippine peso
• PLN - Polish zloty
• RUB - Russian ruble
• SEK - Swedish krona
• TRY - Turkish lira
• USD - United States Dollar
• UZS - Uzbekistani sum
• VEF - Venezuelan Bolivar
• ZAR - South African rand

Route points

The data-default-from and data-default-to attributes specify the default values for fields "From" and "To". See how it works with the data-default-to attribute on this example.

To add the "Intermediate points" field, add the data-show-via attribute. The default value for this field can be set using the data-default-via attribute.

Fuel calculator

To add the fuel calculator fields, add the data-show-fuel-calc attribute.

The data-default-fuel-consumption and data-default-fuel-price attributes specify the default values for fields "Fuel consumption" and "Fuel price".

If no default values are given, then "Fuel consumption" is considered equal to 29.4 mpg, and "Fuel price" is considered as the gasoline price.

Speed limit

To add the speed limit fields, add the data-show-speed-profile attribute.

The data-default-speed-limit-motorway and data-default-speed-limit-other attributes specify the default values for fields "Maximum speed on motorway" and "Maximum speed on other roads".

If the default values are not given, then limits stipulated by traffic rules and regulations are used.

During calculations, the speed allowed by traffic rules and regulations for that particular road is automatically used. If the speed 68 mph is enabled on a motorway, and you specified 56 mph, then 56 mph will be used for calculation. And if you specify a limit of 93 mph, then the speed 68 mph allowed by traffic rules and regulations will be used.

Calculation results

You can add the result blocks you need with the help of attributes:

• data-show-result-length - Route length
• data-show-result-driving-time - Driving time
• data-show-result-fuel-amount - Fuel amount
• data-show-result-fuel-cost - Fuel cost
• data-show-result-map - Route map
• data-show-result-scheme - Route scheme

Limit results by list of countries

Worldwide routing is used by default.

You can strictly limit results by selected countries with attribute: data-only-countries. Only results from chosen countries will be shown.

You can add soft preference for countries with attribute: data-prefer-countries. Specified countries will have precedence over others.

Strict limit and soft preference can be used simultaneously.

The following country ISO codes are supported: AD, AE, AF, AG, AI, AL, AM, AO, AR, AT, AU, AZ, BA, BB, BD, BE, BF, BG, BH, BI, BJ, BM, BN, BO, BR, BS, BT, BW, BY, BZ, CA, CD, CF, CG, CH, CI, CK, CL, CM, CN, CO, CR, CU, CV, CY, CZ, DE, DJ, DK, DM, DO, DZ, EC, EE, EG, ER, ES, ET, FI, FJ, FK, FM, FO, FR, GA, GB, GD, GE, GG, GH, GI, GL, GM, GN, GQ, GR, GS, GT, GW, GY, HN, HR, HT, HU, ID, IE, IL, IM, IN, IO, IQ, IR, IS, IT, JE, JM, JO, JP, KE, KG, KH, KI, KM, KN, KP, KR, KW, KY, KZ, LA, LB, LC, LI, LK, LR, LS, LT, LU, LV, LY, MA, MC, MD, ME, MG, MH, MK, ML, MM, MN, MR, MS, MT, MU, MV, MW, MX, MY, MZ, NA, NE, NF, NG, NI, NL, NO, NP, NR, NU, NZ, OM, PA, PE, PG, PH, PK, PL, PN, PR, PS, PT, PW, PY, QA, RO, RS, RU, RW, SA, SB, SC, SD, SE, SG, SH, SI, SK, SL, SM, SN, SO, SR, SS, ST, SV, SY, SZ, TC, TD, TG, TH, TJ, TK, TL, TM, TN, TO, TR, TT, TV, TW, TZ, UA, UG, US, UY, UZ, VA, VC, VE, VG, VN, VU, WS, XK, YE, ZA, ZM, ZW.

Calculate route automatically on page load

With the data-calculate-instantly attribute, you can initiate route calculation immediately after page has loaded without waiting for the "Calculate" button to be pressed. In this case, do not forget to set the default values for required fields "From" and "To". Look at this example.

Access the metrics of route via javascript

// your custom function
var routeReadyHandler = function () {
    console.log("length=" + this.totalDistance);
    console.log("minutes=" + this.totalTime);
    console.log("fuelAmount=" + this.fuelAmount);
    console.log("fuelCost=" + this.fuelCost);
    console.log("fuelPrice=" + this.fuelPrice);
    console.log("fuelConsumption=" + this.fuelConsumption);
    console.log("customizedCost=" + this.customizedCost);
};

// assign function to widget
if (typeof RoutePlannerWidget === "undefined") {
    var allScriptTags = document.getElementsByTagName("script");
    for (var i = 0; i < allScriptTags.length; i++) {
        if (
            allScriptTags[i].hasAttribute("src")
            &&
            allScriptTags[i].getAttribute("src").endsWith("/widget/v1/client.js")
        ) {
            allScriptTags[i].addEventListener('load', function(){
                RoutePlannerWidget.prototype.routeReady = routeReadyHandler;
            });
        }
    }
} else {
    RoutePlannerWidget.prototype.routeReady = routeReadyHandler;
}

Can I delete the hyperlink with attribution?

No, you can't. Please save the proprietary attribution in accordance with Creative Commons 4.0 license.