{"__v":2,"_id":"5661fdcb55e4450d00e62c7d","category":{"__v":1,"_id":"5661fdcb55e4450d00e62c74","pages":["5661fdcb55e4450d00e62c7a","5661fdcb55e4450d00e62c7b","5661fdcb55e4450d00e62c7c","5661fdcb55e4450d00e62c7d","5661fdcb55e4450d00e62c7e","5661fdcb55e4450d00e62c7f"],"project":"5511df3be2990b0d00fb071d","version":"5661fdca55e4450d00e62c73","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-03-24T22:03:40.337Z","from_sync":false,"order":0,"slug":"getting-started","title":"Getting Started"},"parentDoc":null,"project":"5511df3be2990b0d00fb071d","user":"551d6846a7e98017009e3e3b","version":{"__v":2,"_id":"5661fdca55e4450d00e62c73","project":"5511df3be2990b0d00fb071d","createdAt":"2015-12-04T20:55:38.639Z","releaseDate":"2015-12-04T20:55:38.639Z","categories":["5661fdcb55e4450d00e62c74","5661fdcb55e4450d00e62c75","5661fdcb55e4450d00e62c76","5661fdcb55e4450d00e62c77","5661fdcb55e4450d00e62c78","5661fdcb55e4450d00e62c79","567c42b13241c20d00b7312e"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-05-05T13:59:46.374Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"Beyond just embedding the processed image on your site, you can use JavaScript to build an interactive experience around the imagery. Below is an example of using [mapbox.js](https://www.mapbox.com/mapbox.js) to interact with the processed imagery by embedding it within a webpage.\n\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Before you begin\",\n  \"body\": \"Before you can utilize the mapbox.js tools, you will need a developer account and token which you can create [here](https://www.mapbox.com/account/apps/).\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  <head>\\n      <title>Embed Example</title>\\n      <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>\\n      <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />\\n      <style>\\n          body { margin:0; padding:0; }\\n          #map { position:absolute; top:0; bottom:0; width:100%; }\\n      </style>    \\n  </head>\\n\\n  <body>\\n      <div id='map'></div>\\n      <script>\\n          L.mapbox.accessToken = 'TOKEN'; // Mapbox public key\\n          var map = L.mapbox.map('map');\\n          L.mapbox.tileLayer('astrodigital.LC80010802014240LGN00_bands_432', { format: 'png' }).addTo(map); // add satellite image to the map\\n          map.setView([-28.6713,-71.1475], 8); // specify initial view\\n      </script>\\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThis simple example will give you a webpage with your processed image embedded on it. See Mapbox [documentation](https://www.mapbox.com/mapbox.js) for more information on how to add multiple images and data layers and enable greater interactivity.","excerpt":"","slug":"using-processed-imagery-via-mapbox","type":"basic","title":"Using Processed Imagery via Mapbox"}

Using Processed Imagery via Mapbox


Beyond just embedding the processed image on your site, you can use JavaScript to build an interactive experience around the imagery. Below is an example of using [mapbox.js](https://www.mapbox.com/mapbox.js) to interact with the processed imagery by embedding it within a webpage. [block:callout] { "type": "warning", "title": "Before you begin", "body": "Before you can utilize the mapbox.js tools, you will need a developer account and token which you can create [here](https://www.mapbox.com/account/apps/)." } [/block] [block:code] { "codes": [ { "code": "<html>\n <head>\n <title>Embed Example</title>\n <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>\n <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />\n <style>\n body { margin:0; padding:0; }\n #map { position:absolute; top:0; bottom:0; width:100%; }\n </style> \n </head>\n\n <body>\n <div id='map'></div>\n <script>\n L.mapbox.accessToken = 'TOKEN'; // Mapbox public key\n var map = L.mapbox.map('map');\n L.mapbox.tileLayer('astrodigital.LC80010802014240LGN00_bands_432', { format: 'png' }).addTo(map); // add satellite image to the map\n map.setView([-28.6713,-71.1475], 8); // specify initial view\n </script>\n </body>\n</html>", "language": "html" } ] } [/block] This simple example will give you a webpage with your processed image embedded on it. See Mapbox [documentation](https://www.mapbox.com/mapbox.js) for more information on how to add multiple images and data layers and enable greater interactivity.