See also Leaflet map html example - basic.
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IDAHO Leaflet demo</title>
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
<style>
#map
{
border: 1px solid #ddd;
background-color: #ddd;
width: 100%;
height: 400px
}
input, textarea{
position: relative;
float: left;
clear: both;
width: 480px;
}
button{
position: relative;
float: left;
clear: both
}
</style>
</head>
<body onload="initMap()">
<div id="map"></div>
<input id="idahoid" type="text" placeholder="IDAHO ID"/>
<input id="bands" type="text" placeholder="Bands"/>
<input id="center" type="text" placeholder="Center"/>
<textarea id="token" rows="4" placeholder="Token"></textarea>
<button onclick="showLayer()">Show</button>
<script type="application/javascript">
var map = null;
function showLayer()
{
var token = document.getElementById("token").value;
var idahoid = document.getElementById("idahoid").value;
if(!token || ! idahoid) return;
var bands = document.getElementById("bands").value;
if(!bands || bands.length < 1)
bands="0";
var panTo = document.getElementById("center").value;
if(panTo)
{
var coords = document.getElementById("center").value.split(',');
//leaflet wants lat(y) long(x)
panTo = L.latLng(parseFloat(coords[1].trim()), parseFloat(coords[0].trim()));
}
var idahotmslayer = 'http://idaho.geobigdata.io/v1/tile/idaho-images/'+idahoid+'/{z}/{x}/{y}?bands='+bands+'&token='+token;
var leafletlayer = new L.TileLayer(idahotmslayer);
map.addLayer(leafletlayer);
if(panTo)
{
map.setZoom(13);
map.panTo(panTo);
}
}
function initMap()
{
map = L.map('map', {
zoom: 1
});
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB'
}).addTo(map);
map.panTo([0,0])
}
</script>
</body>
</html>