- Change of design
- Price calculation by a formula
- 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.
<a class="rp-widget-link" ... data-css="https://example.com/style.css" ... >...</a>
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.
<a class="rp-widget-link" ... data-disable-font-auto-tuning ... >...</a>
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.
<a class="rp-widget-link" ... data-show-result-customized-cost data-customized-cost-formula="max(150, FuelCost * 4 + 100)" data-customized-cost-label="Freight Cost" ... >...</a>
The units of measure for all variables are determined by the values of the data-measure and data-currency attributes.
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
<a class="rp-widget-link" ... data-measure="metric" ... >...</a>
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
- EUR - Euro
- GBP - Pound sterling
- INR - Indian rupee
- MXN - Mexican Peso
- 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
- VEF - Venezuelan Bolivar
- ZAR - South African rand
<a class="rp-widget-link" ... data-currency="ARS" ... >...</a>
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.
<a class="rp-widget-link" ... data-default-to="Toronto (Ontario)" ... >...</a>
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.
<a class="rp-widget-link" ... data-show-via data-default-via="Vancouver (British Columbia); Toronto (Ontario)" ... >...</a>
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 8 L/100 km, and "Fuel price" is considered as the gasoline price.
<a class="rp-widget-link" ... data-show-fuel-calc data-default-fuel-consumption="12" data-default-fuel-price="2.4" ... >...</a>
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 110 km/h is enabled on a motorway, and you specified 90 km/h, then 90 km/h will be used for calculation. And if you specify a limit of 150 km/h, then the speed 110 km/h allowed by traffic rules and regulations will be used.
<a class="rp-widget-link" ... data-show-speed-profile data-default-speed-limit-motorway="100" data-default-speed-limit-other="60" ... >...</a>
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
<a class="rp-widget-link" ... data-show-result-length data-show-result-map ... >...</a>
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.
<a class="rp-widget-link" ... data-only-countries="US,CA,MX" data-prefer-countries="US,MX" ... >...</a>
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.
<a class="rp-widget-link" ... data-calculate-instantly data-default-from="Toronto (Ontario)" data-default-to="Vancouver (British Columbia)" ... >...</a>
Can I delete the hyperlink with attribution?
No, you can't. Please save the proprietary attribution in accordance with Creative Commons 4.0 license.