GBDX

Leaflet map html example - basic

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

<!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
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="application/javascript">
    var token = "INSERT TOKEN HERE";
    var idahotmslayer = 'http://idaho.geobigdata.io/v1/tile/idaho-images/fda14d57-a65e-46d7-b9c5-9836ffea0cc0/{z}/{x}/{y}?bands=4,2,1&token='+token;
    var leafletlayer = new L.TileLayer(idahotmslayer, {minZoom: 11, maxZoom: 20});
    var map = L.map('map', {
        center: [37.55, -122.32],
        zoom: 13
    });
    map.addLayer(leafletlayer);
</script>
</body>
</html>

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.

Leaflet map html example - basic

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