diff --git a/georaster/geotiff.github.io.htm b/georaster/geotiff.github.io.htm
new file mode 100644
index 0000000..684b38a
--- /dev/null
+++ b/georaster/geotiff.github.io.htm
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
+    <style>
+      #map {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/georaster"></script>
+    <script src="https://unpkg.com/georaster-layer-for-leaflet"></script>
+    <script>
+      // initialize leaflet map
+      var map = L.map('map').setView([0, 0], 5);
+
+      // add OpenStreetMap basemap
+      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(map);
+
+      var url_to_geotiff_file = "http://86.252.142.56/KENNEDY.tif";
+
+      fetch(url_to_geotiff_file)
+        .then(response => response.arrayBuffer())
+        .then(arrayBuffer => {
+          parseGeoraster(arrayBuffer).then(georaster => {
+            console.log("georaster:", georaster);
+
+            /*
+                GeoRasterLayer is an extension of GridLayer,
+                which means can use GridLayer options like opacity.
+
+                Just make sure to include the georaster option!
+
+                http://leafletjs.com/reference-1.2.0.html#gridlayer
+            */
+            var layer = new GeoRasterLayer({
+                georaster: georaster,
+                opacity: 0.7,
+                resolution: 256
+            });
+            layer.addTo(map);
+
+            map.fitBounds(layer.getBounds());
+
+        });
+      });
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/georaster/load-file.html b/georaster/load-file.html
new file mode 100644
index 0000000..b2b8fea
--- /dev/null
+++ b/georaster/load-file.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
+    <style>
+      #map {
+			height: 400px;
+			width: 600px;
+			max-width: 100%;
+			max-height: 100%;
+			background-color: white;
+			outline:auto;
+		}
+      #overlay {
+        height: 100px;
+        z-index: 9;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="overlay">
+      <h1>Load a GeoTIFF File</h1>
+      <input type="file" id="geotiff-file">
+    </div>
+    <div id="map"></div>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/georaster"></script>
+    <script src="https://unpkg.com/proj4"></script>
+    <script src="https://unpkg.com/georaster-layer-for-leaflet"></script>
+    <script>
+      // initalize leaflet map
+      var map = L.map('map').setView([0, 0], 5);
+
+      // add OpenStreetMap basemap
+      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(map);
+
+      document.getElementById("geotiff-file").addEventListener("change", function(event) {
+        var file = event.target.files[0];
+        console.log("file:", file);
+
+        var reader = new FileReader();
+        reader.readAsArrayBuffer(file);
+        reader.onloadend = function() {
+          var arrayBuffer = reader.result;
+          parseGeoraster(arrayBuffer).then(georaster => {
+
+            console.log("georaster:", georaster);
+            /*
+                GeoRasterLayer is an extension of GridLayer,
+                which means can use GridLayer options like opacity.
+
+                Just make sure to include the georaster option!
+
+                http://leafletjs.com/reference-1.2.0.html#gridlayer
+            */
+            var layer = new GeoRasterLayer({
+                georaster: georaster,
+                opacity: 0.7,
+                resolution: 256
+            });
+            console.log("layer:", layer);
+            layer.addTo(map);
+
+            map.fitBounds(layer.getBounds());
+          });
+        };
+      });
+    </script>
+  </body>
+</html>
