OpenLayers html example - basic

This simple html example shows how create an OpenLayers map using an IDAHO TMS layer.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>IDAHO OpenLayers demo</title>

    <link rel="stylesheet" href="">
    <script type="text/javascript" src=""></script>
            border: 1px solid #ddd;
            background-color: #ddd;
            width: 100%;
            height: 400px

<div id="map"></div>
<script type="application/javascript">
    var token = "INSERT TOKEN HERE";
    var layerurl = '{z}/{x}/{y}?bands=4,2,1&token='+token;
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                    url: layerurl
        target: 'map',
        view: new ol.View({
            center: ol.proj.transform([-122.32, 37.55], 'EPSG:4326', 'EPSG:3857'),
            zoom: 13

To use this example, replace "insert token here" with a valid GBDX token string.

var token = "INSERT TOKEN HERE";

To learn more about tokens, see Authentication Course.