{"_id":"564b4587ee12850d00958626","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"},"parentDoc":null,"__v":32,"project":"55e06494a44fae0d002146aa","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":"2015-11-17T15:19:35.752Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"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:3857(Web Mercator) is explained step by step. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"OpenLayers 2.12\",\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}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Web Mercator (EPSG:3857)\",\n  \"body\": \"Web Mercator is spatial reference system is a variation of the Mercator projection and is most commonly found in web applications. If you use data on your map that uses a different spatial reference system, then the data coordinates will have to be adjusted to Web Mercator.\"\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 ZXY service with the EPSG:3857 projection is used in this example and loaded to an OpenLayers OSM layer. The layer is then added to the map\n\n5. To center the map, the OpenLayers LonLat class is used to store a longitude and latitude pair. A variable is also created to store the requested zoom level. The map is then centered on the specified position at the requested zoom level.\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  map = new OpenLayers.Map(\\\"map\\\");\\n\\n  var osMap = new OpenLayers.Layer.OSM(\\\"OS\\\", \\\"https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/EPSG:3857/Outdoor 3857/${z}/${x}/${y}.png\\\" + key, {numZoomLevels: 12});\\n  \\n  map.addLayer(osMap);\\n\\n  var position = new OpenLayers.LonLat(-163706.4431378,6610351.6238611);\\n  var zoom = 16; \\n  map.setCenter(position, zoom );\\n }\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n6. The DIV for the map remains the same, as well as the body tags and onload attribute. \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<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  map = new OpenLayers.Map('map');\\n\\n  var osMap = new OpenLayers.Layer.OSM(\\\"OS\\\", \\\"https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/EPSG:3857/Outdoor 3857/${z}/${x}/${y}.png\\\" + key, {numZoomLevels: 20});\\n  \\n\\tmap.addLayer(osMap);\\n\\n  var position = new OpenLayers.LonLat(-163706.4431378,6610351.6238611);\\n\\tvar zoom = 16; \\n  map.setCenter(position, zoom );\\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]","excerpt":"","slug":"migrating-from-openspace","type":"basic","title":"Migrating from OpenSpace (Web Mercator)"}

Migrating from OpenSpace (Web Mercator)


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:3857(Web Mercator) is explained step by step. [block:callout] { "type": "info", "title": "OpenLayers 2.12", "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." } [/block] [block:callout] { "type": "warning", "title": "Web Mercator (EPSG:3857)", "body": "Web Mercator is spatial reference system is a variation of the Mercator projection and is most commonly found in web applications. If you use data on your map that uses a different spatial reference system, then the data coordinates will have to be adjusted to Web Mercator." } [/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 ZXY service with the EPSG:3857 projection is used in this example and loaded to an OpenLayers OSM layer. The layer is then added to the map 5. To center the map, the OpenLayers LonLat class is used to store a longitude and latitude pair. A variable is also created to store the requested zoom level. The map is then centered on the specified position at the requested zoom level. [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 map = new OpenLayers.Map(\"map\");\n\n var osMap = new OpenLayers.Layer.OSM(\"OS\", \"https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/EPSG:3857/Outdoor 3857/${z}/${x}/${y}.png\" + key, {numZoomLevels: 12});\n \n map.addLayer(osMap);\n\n var position = new OpenLayers.LonLat(-163706.4431378,6610351.6238611);\n var zoom = 16; \n map.setCenter(position, zoom );\n }", "language": "javascript" } ] } [/block] 6. The DIV for the map remains the same, as well as the body tags and onload attribute. [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<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 map = new OpenLayers.Map('map');\n\n var osMap = new OpenLayers.Layer.OSM(\"OS\", \"https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/EPSG:3857/Outdoor 3857/${z}/${x}/${y}.png\" + key, {numZoomLevels: 20});\n \n\tmap.addLayer(osMap);\n\n var position = new OpenLayers.LonLat(-163706.4431378,6610351.6238611);\n\tvar zoom = 16; \n map.setCenter(position, zoom );\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]