{"_id":"55e9774e39c5042d00912b3e","category":{"_id":"55e06ae66bad670d0081f25c","project":"55e06494a44fae0d002146aa","pages":["55e06b2358c5460d0076aa0f","55e06b33a44fae0d002146c5","55e06b4058c5460d0076aa11","55f9624d3bb4bb0d0022d188","56277cafe2ce610d004e3ebc","56277cb83a4c6b0d00c4555f","56277cc444c87f0d00fe6480","56277ccee2ce610d004e3ebe"],"version":"55e06495a44fae0d002146ad","__v":8,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-08-28T14:06:30.305Z","from_sync":false,"order":14,"slug":"os-routes-coming-soon","title":"OS Routes (Beta)"},"parentDoc":null,"__v":6,"project":"55e06494a44fae0d002146aa","version":{"_id":"55e06495a44fae0d002146ad","project":"55e06494a44fae0d002146aa","__v":54,"createdAt":"2015-08-28T13:39:33.907Z","releaseDate":"2015-08-28T13:39:33.907Z","categories":["55e06496a44fae0d002146ae","55e06997a44fae0d002146c2","55e06a6958c5460d0076aa0c","55e06ae66bad670d0081f25c","55e06cc1a44fae0d002146cb","55e06ddda44fae0d002146cd","55e95f261fd7e82300ef359f","55e95fe47fc27b2d00d32cfa","55e96eef358d923700be984d","55e96ef6358d923700be984e","55e96efda7ca823900ad547e","55e96f04a7ca823900ad547f","55e970cc358d923700be9853","55e973f4358d923700be9858","55e973f9a7ca823900ad548c","55e977bf358d923700be985d","55e9780f8b72bb3700b1d5bd","55e97815a7ca823900ad5493","55e9781c358d923700be985f","55e97821461e2a390050f23b","55f963c23bb4bb0d0022d18c","5624c67406e8040d005ed6b2","5624dcf25a86b423009462e8","5625f229d0f87e190014c4ed","5627819fe2ce610d004e3ec8","562781b23a4c6b0d00c4556b","5627837166c62617009d17e2","5627851efcbbc621004ebff1","5627860044c87f0d00fe6491","562e3c6d54a5be0d00070c3e","564c955aae6cb82100dc137a","5652e22abbe7110d00dba748","5652f25523d4262d00b21c58","5652fdad51e4e81900bf2452","5652fdcbb60abb1700bafadc","5654494f65bec717007e0293","565da11a77f0090d005818ff","565f063f413e06170093de18","565f06fb413e06170093de21","56dd6773efaca42900e5f58e","56dd68630c3bb41700b0b037","56dd7d24d5419f170075dfb3","56dd9448c117291700015b60","56dd9454c117291700015b61","577a6f8b9748b80e00ef3f45","577a6f969748b80e00ef3f46","577bba7f6e5f301900fada99","57a9cc8e5b1ace0e00de743f","58aab134c50c33250046b8f8","58aab146aecc3e2500573d4c","58aab1628f862f250076f92e","58aab1938f862f250076f92f","58aab3e5aecc3e2500573d56","58aab3f2aecc3e2500573d57"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"user":"55c9b7b4e4927a0d0004a727","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-04T10:49:50.022Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Register your key\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Writing your code\"\n}\n[/block]\n### Full code snippet\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\\\"></script>\\n\\n<script type=\\\"text/javascript\\\">\\n$(document).ready(function() {\\n\\tvar url = 'https://api.ordnancesurvey.co.uk/routing_api/route?point=437165,115640&point=437387,115174&vehicle=car';\\n\\tvar apiKey = '&key=[[app:key]]';\\n\\t$.getJSON(url + apiKey, function(data){\\n\\t\\tconsole.log(data);\\n\\t});\\n});\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n### Breakdown\n1. Access the JQuery Javascript library. This example is using Google’s JQuery Version 2.1.4 CDN.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n2. Define the client-side scripting and setup the javascript to run once the page has loaded.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\">\\n$(document).ready(function() {\\n});\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n3. Here the URL is declared as the variable “url” and the API key as the variable “apiKey”. This is to make the API key more manageable in the situation that it needs to be changed. The default mandatory parameters of the resource have to be present in the request, or concatenated into it before being passed on to the service.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var url = 'https://api.ordnancesurvey.co.uk/routing_api/route?point=437165,115640&point=437387,115174&vehicle=car';\\nvar apiKey = '&key=[[app:key]]';\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n4. The URL variable is concatenated with the API key and using JQuery AJAX is sent to the service. As the default response is JSON, the “getJSON” function is used. The response is returned in the variable “data” which is then logged into the JavaScript developer console.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$.getJSON(url + apiKey, function(data){\\n\\t\\tconsole.log(data);\\n\\t});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Running your code\"\n}\n[/block]\nThe code above can be copied and pasted into a text editor or IDE and ran. A demonstration of the code has also been put into a JSFiddle demonstrator located here:\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fjsfiddle.net%2FAPITeam%2Fy8of6qsh%2Fembedded%2F&url=https%3A%2F%2Fjsfiddle.net%2FAPITeam%2Fy8of6qsh%2F&image=https%3A%2F%2Fwww.gravatar.com%2Favatar%2F703841b21835cc6963a78c96310a45d2%2F%3Fdefault%3D%26s%3D80&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"400\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/APITeam/y8of6qsh/\",\n  \"title\": \"OS Routing API Demonstrator - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\",\n  \"image\": \"https://www.gravatar.com/avatar/703841b21835cc6963a78c96310a45d2/?default=&s=80\"\n}\n[/block]","excerpt":"","slug":"os-routes-quick-start-guide","type":"basic","title":"Quick start guide"}
[block:api-header] { "type": "basic", "title": "Register your key" } [/block] [block:api-header] { "type": "basic", "title": "Writing your code" } [/block] ### Full code snippet [block:code] { "codes": [ { "code": "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>\n\n<script type=\"text/javascript\">\n$(document).ready(function() {\n\tvar url = 'https://api.ordnancesurvey.co.uk/routing_api/route?point=437165,115640&point=437387,115174&vehicle=car';\n\tvar apiKey = '&key=[[app:key]]';\n\t$.getJSON(url + apiKey, function(data){\n\t\tconsole.log(data);\n\t});\n});\n</script>", "language": "javascript" } ] } [/block] ### Breakdown 1. Access the JQuery Javascript library. This example is using Google’s JQuery Version 2.1.4 CDN. [block:code] { "codes": [ { "code": "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>", "language": "html" } ] } [/block] 2. Define the client-side scripting and setup the javascript to run once the page has loaded. [block:code] { "codes": [ { "code": "<script type=\"text/javascript\">\n$(document).ready(function() {\n});", "language": "html" } ] } [/block] 3. Here the URL is declared as the variable “url” and the API key as the variable “apiKey”. This is to make the API key more manageable in the situation that it needs to be changed. The default mandatory parameters of the resource have to be present in the request, or concatenated into it before being passed on to the service. [block:code] { "codes": [ { "code": "var url = 'https://api.ordnancesurvey.co.uk/routing_api/route?point=437165,115640&point=437387,115174&vehicle=car';\nvar apiKey = '&key=[[app:key]]';", "language": "javascript" } ] } [/block] 4. The URL variable is concatenated with the API key and using JQuery AJAX is sent to the service. As the default response is JSON, the “getJSON” function is used. The response is returned in the variable “data” which is then logged into the JavaScript developer console. [block:code] { "codes": [ { "code": "$.getJSON(url + apiKey, function(data){\n\t\tconsole.log(data);\n\t});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Running your code" } [/block] The code above can be copied and pasted into a text editor or IDE and ran. A demonstration of the code has also been put into a JSFiddle demonstrator located here: [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fjsfiddle.net%2FAPITeam%2Fy8of6qsh%2Fembedded%2F&url=https%3A%2F%2Fjsfiddle.net%2FAPITeam%2Fy8of6qsh%2F&image=https%3A%2F%2Fwww.gravatar.com%2Favatar%2F703841b21835cc6963a78c96310a45d2%2F%3Fdefault%3D%26s%3D80&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=jsfiddle\" width=\"600\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/APITeam/y8of6qsh/", "title": "OS Routing API Demonstrator - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png", "image": "https://www.gravatar.com/avatar/703841b21835cc6963a78c96310a45d2/?default=&s=80" } [/block]