{"_id":"586d8f521c014819000ea67b","category":{"_id":"586d8f511c014819000ea663","__v":0,"project":"56d629f02417921500c46716","version":"586d8f511c014819000ea65d","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-03-25T01:10:14.029Z","from_sync":false,"order":6,"slug":"integration-examples","title":"Examples"},"user":"56d62986b30acf150053be43","__v":0,"parentDoc":null,"project":"56d629f02417921500c46716","version":{"_id":"586d8f511c014819000ea65d","project":"56d629f02417921500c46716","__v":2,"createdAt":"2017-01-05T00:12:01.865Z","releaseDate":"2017-01-05T00:12:01.865Z","categories":["586d8f511c014819000ea65e","586d8f511c014819000ea65f","586d8f511c014819000ea660","586d8f511c014819000ea661","586d8f511c014819000ea662","586d8f511c014819000ea663","586d8f511c014819000ea664","587977f57a58130f00303d4e"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"adams","version_clean":"2.0.0","version":"2.0"},"githubsync":"","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-03-25T01:10:25.506Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":10,"body":"[block:html]\n{\n  \"html\": \"<p>You can easily use <a href=\\\"http://developer.digitalglobe.com/maps-api/\\\">DigitalGlobe Maps API</a> with <a href=\\\"http://www.leafletjs.com\\\" target=\\\"_blank\\\">Leaflet.js,</a> the leading open-source <a href=\\\"https://en.wikipedia.org/wiki/JavaScript\\\" target=\\\"_blank\\\">JavaScript</a> library for web browser and mobile-friendly interactive maps. Weighing just about 33 KB of JS code , Leaflet has all the mapping features most developers ever need. <em>Leaflet</em> is designed with simplicity, performance and usability in mind.</p>\\n<p>The javascript code snippet below details how to integrate DigitalGlobe Maps API with <em>Leaflet.js:</em><br />\\n</p>\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// You will need to replace the 'api_key' with your own. get your access token/key here: http://platform.digitalglobe.com/maps-api\\nvar map;\\nvar zoom = 15;\\nvar api_key = 'ENTER YOUR MAPS API ACCESS TOKEN HERE';\\nvar terrain = new L.tileLayer('https://api.mapbox.com/v4/digitalglobe.nako1fhg/{z}/{x}/{y}.png?access_token=' + api_key, {\\n    minZoom: 1,\\n    maxZoom: 19,\\n    attribution: '(c) OpenStreetMap, (c) Mapbox'\\n});\\nvar recent = new L.tileLayer('https://api.mapbox.com/v4/digitalglobe.nal0g75k/{z}/{x}/{y}.png?access_token=' + api_key, {\\n    minZoom: 1,\\n    maxZoom: 19,\\n    attribution: '(c) <a href=\\\"https://platform.digitalglobe.com/maps-api\\\">DigitalGlobe</a>'\\n});\\n\\n\\n$(function () {\\n    map = new L.map('map', {\\n        center: new L.LatLng(41.89, 12.486),\\n        zoom: zoom,\\n        zoomControl: true,\\n        layers: [recent]\\n    });\\n    map.attributionControl.setPrefix('');\\n    var overlays = {\\n        \\\"DigitalGlobe Maps API: Terrain Map\\\": terrain,\\n            \\\"DigitalGlobe Maps API: Recent Imagery\\\": recent\\n    };\\n    L.control.layers(overlays, null, {\\n        collapsed: false\\n    }).addTo(map);\\n\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"maps-api-leafletjs","type":"basic","title":"Maps API + Leaflet.js"}

Maps API + Leaflet.js


[block:html] { "html": "<p>You can easily use <a href=\"http://developer.digitalglobe.com/maps-api/\">DigitalGlobe Maps API</a> with <a href=\"http://www.leafletjs.com\" target=\"_blank\">Leaflet.js,</a> the leading open-source <a href=\"https://en.wikipedia.org/wiki/JavaScript\" target=\"_blank\">JavaScript</a> library for web browser and mobile-friendly interactive maps. Weighing just about 33 KB of JS code , Leaflet has all the mapping features most developers ever need. <em>Leaflet</em> is designed with simplicity, performance and usability in mind.</p>\n<p>The javascript code snippet below details how to integrate DigitalGlobe Maps API with <em>Leaflet.js:</em><br />\n</p>" } [/block] [block:code] { "codes": [ { "code": "// You will need to replace the 'api_key' with your own. get your access token/key here: http://platform.digitalglobe.com/maps-api\nvar map;\nvar zoom = 15;\nvar api_key = 'ENTER YOUR MAPS API ACCESS TOKEN HERE';\nvar terrain = new L.tileLayer('https://api.mapbox.com/v4/digitalglobe.nako1fhg/{z}/{x}/{y}.png?access_token=' + api_key, {\n minZoom: 1,\n maxZoom: 19,\n attribution: '(c) OpenStreetMap, (c) Mapbox'\n});\nvar recent = new L.tileLayer('https://api.mapbox.com/v4/digitalglobe.nal0g75k/{z}/{x}/{y}.png?access_token=' + api_key, {\n minZoom: 1,\n maxZoom: 19,\n attribution: '(c) <a href=\"https://platform.digitalglobe.com/maps-api\">DigitalGlobe</a>'\n});\n\n\n$(function () {\n map = new L.map('map', {\n center: new L.LatLng(41.89, 12.486),\n zoom: zoom,\n zoomControl: true,\n layers: [recent]\n });\n map.attributionControl.setPrefix('');\n var overlays = {\n \"DigitalGlobe Maps API: Terrain Map\": terrain,\n \"DigitalGlobe Maps API: Recent Imagery\": recent\n };\n L.control.layers(overlays, null, {\n collapsed: false\n }).addTo(map);\n\n});", "language": "javascript" } ] } [/block]