Distance Great Britain

Overview

ParametersQuery string

Responses

{
  "distance": 3798,
  "duration": 9
}

Errors

{
  "error_id": "INVALID_VALUE",
  "errors": [
    {
      "message": "Input should be 'straight' or 'road'",
      "help": "https://pro6pp.nl/docs/v2/redoc",
      "parameter": "algorithm",
      "value": "fast"
    }
  ]
}

{
  "error_id": "UNAUTHORIZED",
  "errors": [
    {
      "message": "No authorization token provided",
      "help": "https://pro6pp.nl/docs/v2/redoc#section/Authentication"
    }
  ]
}

Code examples

curl "https://api.pro6pp.nl/v2/distance/gb?fromPostalCode=SW1A1AA&toPostalCode=W1A1AA&algorithm=road&authKey=YOUR_API_KEY"

We encourage you to request example code in the language you prefer.

Step by step

Set up a quick form to try out the Great Britain Distance functionality by following the steps below.

1. Build the HTML page

   We start by creating an empty HTML page, containing a minimal web page structure. Create a new .html file named pro6pp_great-britain_distance.html. Add the following code between the <body> and </body> tags. It adds the input fields for entering the address.

   pro6pp_great-britain_distance.htmlCopy

   <form class="form" id="form">
     <div>Call</div>
     <div>
       <label for="fromPostalCode">fromPostalCode:</label>
       <input id="fromPostalCode" class="fromPostalCode" placeholder="SW1A1AA"/>
       <label for="toPostalCode">toPostalCode:</label>
       <input id="toPostalCode" class="toPostalCode" placeholder="W1A1AA"/>
       <label for="algorithm">algorithm:</label>
       <input id="algorithm" class="algorithm" placeholder="road"/>
     </div>
     <div>
       <span style="color: red" class="message"></span>
     </div>
     <div>
       <button type="submit">Submit</button>
     </div>
     <br />
     <div>Response</div>
     <br />
     <div>Full Response</div>
     <pre class="jsonResponse"></pre>
   </form>

   Show full code

2. Add interaction

   Add the following JavaScript code in a separate pro6pp_great-britain_distance.js file. The IDs and Class names of the HTML elements should match with the ones specified in this JavaScript file in order to get the correct results.

   pro6pp_great-britain_distance.jsCopy

   document.addEventListener("DOMContentLoaded", function() {
       const pro6ppAuthKey = "AUTH_KEY"; // Replace with your actual authorization key
   
       let messageSpan = document.querySelector(".message");
       let jsonResponseSpan = document.querySelector(".jsonResponse");
       const BASE_URL = "https://api.pro6pp.nl/v2";
   
       function fetchAddress(authKey) {
           const queryParams = {
               fromPostalCode: document.getElementById("fromPostalCode").value,
               toPostalCode: document.getElementById("toPostalCode").value,
               authKey: authKey
           };
           const optionalQueryParams = [
               "algorithm",
           ];
           for (const name of optionalQueryParams) {
               const value = document.getElementById(name).value;
               if (value !== "") {
                   queryParams[name] = value;
               }
           }
   
           let encodedUrl = new URL(`${BASE_URL}/distance/gb`);
           encodedUrl.search = new URLSearchParams(queryParams);
   
           fetch(encodedUrl)
               .then(async (response) => {
                   const data = await response.json();
                   if (data) {
                       messageSpan.textContent = "";
                       jsonResponseSpan.textContent = JSON.stringify(data, null, 2);
                   }
               })
               .catch((error) => {
                   console.error("Error fetching: ", error);
                   messageSpan.textContent = error.message;
               });
       }
   
       const form = document.getElementById("form");
       form.onsubmit = function (event) {
           event.preventDefault();
           fetchAddress(pro6ppAuthKey);
       }
   });

   Show full code

3. Make it work

   Link the JavaScript file inside the pro6pp_great-britain_distance.html right before closing the </body> tag.

   pro6pp_great-britain_distance.htmlCopy

     ...
     <script src="pro6pp_great-britain_distance.js"></script>
    </body>
   </html>

   To access the Pro6PP web service, you need to request your personal authorization key. This key is emailed to you right after signing up. Replace the above placeholder AUTH_KEY with your personal authorization key.

   If you don’t have an account yet, sign up for a free 2-month trial. After creating your account, go to your Subscription details and copy your AUTH_KEY. You’ll need this key to authenticate your requests.

4. See it in action

   Once you’ve completed the previous steps, it’s time to run the form locally in your browser. You should now have two files in the same folder on your computer:

   • pro6pp_great-britain_distance.html - the HTML page with the form.
   • pro6pp_great-britain_distance.js - the JavaScript file that handles the interaction.

   You can now open the HTML file in your browser by simply double-clicking it in your file explorer (e.g., Finder on macOS or File Explorer on Windows). Alternatively, you can open it manually in the browser using the full file:/// path. For example:

   Example file pathsCopy

   file:///C:/Users/YourName/Documents/pro6pp_great-britain_distance.html
   file:///Users/yourname/Desktop/pro6pp_great-britain_distance.html

   Once the page opens, start typing in the form fields and hit Submit to see the API response displayed in the “Full Response” section.