{"_id":"5661fdcb55e4450d00e62c7e","version":{"_id":"5661fdca55e4450d00e62c73","project":"5511df3be2990b0d00fb071d","__v":2,"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"},"__v":2,"parentDoc":null,"user":"551d6846a7e98017009e3e3b","category":{"_id":"5661fdcb55e4450d00e62c74","__v":1,"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"},"project":"5511df3be2990b0d00fb071d","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-05-14T14:47:24.347Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"[Leaflet](http://leafletjs.com/) is an open-source JavaScript library for creating mobile-friendly interactive maps. It has all the features most developers ever need for online maps.\n\nBelow is an example of how to add your processed imagery to an [OpenStreetMap](https://www.openstreetmap.org/) baselayer:\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Before you begin\",\n  \"body\": \"Before you can build an application with your processed imagery, you will need a Mapbox 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\": \"<head>\\n    <title>Leaflet.js Embed Example</title>\\n    <link rel=\\\"stylesheet\\\" href=\\\"http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css\\\" />\\n    <script src=\\\"http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js\\\"></script>\\n</head>\\n\\n<body>\\n    <div id=\\\"map\\\" style=\\\"height:100%; width:100%;\\\"></div>\\n    <script type=\\\"text/javascript\\\">\\n        // Your Mapbox token goes here\\n        var accessToken = '...';\\n        // Format for OSM tiles\\n        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';\\n        // Format for Mapbox tiles\\n        var mbUrl = 'https://{s}.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={token}';\\n        // Create new Leaflet map and set initial view\\n        var map = new L.Map('map').setView([-28.938274, -71.313503], 9);\\n        // Add OpenStreetMap base layer\\n        L.tileLayer(osmUrl, {minZoom: 8, maxZoom: 12}).addTo(map);\\n        // Add processed Astro Digital image\\n        L.tileLayer(mbUrl, {id: 'astrodigital.LC80010802014240LGN00_bands_432', token: TOKEN}).addTo(map);\\n    </script>\\n</body>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThis simple example will give you a webpage with your processed image embedded on it overtop of an OpenStreetMap baselayer. See Leaflet [documentation](http://leafletjs.com/reference.html) for more information on how to add multiple images and data layers and enable greater interactivity.","excerpt":"","slug":"using-processed-imagery-via-leaflet","type":"basic","title":"Using Processed Imagery via Leaflet"}

Using Processed Imagery via Leaflet


[Leaflet](http://leafletjs.com/) is an open-source JavaScript library for creating mobile-friendly interactive maps. It has all the features most developers ever need for online maps. Below is an example of how to add your processed imagery to an [OpenStreetMap](https://www.openstreetmap.org/) baselayer: [block:callout] { "type": "warning", "title": "Before you begin", "body": "Before you can build an application with your processed imagery, you will need a Mapbox developer account and token which you can create [here](https://www.mapbox.com/account/apps/)." } [/block] [block:code] { "codes": [ { "code": "<head>\n <title>Leaflet.js Embed Example</title>\n <link rel=\"stylesheet\" href=\"http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css\" />\n <script src=\"http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js\"></script>\n</head>\n\n<body>\n <div id=\"map\" style=\"height:100%; width:100%;\"></div>\n <script type=\"text/javascript\">\n // Your Mapbox token goes here\n var accessToken = '...';\n // Format for OSM tiles\n var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';\n // Format for Mapbox tiles\n var mbUrl = 'https://{s}.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={token}';\n // Create new Leaflet map and set initial view\n var map = new L.Map('map').setView([-28.938274, -71.313503], 9);\n // Add OpenStreetMap base layer\n L.tileLayer(osmUrl, {minZoom: 8, maxZoom: 12}).addTo(map);\n // Add processed Astro Digital image\n L.tileLayer(mbUrl, {id: 'astrodigital.LC80010802014240LGN00_bands_432', token: TOKEN}).addTo(map);\n </script>\n</body>\n", "language": "html" } ] } [/block] This simple example will give you a webpage with your processed image embedded on it overtop of an OpenStreetMap baselayer. See Leaflet [documentation](http://leafletjs.com/reference.html) for more information on how to add multiple images and data layers and enable greater interactivity.