{"_id":"55e973d2461e2a390050f233","category":{"_id":"55e06cc1a44fae0d002146cb","pages":["55e06d766bad670d0081f263","55e06dcd186ca30d00f9b44d","55e0813b186ca30d00f9b46b","55e9771139c5042d00912b3c","55e9772c8b72bb3700b1d5b8","55e9774e39c5042d00912b3e","55e977758b72bb3700b1d5bb","5624d84d72ac510d00e49198","564c9540caea7a1700a25a0d","564c978745d0362b00a58b8e"],"project":"55e06494a44fae0d002146aa","__v":10,"version":"55e06495a44fae0d002146ad","sync":{"url":"","isSync":false},"reference":true,"createdAt":"2015-08-28T14:14:25.894Z","from_sync":false,"order":1,"slug":"os-maps-coming-soon","title":"OS Maps"},"user":"55c9b7b4e4927a0d0004a727","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"},"project":"55e06494a44fae0d002146aa","parentDoc":null,"__v":13,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-04T10:34:58.576Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Writing your code\"\n}\n[/block]\n##Leaflet Example\n[Leaflet](http://leafletjs.com) is an open-source JavaScript library that can be used to display OS Maps API mapping. Below is an example of this: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"stylesheet\\\" href=\\\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css\\\" />\\n<script src=\\\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js\\\"></script>\\n\\n<div id=\\\"map\\\" style=\\\"height: 500px; width:500px;\\\"></div>\\n\\n<script type=\\\"text/javascript\\\">\\nvar map = L.map('map').setView([51.505, -0.09], 15);\\n\\nL.tileLayer('https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/EPSG%3A3857/Outdoor 3857/{z}/{x}/{y}.png?key=[[app:key]]', {\\n    maxZoom: 20,\\n    minZoom: 7\\n}).addTo(map);\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n##Breakdown\n1. Access the Leaflet stylesheet and javascript library.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"stylesheet\\\" href=\\\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css\\\" />\\n<script src=\\\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n2. Create the div that will hold the map, giving it a height and width of 500 pixels, and an ID of “map”. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"map\\\" style=\\\"height: 500px; width:500px;\\\"></div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n3. A variable “map” is created that will associate the leaflet map with the div with the id of “map”. Then the initial view of the map is set at coordinates 51.505, -0.09, and a zoom level of 15.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var map = L.map('map').setView([51.505, -0.09], 15);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n4. Here the map service is declared, which in this instance is OS Maps ZXY service using the web Mercator projection (EPSG:3857) and the Outdoor styling. Also as the OS Maps API provides coverage for Great Britain, the minimum and maximum zoom levels are adjusted to adhere to global coverage. Finally, the tile layer is added to the map declared in the variable ‘map’.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"L.tileLayer('https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/EPSG%3A3857/Outdoor 3857/{z}/{x}/{y}.png?key=[[app:key]]', {\\n    maxZoom: 20,\\n    minZoom: 7\\n}).addTo(map);\",\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%2Fs5b8ohkj%2Fembedded%2F&url=https%3A%2F%2Fjsfiddle.net%2FAPITeam%2Fs5b8ohkj%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/s5b8ohkj/\",\n  \"title\": \"OS Maps API Leaflet ZXY Example - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\",\n  \"image\": \"https://www.gravatar.com/avatar/703841b21835cc6963a78c96310a45d2/?default=&s=80\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Github Page\"\n}\n[/block]\nThe Github resource page containing further demonstrations and code snippets can be located [here](https://github.com/OrdnanceSurvey/OS-Maps-API).","excerpt":"","slug":"os-maps-quick-start-guide","type":"basic","title":"Quick start guide"}
[block:api-header] { "type": "basic", "title": "Writing your code" } [/block] ##Leaflet Example [Leaflet](http://leafletjs.com) is an open-source JavaScript library that can be used to display OS Maps API mapping. Below is an example of this: [block:code] { "codes": [ { "code": "<link rel=\"stylesheet\" href=\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css\" />\n<script src=\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js\"></script>\n\n<div id=\"map\" style=\"height: 500px; width:500px;\"></div>\n\n<script type=\"text/javascript\">\nvar map = L.map('map').setView([51.505, -0.09], 15);\n\nL.tileLayer('https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/EPSG%3A3857/Outdoor 3857/{z}/{x}/{y}.png?key=[[app:key]]', {\n maxZoom: 20,\n minZoom: 7\n}).addTo(map);\n</script>", "language": "html" } ] } [/block] ##Breakdown 1. Access the Leaflet stylesheet and javascript library. [block:code] { "codes": [ { "code": "<link rel=\"stylesheet\" href=\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css\" />\n<script src=\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js\"></script>", "language": "html" } ] } [/block] 2. Create the div that will hold the map, giving it a height and width of 500 pixels, and an ID of “map”. [block:code] { "codes": [ { "code": "<div id=\"map\" style=\"height: 500px; width:500px;\"></div>", "language": "html" } ] } [/block] 3. A variable “map” is created that will associate the leaflet map with the div with the id of “map”. Then the initial view of the map is set at coordinates 51.505, -0.09, and a zoom level of 15. [block:code] { "codes": [ { "code": "var map = L.map('map').setView([51.505, -0.09], 15);", "language": "javascript" } ] } [/block] 4. Here the map service is declared, which in this instance is OS Maps ZXY service using the web Mercator projection (EPSG:3857) and the Outdoor styling. Also as the OS Maps API provides coverage for Great Britain, the minimum and maximum zoom levels are adjusted to adhere to global coverage. Finally, the tile layer is added to the map declared in the variable ‘map’. [block:code] { "codes": [ { "code": "L.tileLayer('https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/EPSG%3A3857/Outdoor 3857/{z}/{x}/{y}.png?key=[[app:key]]', {\n maxZoom: 20,\n minZoom: 7\n}).addTo(map);", "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%2Fs5b8ohkj%2Fembedded%2F&url=https%3A%2F%2Fjsfiddle.net%2FAPITeam%2Fs5b8ohkj%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/s5b8ohkj/", "title": "OS Maps API Leaflet ZXY Example - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png", "image": "https://www.gravatar.com/avatar/703841b21835cc6963a78c96310a45d2/?default=&s=80" } [/block] [block:api-header] { "type": "basic", "title": "Github Page" } [/block] The Github resource page containing further demonstrations and code snippets can be located [here](https://github.com/OrdnanceSurvey/OS-Maps-API).