{"_id":"56bb10c57bc138170015f2bf","project":"55e06494a44fae0d002146aa","parentDoc":null,"category":{"_id":"55e973f9a7ca823900ad548c","pages":["5625ea78a96b420d00fe102e","5625ea8dd0f87e190014c4e4","5626054ad0f87e190014c50f","564b4587ee12850d00958626","56bb10c57bc138170015f2bf","56e2f687f1ad030e00e72f80"],"project":"55e06494a44fae0d002146aa","__v":6,"version":"55e06495a44fae0d002146ad","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-04T10:35:37.629Z","from_sync":false,"order":4,"slug":"guides-1","title":"guides"},"__v":13,"user":"55eea68fc93e8c17008a109c","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-02-10T10:28:21.457Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"The previous OS WMTS offering (OS OpenSpace API) was made using a custom JavaScript library that was built upon OpenLayers 2.12. In this tutorial, migrating the mapping from OpenSpace to OpenLayers 2.12 using EPSG:27700(British National Grid) is explained step by step. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Please note that the latest version of OpenLayers 2.x is 2.13.1. This demo focuses on transferring users over to OpenLayers 2.12.\",\n  \"title\": \"OpenLayers 2.12\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"This demo focuses on a like-for-like transition from OpenSpace to OS Maps API and therefore uses the British National Grid spatial reference system.\",\n  \"title\": \"British National Grid (EPSG:27700)\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Initial Code\"\n}\n[/block]\nHere is basic code for setting up an OpenSpace map, which will be converted in this tutorial to an OpenLayers 2.12 map.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n<head>\\n<meta charset=\\\"utf-8\\\">\\n<title>Basic Map</title>\\n\\n<script type=\\\"text/javascript\\\" src=\\\"http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=OPENSPACE_KEY\\\"></script>  \\n  \\n<style>\\n  html, body {height: 100%;}\\n  #map {width: 700px; height: 500px; border:1px solid black;}\\n</style>\\n\\n</head>  \\n  \\n<script type=\\\"text/javascript\\\">\\nvar osMap;\\n\\nfunction init(){\\n\\tosMap = new OpenSpace.Map('map');\\n\\tosMap.setCenter(new OpenSpace.MapPoint(400000, 400000), 0);  \\n}\\n</script>\\n  \\n<body onload=\\\"init()\\\">\\n  <h2>Basic Map</h2>\\n  <div id=\\\"map\\\"></div>\\n</body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Converting the code\"\n}\n[/block]\n1. The JavaScript library used for the mapping has to change from OpenSpace to OpenLayers, specifically version 2.12. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=OPENSPACE_KEY\\\"></script> \\n\\n<!-- Changes to -->\\n\\n<script type=\\\"text/javascript\\\" src=\\\"https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js\\\"></script>  \",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n2. CSS has to be added to remove an incorrect copyright market due to a WMTS service being used.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<style>\\n  html, body {height: 100%;}\\n  #map {width: 700px; height: 500px; border:1px solid black;}\\n</style>\\n\\n<!-- Changes to -->\\n\\n<style>\\n  html, body {height: 100%;}\\n  #map {width: 700px; height: 500px; border:1px solid black;} \\n\\tdiv.olControlAttribution, div.olControlScaleLine {display:none;}\\n</style>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n3. As the api authentication now occurs with each request rather than with access to the OpenSpace library a variable storing the API key needs to be created after the global osMap variable has been declared. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var osMap;\\n\\n//Changes to\\n\\nvar osMap;\\nvar key = \\\"&key=[[app:key]]\\\";\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n4. The initialising function structure remains, but the OpenSpace map now has to be loaded using OpenLayers 2.12 WMTS method.The OS Maps API WMTS service with the EPSG:27700 projection is used in this example and loaded to an OpenLayers XYZ layer. The layer is then added to the map. To ensure the layer works correctly, the layer resolutions and extents have to be specified. \n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"function init(){\\n  osMap = new OpenSpace.Map('map');\\n  osMap.setCenter(new OpenSpace.MapPoint(400000, 400000), 0);  \\n}\\n\\n//Changes to\\n\\nfunction init(){\\n\\t\\n\\tvar mapResolutions = [896, 448, 224, 112, 56, 28, 14, 7, 3.5, 1.75, 0.875, 0.4375, 0.21875, 0.109375];\\n\\t\\n\\tvar extent = new OpenLayers.Bounds(-238375.0, 0, 680000, 1376256);\\n\\t\\n\\tvar restrictedExtent = new OpenLayers.Bounds(0, 0, 680000, 1376256);\\n\\tosMap = new OpenLayers.Map({\\n\\t  div: \\\"map\\\",\\n\\t  maxExtent: extent,\\n\\t  resolutions: mapResolutions,\\n\\t  units: \\\"m\\\",\\n\\t  projection: \\\"EPSG:27700\\\",\\n\\t  restrictedExtent: restrictedExtent,\\n\\t  layers: [\\n\\t\\t\\tnew OpenLayers.Layer.XYZ(\\n\\t\\t\\t\\t\\\"Outdoor\\\",\\n        \\t\\t[     'https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/wmts?service=WMTS&request=GetTile&version=1.0.0&layer=Outdoor%2027700&style=true&format=image%2Fpng&tileMatrixSet=EPSG%3A27700&tileMatrix=EPSG%3A27700%3A${z}&tileRow=${y}&tileCol=${x}'+key\\n      \\t  ]\\n   \\t   )\\n \\t   ]\\n\\t});\\n\\t\\n\\tosMap.setCenter(new OpenLayers.LonLat(463678, 151989), 0);\\n};\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Output Code in Full\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n<head>\\n<meta charset=\\\"utf-8\\\">\\n<title>Basic Map</title>\\n\\n<script type=\\\"text/javascript\\\" src=\\\"https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js\\\"></script>\\n  \\n \\n<style>\\n  html, body {height: 100%;}\\n  #map {width: 700px; height: 500px; border:1px solid black;} \\n\\tdiv.olControlAttribution, div.olControlScaleLine {display:none;}\\n</style>\\n\\n</head>  \\n  \\n<script type=\\\"text/javascript\\\">\\nvar osMap;\\nvar key = \\\"&key=[[app:key]]\\\";\\n\\nfunction init(){\\n\\t\\tvar mapResolutions = [896, 448, 224, 112, 56, 28, 14, 7, 3.5, 1.75, 0.875, 0.4375, 0.21875, 0.109375];\\n\\t\\n\\tvar extent = new OpenLayers.Bounds(-238375.0, 0, 680000, 1376256);\\n\\t\\n\\tvar restrictedExtent = new OpenLayers.Bounds(0, 0, 680000, 1376256);\\n\\tosMap = new OpenLayers.Map({\\n\\t  div: \\\"map\\\",\\n\\t  maxExtent: extent,\\n\\t  resolutions: mapResolutions,\\n\\t  units: \\\"m\\\",\\n\\t  projection: \\\"EPSG:27700\\\",\\n\\t  restrictedExtent: restrictedExtent,\\n\\t  layers: [\\n\\t\\t\\tnew OpenLayers.Layer.XYZ(\\n\\t\\t\\t\\t\\\"Outdoor\\\",\\n        \\t\\t[     'https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/wmts?service=WMTS&request=GetTile&version=1.0.0&layer=Outdoor%2027700&style=true&format=image%2Fpng&tileMatrixSet=EPSG%3A27700&tileMatrix=EPSG%3A27700%3A${z}&tileRow=${y}&tileCol=${x}'+key\\n      \\t  ]\\n   \\t   )\\n \\t   ]\\n\\t});\\n\\tosMap.setCenter(new OpenLayers.LonLat(463678, 151989), 0);\\n};\\n</script>\\n\\n<body onload=\\\"init()\\\">\\n  <h2>Basic Map</h2>\\n  <div id=\\\"map\\\"></div>\\n</body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Loop through the layers\",\n  \"body\": \"It is possible to create a basic loop that creates all the layers for OS Maps API, and replace the layers key in the osMap object with the allLayers array:\\n<pre>\\tvar styles = [\\\"Road\\\", \\\"Outdoor\\\", \\\"Light\\\", \\\"Night\\\"];\\n\\tvar allLayers = [];\\n\\t\\n\\tfor (i = 0; i < styles.length; i++){\\n\\t\\tvar layer = new OpenLayers.Layer.XYZ(\\n\\t        styles[i],\\n\\t        ['https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/wmts?service=WMTS&request=GetTile&version=1.0.0&layer='+styles[i]+'%2027700&style=true&format=image%2Fpng&tileMatrixSet=EPSG%3A27700&tileMatrix=EPSG%3A27700%3A${z}&tileRow=${y}&tileCol=${x}'+key]\\n\\t   );\\n\\t   allLayers.push(layer);\\n\\t}\\n</pre>\"\n}\n[/block]","excerpt":"","slug":"migrating-from-openspace-british-national-grid","type":"basic","title":"Migrating from OpenSpace (British National Grid)"}

Migrating from OpenSpace (British National Grid)


The previous OS WMTS offering (OS OpenSpace API) was made using a custom JavaScript library that was built upon OpenLayers 2.12. In this tutorial, migrating the mapping from OpenSpace to OpenLayers 2.12 using EPSG:27700(British National Grid) is explained step by step. [block:callout] { "type": "info", "body": "Please note that the latest version of OpenLayers 2.x is 2.13.1. This demo focuses on transferring users over to OpenLayers 2.12.", "title": "OpenLayers 2.12" } [/block] [block:callout] { "type": "warning", "body": "This demo focuses on a like-for-like transition from OpenSpace to OS Maps API and therefore uses the British National Grid spatial reference system.", "title": "British National Grid (EPSG:27700)" } [/block] [block:api-header] { "type": "basic", "title": "Initial Code" } [/block] Here is basic code for setting up an OpenSpace map, which will be converted in this tutorial to an OpenLayers 2.12 map. [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>Basic Map</title>\n\n<script type=\"text/javascript\" src=\"http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=OPENSPACE_KEY\"></script> \n \n<style>\n html, body {height: 100%;}\n #map {width: 700px; height: 500px; border:1px solid black;}\n</style>\n\n</head> \n \n<script type=\"text/javascript\">\nvar osMap;\n\nfunction init(){\n\tosMap = new OpenSpace.Map('map');\n\tosMap.setCenter(new OpenSpace.MapPoint(400000, 400000), 0); \n}\n</script>\n \n<body onload=\"init()\">\n <h2>Basic Map</h2>\n <div id=\"map\"></div>\n</body>\n</html>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Converting the code" } [/block] 1. The JavaScript library used for the mapping has to change from OpenSpace to OpenLayers, specifically version 2.12. [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=OPENSPACE_KEY\"></script> \n\n<!-- Changes to -->\n\n<script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js\"></script> ", "language": "html" } ] } [/block] 2. CSS has to be added to remove an incorrect copyright market due to a WMTS service being used. [block:code] { "codes": [ { "code": "<style>\n html, body {height: 100%;}\n #map {width: 700px; height: 500px; border:1px solid black;}\n</style>\n\n<!-- Changes to -->\n\n<style>\n html, body {height: 100%;}\n #map {width: 700px; height: 500px; border:1px solid black;} \n\tdiv.olControlAttribution, div.olControlScaleLine {display:none;}\n</style>", "language": "html" } ] } [/block] 3. As the api authentication now occurs with each request rather than with access to the OpenSpace library a variable storing the API key needs to be created after the global osMap variable has been declared. [block:code] { "codes": [ { "code": "var osMap;\n\n//Changes to\n\nvar osMap;\nvar key = \"&key=[[app:key]]\";", "language": "javascript" } ] } [/block] 4. The initialising function structure remains, but the OpenSpace map now has to be loaded using OpenLayers 2.12 WMTS method.The OS Maps API WMTS service with the EPSG:27700 projection is used in this example and loaded to an OpenLayers XYZ layer. The layer is then added to the map. To ensure the layer works correctly, the layer resolutions and extents have to be specified. [block:code] { "codes": [ { "code": "function init(){\n osMap = new OpenSpace.Map('map');\n osMap.setCenter(new OpenSpace.MapPoint(400000, 400000), 0); \n}\n\n//Changes to\n\nfunction init(){\n\t\n\tvar mapResolutions = [896, 448, 224, 112, 56, 28, 14, 7, 3.5, 1.75, 0.875, 0.4375, 0.21875, 0.109375];\n\t\n\tvar extent = new OpenLayers.Bounds(-238375.0, 0, 680000, 1376256);\n\t\n\tvar restrictedExtent = new OpenLayers.Bounds(0, 0, 680000, 1376256);\n\tosMap = new OpenLayers.Map({\n\t div: \"map\",\n\t maxExtent: extent,\n\t resolutions: mapResolutions,\n\t units: \"m\",\n\t projection: \"EPSG:27700\",\n\t restrictedExtent: restrictedExtent,\n\t layers: [\n\t\t\tnew OpenLayers.Layer.XYZ(\n\t\t\t\t\"Outdoor\",\n \t\t[ 'https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/wmts?service=WMTS&request=GetTile&version=1.0.0&layer=Outdoor%2027700&style=true&format=image%2Fpng&tileMatrixSet=EPSG%3A27700&tileMatrix=EPSG%3A27700%3A${z}&tileRow=${y}&tileCol=${x}'+key\n \t ]\n \t )\n \t ]\n\t});\n\t\n\tosMap.setCenter(new OpenLayers.LonLat(463678, 151989), 0);\n};", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Output Code in Full" } [/block] [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>Basic Map</title>\n\n<script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js\"></script>\n \n \n<style>\n html, body {height: 100%;}\n #map {width: 700px; height: 500px; border:1px solid black;} \n\tdiv.olControlAttribution, div.olControlScaleLine {display:none;}\n</style>\n\n</head> \n \n<script type=\"text/javascript\">\nvar osMap;\nvar key = \"&key=[[app:key]]\";\n\nfunction init(){\n\t\tvar mapResolutions = [896, 448, 224, 112, 56, 28, 14, 7, 3.5, 1.75, 0.875, 0.4375, 0.21875, 0.109375];\n\t\n\tvar extent = new OpenLayers.Bounds(-238375.0, 0, 680000, 1376256);\n\t\n\tvar restrictedExtent = new OpenLayers.Bounds(0, 0, 680000, 1376256);\n\tosMap = new OpenLayers.Map({\n\t div: \"map\",\n\t maxExtent: extent,\n\t resolutions: mapResolutions,\n\t units: \"m\",\n\t projection: \"EPSG:27700\",\n\t restrictedExtent: restrictedExtent,\n\t layers: [\n\t\t\tnew OpenLayers.Layer.XYZ(\n\t\t\t\t\"Outdoor\",\n \t\t[ 'https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/wmts?service=WMTS&request=GetTile&version=1.0.0&layer=Outdoor%2027700&style=true&format=image%2Fpng&tileMatrixSet=EPSG%3A27700&tileMatrix=EPSG%3A27700%3A${z}&tileRow=${y}&tileCol=${x}'+key\n \t ]\n \t )\n \t ]\n\t});\n\tosMap.setCenter(new OpenLayers.LonLat(463678, 151989), 0);\n};\n</script>\n\n<body onload=\"init()\">\n <h2>Basic Map</h2>\n <div id=\"map\"></div>\n</body>\n</html>", "language": "html" } ] } [/block] [block:callout] { "type": "info", "title": "Loop through the layers", "body": "It is possible to create a basic loop that creates all the layers for OS Maps API, and replace the layers key in the osMap object with the allLayers array:\n<pre>\tvar styles = [\"Road\", \"Outdoor\", \"Light\", \"Night\"];\n\tvar allLayers = [];\n\t\n\tfor (i = 0; i < styles.length; i++){\n\t\tvar layer = new OpenLayers.Layer.XYZ(\n\t styles[i],\n\t ['https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/wmts?service=WMTS&request=GetTile&version=1.0.0&layer='+styles[i]+'%2027700&style=true&format=image%2Fpng&tileMatrixSet=EPSG%3A27700&tileMatrix=EPSG%3A27700%3A${z}&tileRow=${y}&tileCol=${x}'+key]\n\t );\n\t allLayers.push(layer);\n\t}\n</pre>" } [/block]